为什么 puppeteer 评估函数返回空对象答案

【问题标题】：Why puppeteer evaluate function is returning empty objects为什么 puppeteer 评估函数返回空对象
【发布时间】：2021-05-15 07:00:52
【问题描述】：

这是我的代码。基本上我愿意做的是获取 HTML 并解析它以获取内容。

async function main() {
  const browser = await puppeteer.launch({
    headless: false,
    executablePath: EXECUTABLE_PATH,
    devtools: true,
    timeout: 50000,
  });
  const page = await browser.newPage();
  await page.goto(URL);
  //   await page.screenshot({ path: "screenshot.png", fullPage: true });
  const rows = await page.evaluate(() => {
    return [...document.querySelectorAll(".td-block-span6")];
  });
  console.log(rows);
}
main();

console.log 给了我这个

[
  {},
  {},
  {},
  {},
  {},
  {},
  { closure_uid_230013206: 25 },
  { closure_uid_230013206: 22 },
  { closure_uid_230013206: 20 },
  { closure_uid_230013206: 15 }
]

【问题讨论】：

我们需要更多信息。网址是什么？您要解析什么内容？

标签： javascript node.js web-scraping puppeteer

【解决方案1】：

不幸的是，page.evaluate() 只能传输可序列化的值（大致是 JSON 可以处理的值）。由于document.querySelectorAll() 返回一个不可序列化的 DOM 元素集合（它们包含方法和循环引用），所以集合中的每个元素都被替换为一个空对象。您需要返回可序列化的值（例如，文本数组或href 属性）或使用page.$$(selector) 和ElementHandle API 之类的东西。

  const rows = await page.evaluate(() => {
    return [...document.querySelectorAll(".td-block-span6")].map(elem => elem.innerText);
  });
  console.log(rows);

或者：

const rows = await page.$$(".td-block-span6");
for (const row of rows) {
 // process row as ElementHandle
}

【讨论】：

【解决方案2】：

如果您想要页面上的所有文本，这应该可以：

let text = await document.querySelector('body').innerText;

【讨论】：

document.querySelector('body').innerText; 不是异步的，因此将await 放在它前面是没有意义的。 OP 似乎想要.td-block-span6，而不是整个正文。