Puppeteer中page.evaluate调用querySelectorAll返回undefined问题

问题根因 #

page.evaluate() 执行的代码虽然运行在浏览器环境，但返回值需要经过JSON序列化后才能传回Node.js运行时。DOM节点属于浏览器专属的宿主对象，不支持序列化，直接返回document.querySelectorAll()获取的DOM集合时，序列化结果就是undefined。
你在Chrome控制台直接执行对应语句时，所有操作都在浏览器环境内完成，不需要跨环境序列化传输，因此可以正常拿到DOM对象。

对应解决方案 #

根据你的实际需求选择对应实现方式：

• 仅需要获取页面按钮总数

const buttonCount = await page.evaluate(() => {
  return document.querySelectorAll("button").length
})
console.log(buttonCount)

• 需要获取按钮的文本、属性等可序列化信息

const buttonList = await page.evaluate(() => {
  return Array.from(document.querySelectorAll("button")).map(btn => ({
    text: btn.textContent.trim(),
    class: btn.className,
    id: btn.id,
    disabled: btn.disabled
  }))
})
console.log(buttonList)

• 需要在Node.js侧对按钮执行点击、输入等操作，直接使用框架提供的元素查询API即可，不需要走page.evaluate

// Puppeteer/Playwright通用写法
const buttons = await page.$$('button')
// 可直接调用元素句柄的操作方法，例如下方点击第一个按钮
await buttons[0].click()

内容的提问来源于stack exchange，提问作者Riccardo Perego