使用Puppeteer page.evaluate提取表格数据为数组遇问题求排查

需求说明 #

需要提取HTML表格中所有带count_row类的<tr>元素数据，生成如下格式的数组：

[{Current: 757, Peak: 976, Name: "XXX"},{Current: 594, Peak: 684, Name: "XXX2"}]

原代码问题分析 #

原Puppeteer代码存在以下核心问题：

• 选择器逻辑错误：直接选取所有<td>元素，无法按行分组处理数据，导致后续提取的内容混乱。
• 数据提取逻辑错误：试图从全局<td>集合中按索引取值，忽略了每行<tr>的独立性，无法正确对应每行的Current、Peak和Name字段。
• 无效的条件判断：判断row.length >=200，但实际表格数据行数远小于该值，导致数据无法被添加到结果数组。
• 对象复用问题：仅创建一个record对象，无法为每行数据生成独立的对象实例。

修正后的完整代码 #

let scrape = async() => {
  try {
    const browser = await puppeteer.launch({});
    const context = await browser.createIncognitoBrowserContext();
    const page = await context.newPage();
    // 改用networkidle2确保页面数据完全加载
    await page.goto(`https://xxx/stats/`, {
      waitUntil: 'networkidle2'
    });

    const gameRecordsList = await page.evaluate(() => {
      const rows = Array.from(document.querySelectorAll('#detail table tbody tr.count_row'));
      return rows.map(row => {
        const tds = row.querySelectorAll('td');
        return {
          Current: parseInt(tds[0].querySelector('.current').innerText),
          Peak: parseInt(tds[1].querySelector('.current').innerText),
          Name: tds[3].querySelector('.nameLink').innerText
        };
      });
    });

    await browser.close();
    console.log(gameRecordsList);
  } catch (err) {
    // 修正错误输出逻辑
    console.error('抓取出错:', err);
    console.error('浏览器已关闭');
  }
};
scrape();

代码说明 #

1. 精准选择目标行：通过tr.count_row直接选中所有数据行，跳过表头和空行。
2. 逐行提取数据：遍历每一行，从该行的<td>中分别提取Current（第一个td内的span）、Peak（第二个td内的span）、Name（第四个td内的a标签）的文本内容，并转为数字类型（Current和Peak）。
3. 确保页面加载完成：将waitUntil改为networkidle2，避免因DOM加载完成但数据尚未渲染导致的抓取空值问题。
4. 修正错误处理：原代码中的error()函数未定义，替换为标准的console.error输出错误信息。

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