使用Puppeteer爬取时无法返回元素对象的问题求助

核心原因 #

page.evaluate() 的回调函数运行在浏览器页面上下文，返回值必须是可序列化为JSON的类型才能传递到Node.js的Puppeteer上下文。DOM元素（包括NodeList、HTMLElement对象）是浏览器专属的复杂对象，无法直接被序列化，所以直接返回它们或包含它们的数组时，会被处理为undefined。你之前能正常返回tables.length，是因为数字属于基础可序列化类型。

解决方案 #

不要尝试返回DOM元素本身，而是在浏览器上下文里提取你需要的可序列化数据（比如文本、HTML字符串、属性值、结构化数据等）。

修改后的示例代码 #

比如要获取每个表格的HTML内容，可参考以下写法：

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(
    "https://results.birmingham2022.com/#/athletic-sports-entries/SWM/*"
  );

  // 等待表格加载完成（替代固定时长等待，更高效）
  await page.waitForSelector(
    "app-athletics-sports-entries > div > div > div > table",
    { timeout: 45000 }
  );
  console.log("等待结束。");

  console.log("查找表格并提取数据...");
  const tablesData = await page.evaluate(() => {
    const tables = document.querySelectorAll(
      "app-athletics-sports-entries > div > div > div > table"
    );
    // 将表格转为数组后，提取每个表格的innerHTML（可序列化字符串）
    return Array.from(tables).map(table => table.innerHTML);
  });
  console.log("找到的表格数量:", tablesData.length);
  // 可查看第一个表格的内容示例
  console.log("第一个表格HTML片段:", tablesData[0].slice(0, 200) + "...");

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

function sleep(ms) {
  return new Promise((resolve) => {
    console.log(`等待 ${ms / 1000} 秒...`);
    return setTimeout(resolve, ms);
  });
}

常见数据提取方式参考 #

• 提取表格文本内容：map(table => table.textContent.trim())
• 提取表格的class属性：map(table => table.className)
• 提取结构化的表格行/列数据：

return Array.from(tables).map(table => {
  const rows = Array.from(table.querySelectorAll("tr"));
  return rows.map(row => {
    const cells = Array.from(row.querySelectorAll("td, th"));
    return cells.map(cell => cell.textContent.trim());
  });
});

内容的提问来源于stack exchange，提问作者Trent Jones