Puppeteer page.evaluate querySelectorAll return 空对象

Question

我正在试用 Puppeteer。这是您可以运行的示例代码：https://try-puppeteer.appspot.com/

问题是这段代码返回了一个空对象数组：

[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]

我是不是搞错了？

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://reddit.com/');

let list = await page.evaluate(() => {
  return Promise.resolve(Array.from(document.querySelectorAll('.title')));
});

console.log(JSON.stringify(list))

await browser.close();

Answer 1

从评估函数中 return 编辑的值应该 json 可序列化。 https://github.com/GoogleChrome/puppeteer/issues/303#issuecomment-322919968

解决方案是从元素中提取 href 值并 return 它。

 await this.page.evaluate((sel) => {
        let elements = Array.from(document.querySelectorAll(sel));
        let links = elements.map(element => {
            return element.href
        })
        return links;
    }, sel);

Answer 2

我遇到了类似的问题，我是这样解决的；

 await page.evaluate(() => 
       Array.from(document.querySelectorAll('.title'), 
       e => e.href));

Answer 3

问题：

page.evaluate() must be serializable 的 return 值。

根据Puppeteer documentation，它说：

If the function passed to the page.evaluate returns a non-Serializable value, then page.evaluate resolves to undefined. DevTools Protocol also supports transferring some additional values that are not serializable by JSON: -0, NaN, Infinity, -Infinity, and bigint literals.

换句话说，您不能 return 页面 DOM 环境中的元素返回 Node.js 环境，因为它们是分开的。

解法：

您可以 return 一个 ElementHandle，它是页内 DOM 元素的表示，返回到 Node.js 环境。

使用page.$$()得到一个ElementHandle数组：

let list = await page.$$('.title');

否则，如果你想提取 href values from the elements and return them, you can use page.$$eval():

let list = await page.$$eval('.title', a => a.href);

Puppeteer page.evaluate querySelectorAll return 空对象

Puppeteer page.evaluate querySelectorAll return empty objects

javascript

node.js

google-chrome-devtools

google-chrome-headless

puppeteer