代码之家 › 专栏 › 技术社区 › Kristoffer

木偶演员-如何使用页面。evaluateHandle

puppeteer reactjs javascript

Kristoffer · 技术社区 · 7 年前

我在使用最新版本的木偶戏时遇到了一些麻烦。

我使用的是木偶师版本0.13.0。

我有一个包含此元素的站点:

<div class="header">hey there</div>

我正在尝试运行以下代码:

  const headerHandle = await page.evaluateHandle(() => {
    const element = document.getElementsByClassName('header');
    return element;
  });

现在headerHandle是一个JSHandle,其描述为:“HTMLCollection(0)”。

如果我想跑 headerHandle.getProperties() 试着去安慰。我得到的日志 Promise { <pending> } .

如果我只想得到如下元素:

  const result = await page.evaluate(() => {
    const element = document.getElementsByClassName('header');
    return Promise.resolve(element);
  });

我得到一个空对象。

如何获取实际元素或元素的值?

1 回复 | 直到 7 年前

ggorlen Hoàng Huy Khánh 3 年前

木偶演员改变了方式 evaluate 如果有效,检索DOM元素最安全的方法是创建JSHandle,并将该句柄传递给evaluate函数:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });

  const jsHandle = await page.evaluateHandle(() => {
    const elements = document.getElementsByTagName('h1');
    return elements;
  });
  console.log(jsHandle); // JSHandle

  const result = await page.evaluate(els => els[0].innerHTML, jsHandle);
  console.log(result); // it will log the string 'Example Domain'

  await browser.close();
})();