在 Puppeteer 中如何正确遍历子元素并获取文本内容

本文详解 Puppeteer 中遍历 DOM 子元素时返回 undefined 的根本原因，并提供安全、高效、可维护的解决方案，包括使用 $$eval 一次性提取结构化文本数据及最佳实践建议。

本文详解 puppeteer 中遍历 dom 子元素时返回 `undefined` 的根本原因，并提供安全、高效、可维护的解决方案，包括使用 `$$eval` 一次性提取结构化文本数据及最佳实践建议。

在 Puppeteer 中尝试通过 evaluate() 返回 DOM 节点（如 x.children）再在 Node.js 环境中访问其属性（如 innerText），是导致 undefined 的最常见错误。这是因为浏览器上下文中的 DOM 元素是不可序列化的复杂对象——它们包含循环引用、方法、事件监听器等，无法通过 page.evaluate() 安全跨进程传递。一旦你调用 Object.values(x.children)，返回的是一个包含原生 DOM 元素的类数组对象；当 Puppeteer 尝试将其序列化回 Node.js 端时，所有 DOM 节点均被丢弃，仅保留 null 或 undefined。

✅ 正确做法：所有 DOM 读取操作必须在浏览器上下文中完成，并只返回可序列化的纯数据（如字符串、数字、数组）。

推荐使用 page.$$eval(selector, pageFn) —— 它直接在页面内执行函数，自动传入匹配的所有元素，并要求你返回 JSON-serializable 结果：

const selector = "#slenkanti_dalis tr"; // 更健壮：避免过度依赖层级（如 `> table > tbody`）await page.waitForSelector(selector); // 关键！确保表格已渲染完成const tableData = await page.$$eval(selector, rows =>  rows.map(row => {    // 提取每行所有 <td> 的纯文本内容（自动处理空白、换行）    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 过于脆弱，若 HTML 结构微调（如插入 <tbody>、添加 wrapper div）即失效。改用语义化、宽松的选择器 #slenkanti_dalis tr 更鲁棒。
• 强制等待元素就绪：动态加载的表格需 waitForSelector()，否则可能抓取空数组。
• 用 textContent 而非 innerText：textContent 是标准、性能更好、兼容性更广的属性；innerText 是 CSS 渲染相关且非标准（部分旧环境不支持）。
• 声明变量用 const：原始代码 for (atsiskaitymas1 of ...) 缺少声明符，会意外创建全局变量，应改为 for (const row of rows)。ESLint 可自动捕获此类问题。

⚠️ 补充提醒：

• 不要混用 page.$$(...) + element.evaluate(...) 处理列表——这引入了冗余的 ElementHandle 生命周期管理，易出错且性能差；$$eval 是专为此类批量读取设计的更优 API。
• 若需点击或触发事件，请用 element.click() 等受信任方法；但仅读取文本时，$$eval 是最简洁可靠的选择。

掌握这一模式，不仅能解决 undefined 问题，更能写出更稳定、更易调试的 Puppeteer 数据抓取脚本。