Puppeteer翻页爬取重复处理页面问题求助

问题分析 #

你的脚本出现重复处理page2、page3以及URL带#的情况，核心原因有几个：

1. 选择了分页按钮的子元素<span>作为点击目标，点击后只会触发锚点跳转（URL末尾加#），而非真正的分页请求
2. 存在无意义的await nextButton;语句
3. 调用ElementHandle.click()时错误传入了选择器参数，导致点击逻辑异常
4. 循环逻辑中，点击后未正确等待页面完成导航就进入下一次循环，引发重复处理

修复后的代码 #

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();

  // 初始页面跳转，确保资源加载完成
  await page.goto('https://clerk.house.gov/Votes', { waitUntil: 'networkidle2' });

  let hasNextPage = true;

  while (hasNextPage) {
    // 直接选择分页按钮的a标签，而非子元素span
    const nextButton = await page.waitForSelector('a[aria-label="Next"]', { timeout: 5000 }).catch(() => null);
    
    if (nextButton) {
      // 处理当前页面（确保在点击下一页前执行）
      console.log('Processing page:', page.url());
      // 这里添加你的数据提取逻辑

      // 同时等待点击操作和页面导航完成，避免逻辑混乱
      await Promise.all([
        page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 10000 }),
        nextButton.click()
      ]);
    } else {
      hasNextPage = false;
      console.log('No more pages to process');
    }
  }

  await browser.close();
})();

关键修改说明 #

• 选择器调整：直接定位分页按钮的<a>标签，确保点击触发真正的分页请求，避免锚点跳转
• 移除冗余代码：删掉无意义的await nextButton;语句
• 正确处理点击与导航：使用Promise.all()同时等待点击操作和页面导航，确保页面完全加载后再进入下一次循环
• 增强等待稳定性：给page.goto()和page.waitForNavigation()添加waitUntil: 'networkidle2'选项，确保页面资源加载完成后再执行后续操作

原报错解释 #

你遇到的ElementHandle.js报错，是因为错误地给ElementHandle.click()传入了选择器参数，该方法不需要额外参数，直接调用即可触发点击操作。

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