使用Puppeteer调用page.evaluate返回document得到undefined如何解决

• Puppeteer的page.evaluate()方法仅支持返回可序列化的JSON类型值，浏览器环境中的document属于DOM宿主对象，存在大量循环引用、内置方法、浏览器私有引用等不可序列化内容，无法通过Puppeteer的进程间通信从浏览器环境传递到Node.js环境，因此直接返回document时拿到的结果就是undefined。

根据你的使用场景选择对应方案即可：

1. 仅需要获取document的特定属性 #

直接在page.evaluate回调内部取出需要的可序列化属性后再返回，示例代码：

const docInfo = await page.evaluate(() => {
  // 只返回你需要的可序列化字段
  return {
    title: document.title,
    url: document.location.href,
    charset: document.charset
  }
})
console.log(docInfo)

2. 需要操作DOM元素 #

把DOM操作逻辑直接写在page.evaluate回调内部，不需要把DOM对象传到Node.js侧，比如要获取页面内某元素的文本：

const elementText = await page.evaluate(() => {
  const targetEl = document.querySelector('.target-class')
  return targetEl ? targetEl.innerText : ''
})
console.log(elementText)

3. 需要在Node.js侧处理完整DOM结构 #

先在浏览器环境把完整DOM序列化为HTML字符串，传递到Node.js后用cheerio等DOM解析库加载处理，示例代码：

// 首先安装cheerio：npm install cheerio
const cheerio = require('cheerio')

const html = await page.evaluate(() => {
  return document.documentElement.outerHTML
})
// 加载HTML后即可在Node侧用类jQuery的语法操作DOM
const $ = cheerio.load(html)
console.log($('title').text())

内容的提问来源于stack exchange，提问作者Timm Nicolaizik