使用page.evaluate()返回DOM元素时出现undefined错误的排查

这个错误的核心原因是你对page.evaluate()的工作机制理解有偏差——page.evaluate()无法直接返回DOM元素，因为浏览器上下文（前端）和Node.js上下文（你的脚本）之间只能传递JSON可序列化的数据，DOM节点属于浏览器专属的对象，无法被序列化传递，所以你从evaluate()里返回的listsButton会被转换成undefined，最终导致page.click(myElement)时传入了undefined，触发"No node found for selector: undefined"错误。

下面给你两种可行的修正方案：

方案1：在浏览器上下文直接执行点击操作 #

既然evaluate()是在浏览器环境里运行代码，那直接在里面调用元素的click()方法就好了，不需要把元素传回Node.js上下文：

const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
(async () => {
  await page.evaluate(() => {
    let overflowDiv = document.querySelectorAll('.overflow')[0];
    let buttonDiv = overflowDiv.children[1];
    let listsButton = buttonDiv.children[0];
    listsButton.click(); // 直接在浏览器里完成点击
  });
  // 后续操作...
})();

方案2：使用Puppeteer的ElementHandle API获取元素 #

如果你需要在Node.js上下文里对元素做更多操作，可以用page.$()、page.$$()这类API获取ElementHandle（Puppeteer封装的DOM元素引用），然后调用它的click()方法：

const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
(async () => {
  // 方式A：用复合选择器直接定位目标按钮
  await page.click('.overflow:nth-of-type(1) > div:nth-child(2) > :first-child');

  // 方式B：逐步获取元素句柄（更贴近你原来的逻辑）
  const overflowDiv = await page.$('.overflow');
  const buttonDiv = await overflowDiv.evaluateHandle(el => el.children[1]);
  const listsButton = await buttonDiv.evaluateHandle(el => el.children[0]);
  await listsButton.click();
})();

额外提醒：以后使用page.evaluate()时，记得它的返回值只能是JSON支持的类型（字符串、数字、普通对象/数组等），DOM元素、函数、Symbol这类特殊值都会被处理成undefined或者直接丢弃。

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