如何使用Puppeteer获取滚动加载表格中的全部指定类元素

这种滚动动态加载的表格确实让人头疼——DOM里只保留当前可见区域的元素，普通的$$查询自然只能拿到眼前的那部分。要获取所有相关元素，你得模拟用户滚动的行为，分批加载并收集元素，直到没有新元素出现为止。

下面是一个实用的实现方案，我自己处理类似场景时经常用：

async getAllElements() {
  const collectedElements = new Set(); // 用Set去重，避免重复收集同一元素
  let lastScrollHeight = 0;
  let currentScrollHeight;

  do {
    // 先获取当前可见的目标元素，提取唯一标识（比如文本内容或自定义属性）
    const visibleElements = await this._page.$$eval('td.class', elms => 
      elms.map(elm => elm.textContent.trim()) // 这里可以换成elm.dataset.id之类的唯一值
    );
    
    // 添加到Set里自动去重
    visibleElements.forEach(text => collectedElements.add(text));

    // 滚动到页面底部
    await this._page.evaluate(() => {
      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth' // 平滑滚动，更贴近真实用户行为
      });
    });

    // 等待新元素加载（可以根据页面加载速度调整时间，或者用waitForSelector）
    await this._page.waitForTimeout(1000);

    // 获取当前滚动高度，判断是否已经到底
    currentScrollHeight = await this._page.evaluate(() => document.body.scrollHeight);
    
    // 如果滚动高度不再变化，说明已经加载完所有元素
  } while (currentScrollHeight !== lastScrollHeight);

  // 最后把Set转成数组返回，或者如果需要元素对象的话可以调整收集逻辑
  return Array.from(collectedElements);
}

关键细节说明： #

• 去重处理：用Set存储元素的唯一标识（比如文本、ID），因为滚动时之前加载过的元素可能会重新进入DOM，避免重复收集。
• 滚动判断：通过对比每次滚动前后的document.body.scrollHeight来判断是否已经加载完所有内容——如果高度不变，说明没有新元素加载了。
• 等待加载：用waitForTimeout给页面留足够时间加载新元素，如果你的页面加载速度不稳定，也可以换成page.waitForSelector等待某个只在新元素加载后才出现的选择器，或者监听DOM变化事件。
• 自定义唯一标识：如果textContent可能重复，建议用元素的dataset.id或者其他唯一属性来标识，确保去重准确。

进阶优化： #

如果表格有总条数显示（比如页面上有“共100条”的提示），可以提前获取这个数值，然后在收集元素的数量达到该值时直接终止循环，不用一直滚动到底，效率更高。

比如：

// 先获取总条数
const totalCount = await this._page.$eval('.total-count', el => parseInt(el.textContent));

// 然后在循环里判断
while (collectedElements.size < totalCount && currentScrollHeight !== lastScrollHeight) {
  // ... 滚动、收集元素的逻辑
}

这样就能确保你拿到所有的目标元素啦！

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