Puppeteer

Question

我在使用最新版本的 puppeteer 时遇到了一些问题。

我正在使用 puppeteer 版本 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() 并尝试 console.log 我得到 Promise { <pending> }.

如果我只是尝试获取这样的元素：

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

我得到一个空对象。

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

Answer 1

Puppeteer 改变了 evaluate 的工作方式，检索 DOM 元素的最安全方法是创建 JSHandle，并将该句柄传递给评估函数：

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();
})();

供参考：evalute docs, issue #1590, issue #1003 and PR #1098

Puppeteer - 如何使用 page.evaluateHandle

Puppeteer - how to use page.evaluateHandle

javascript

reactjs