Puppeteer如何逐步滚动页面并点击所有相同类名的列表元素

核心思路是循环滚动页面、增量识别未处理的目标元素、逐个滚动到可视区后点击，适配站点懒加载逻辑，避免重复操作。

实现代码 #

// 定义目标元素选择器
const TARGET_SELECTOR = 'li.social-details-social-counts__comments.social-details-social-counts__item.social-details-social-counts__item--with-social-proof';
// 存储已点击元素的唯一标识，避免重复点击
const clickedMarkers = new Set();
// 滚动步长，可根据页面高度调整
const SCROLL_STEP = 800;
// 最大滚动次数，避免无限循环
const MAX_SCROLL_COUNT = 20;
let scrollCount = 0;
let lastElementCount = 0;

while (scrollCount < MAX_SCROLL_COUNT) {
  // 1. 获取当前页面所有符合条件的元素
  const targetElements = await page.$$(TARGET_SELECTOR);

  // 连续2次获取的元素数量相同说明没有新内容加载，终止循环
  if (targetElements.length === lastElementCount) {
    break;
  }
  lastElementCount = targetElements.length;

  // 2. 逐个处理未点击的元素
  for (const element of targetElements) {
    // 获取元素的唯一标识，可替换为站点元素自带的data-id、id等属性，准确性更高
    const marker = await page.evaluate(el => `${el.textContent.trim()}_${el.offsetTop}`, element);
    if (clickedMarkers.has(marker)) {
      continue;
    }

    // 3. 滚动到元素可视区域
    await element.scrollIntoView({ behavior: 'smooth', block: 'center' });
    // 短延迟等待页面渲染完成，避免点击失效
    await page.waitForTimeout(300);

    // 4. 点击元素触发评论区加载
    await element.click();
    // 可替换为等待评论区元素出现的条件等待，稳定性更高，示例：await page.waitForSelector('.评论区类名', {timeout:3000})
    await page.waitForTimeout(1000);

    // 标记为已处理
    clickedMarkers.add(marker);
  }

  // 5. 滚动页面加载更多内容
  await page.evaluate(step => window.scrollBy(0, step), SCROLL_STEP);
  await page.waitForTimeout(1500);
  scrollCount++;
}

注意事项 #

• 若目标元素自带唯一标识属性，优先用该属性作为判断是否已处理的标记，避免重复点击
• 可根据站点反爬策略调整各步骤的延迟时长，或添加随机延迟逻辑降低被拦截概率
• 可根据页面实际懒加载触发逻辑调整滚动步长和最大滚动次数的阈值

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