Puppeteer正确遍历子元素获取文本内容

先说结论：在 Puppeteer 里遍历 DOM 子元素时拿到 undefined，十有八九是因为把 DOM 节点直接丢给了 evaluate() 返回。这种错误很典型，接下来具体聊聊怎么绕开这个坑，以及怎么写才更稳、更干净。

问题根源：DOM 节点不可序列化

陷入这个问题的操作通常是：在浏览器上下文中用 evaluate() 拿到某些节点（比如 x.children），然后想在 Node.js 环境里直接读它的 innerText。但问题是，DOM 元素本质上是一种“不可序列化的复杂对象”——内部有循环引用、方法、事件监听器这些东西，Puppeteer 跨进程传不过来。你拿到的往往不是节点本身，而是 null 或者 undefined。

所以正确的思路很直接：所有 DOM 处理老老实实在浏览器内完成，最后只把字符串、数字、数组这类可序列化的数据传出来。

推荐做法：使用 page.$$eval()

推荐的做法是用 page.$$eval(selector, pageFn)。这个 API 直接在页面内执行函数，自动传入所有选中的元素，然后让你返回 JSON 能序列化的结果。比如下面的例子：

const selector = "#slenkanti_dalis tr"; // 尽量不依赖疯狂嵌套的选择器
await page.waitForSelector(selector); // 关键一步：确保元素确实加载出来了
const tableData = await page.$$eval(selector, rows =>
  rows.map(row => {
    return Array.from(row.querySelectorAll("td"), cell =>
      cell.textContent.trim()
    );
  })
);
console.table(tableData);
// 输出大概是类似这样的结构：
// ┌─────────┬────────────┬───────────┐
// │ (index) │     0      │     1     │
// ├─────────┼────────────┼───────────┤
// │   0     │ '2024-03-15' │ '125.99 ' │
// │   1     │ '2024-02-28' │ '89.50 '  │
// └─────────┴────────────┴───────────┘

优化点一：选择器不要太绝对

像 #slenkanti_dalis > table > tbody > tr 这种东西，一个微调就崩了。换成 #slenkanti_dalis tr 这样宽松一点的选择器，容错性强得多。

优化点二：等元素就绪了再抓

表格如果是动态加载的，不用 waitForSelector() 大概率只能拿个空数组回来。

优化点三：用 textContent 而不是 innerText

textContent 是标准化属性，性能也更好；innerText 更接近“渲染后”的文本，但在某些旧环境下兼容性没那么好。日常抓数据，直接 textContent 最稳。

优化点四：变量声明别偷懒

原代码里 for (atsiskaitymas1 of ...) 这种写法缺少声明符，很容易不小心搞出全局变量。改写成 for (const row of rows) 就干净多了，ESLint 也能提醒。

额外提醒

• 不要混用 page.$$(...) 和 element.evaluate(...) 来处理列表——这样会增加 ElementHandle 的管理负担，容易出错，性能也差。批量读文本 $$eval 就是最合适的工具。
• 如果你需要点击元素或触发事件，那确实得用 element.click() 这些方法；但如果只是读文字，$$eval 一条龙搞定，最简洁靠谱。

掌握了这个模式，不光 undefined 的问题迎刃而解，写出来的脚本也更容易维护、调试。核心就是一句话：在浏览器里干完活儿，只把数据带出来。