为什么在 Puppeteer 中查询元素时 `page.evaluate()` 返回空对象？

Puppeteer: page.evaluate querySelectorAll 困境

在 Puppeteer 中使用 page.evaluate() 函数时，部分用户遇到了以下问题结果接收到一个空对象数组。这种令人费解的行为源于需要从评估函数中返回可序列化的值。

考虑以下 Puppeteer 代码，其中的目标是从流行的社交新闻聚合网站 Reddit 中提取标题元素：

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

执行后，此代码可能会返回一组与问题描述中提到的类似的空对象。原因在于，虽然 DOM 元素不能直接序列化为 JSON，但 Puppeteer 仍会尝试将它们字符串化。

要解决此问题，代码需要从元素中提取所需的值并返回它们采用 JSON 可序列化格式。在这种情况下，标题元素的 href 属性保存实际的标题链接。要获取这些，可以修改代码如下：

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

以上是为什么在 Puppeteer 中查询元素时 `page.evaluate()` 返回空对象？的详细内容。更多信息请关注PHP中文网其他相关文章！