Puppeteer - 如何使用 page.evaluateHandle

我在使用最新版本的 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);
  });

我得到一个空物体。

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

木偶师改变了方式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();
})();

以供参考：评估文档 https://github.com/puppeteer/puppeteer/blob/v5.0.0/docs/api.md#pageevaluatepagefunction-args, 问题 #1590 https://github.com/GoogleChrome/puppeteer/issues/1590, 问题#1003 https://github.com/GoogleChrome/puppeteer/issues/1003 and PR #1098 https://github.com/GoogleChrome/puppeteer/pull/1098