木偶-如何使用page.evaluateHandle

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 element = document.getElementsByTagName('h1');
    return element;
  });
  console.log(jsHandle); // JSHandle

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

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

供参考：evalute docs，问题＃1590，问题＃1003和PR＃1098