Puppeteer分页爬虫技巧与导航处理

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Puppeteer分页爬虫：动态分页与导航处理技巧》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

本文详解如何用 Puppeteer 稳健实现逐页翻页爬取，解决因 URL 哈希跳转、异步导航未完成导致的重复抓取、页面错乱等问题，并提供可直接运行的修复代码与最佳实践。

在使用 Puppeteer 进行分页爬取时，一个常见误区是依赖 page.waitForNavigation() 监听“URL 变化”来判断翻页完成——但许多现代网站（如 clerk.house.gov）采用前端路由或哈希跳转（如 ?page=2#），导致 URL 未真正刷新，或导航事件未被正确捕获，从而引发多次触发、状态错乱甚至超时崩溃。

你原始代码中的核心问题有三处：

1. 错误调用 await nextButton：nextButton 是一个 ElementHandle，不能 await，更不能传入 click() 作为选择器；
2. waitForNavigation() 失效：目标页通过 JS 跳转或 pushState 更新 URL，不触发完整导航事件；
3. 未处理末页逻辑：当“Next”按钮消失时，当前页（即最后一页）的数据未被抓取。

✅ 正确做法是：先提取当前页码 → 点击按钮 → 主动等待目标页 URL 确认加载完成。以下是优化后的完整实现：

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 720 });

  // 访问起始页
  await page.goto('https://clerk.house.gov/Votes', { waitUntil: 'networkidle2' });

  let currentPage = 1;
  const maxPages = 10; // 建议设置安全上限，防无限循环

  while (currentPage <= maxPages) {
    console.log(`? Processing page ${currentPage}:`, page.url());

    // ✅ 在此处插入你的数据提取逻辑（例如：抓取投票列表、日期、结果等）
    // const votes = await page.$$eval('.vote-item', els => els.map(el => el.textContent.trim()));
    // console.log(`Found ${votes.length} votes on page ${currentPage}`);

    // 查找 Next 按钮（更鲁棒的选择器）
    const nextButton = await page.$('a[aria-label="Next"] span.fa');

    // 如果按钮不存在，说明已是最后一页 —— 但当前页仍需处理！
    if (!nextButton) {
      console.log(`✅ Reached last page (${currentPage}). Exiting.`);
      break;
    }

    // 提取当前页码（兼容 ?page=2 和 ?page=2# 形式）
    const url = page.url();
    const pageNumberMatch = url.match(/page=(\d+)/);
    const expectedNextPage = pageNumberMatch ? parseInt(pageNumberMatch[1], 10) + 1 : 2;

    // 执行点击
    await nextButton.click();

    // ✅ 关键修复：不依赖 waitForNavigation，而是等待新页面 URL 出现
    await page.waitForFunction(
      (targetPage) => window.location.href.includes(`?page=${targetPage}`),
      {}, 
      expectedNextPage
    );

    // 可选：等待关键元素出现，确保 DOM 渲染完成
    await page.waitForSelector('.vote-list', { timeout: 10000 }).catch(() => {
      console.warn(`⚠️  Timeout waiting for vote list on page ${expectedNextPage}`);
    });

    currentPage = expectedNextPage;
  }

  console.log('? Scraping completed.');
  await browser.close();
})();

? 关键注意事项：

• 永远先处理当前页再翻页：确保每轮循环开头即执行数据提取，避免漏掉第一页或最后一页；
• 避免 waitForNavigation() 在 SPA 场景中滥用：对基于 history.pushState 或锚点跳转的站点，应改用 page.waitForFunction() 或 page.waitForURL() 配合正则匹配；
• 添加超时与容错：例如 waitForSelector(..., { timeout: 10000 }) 防止卡死；对无响应页可 break 或重试；
• 设置最大页数限制：防止因页面逻辑异常导致无限循环；
• 启用 networkidle2：在 goto() 时使用，确保资源加载基本完成后再开始操作。

通过以上改进，你的 Puppeteer 分页脚本将稳定、准确、可维护地遍历所有有效页面，彻底规避重复抓取与导航失序问题。

理论要掌握，实操不能落！以上关于《Puppeteer分页爬虫技巧与导航处理》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！