如何使用 Puppeteer 稳健地实现分页爬取（Next Page）_网络技术

本文详解 puppeteer 分页爬取中常见的重复抓取、导航失效与 url 未更新问题，提供可落地的修复方案，包括 waitfortarget 替代 waitfornavigation、url 解析防重逻辑及末页兜底处理。

在使用 Puppeteer 实现分页爬取（如 https://clerk.house.gov/Votes）时，直接依赖 page.waitForNavigation() 常会失效——尤其当目标网站采用前端路由跳转（如 hash 变更 # 或 SPA 内部重定向）时，页面 URL 可能延迟更新或多次触发，导致日志中出现大量重复 URL（如 ?page=2#、?page=2# 多次打印），甚至抛出 waitForNavigation timeout 错误。

根本原因在于：page.waitForNavigation() 仅监听 load/domcontentloaded 等导航事件，但若页面通过 history.pushState() 或锚点跳转（#）变更视图而未真正发起新请求，该方法将无法准确捕获“新页就绪”状态。

✅ 推荐解决方案：用 browser.waitForTarget() 精确等待目标 URL 变更

以下为修复后的完整分页逻辑（已适配 Clerk House 网站结构）：

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 currentPage = 1;
  const maxPages = 100; // 建议设置安全上限，防止无限循环

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

    // ✅ 步骤1：提取当前页码（兼容 ?page=1 和无参首页）
    const url = page.url();
    const currentNumber = url.includes('?page=')
      ? parseInt(url.match(/page=(\d+)/)[1], 10)
      : 1;

    // ✅ 步骤2：定位并点击“Next”按钮（更鲁棒的选择器）
    const nextButton = await page.$('a[aria-label="Next"]');
    if (!nextButton) {
      console.log('✅ No more pages. Reached the last page.');
      break;
    }

    // ✅ 步骤3：执行点击，并等待新页面 Target 加载完成
    await nextButton.click();

    try {
      // 等待浏览器创建新 Target，且其 URL 匹配预期页码（+1）
      await browser.waitForTarget(
        target => target.url().endsWith(`?page=${currentNumber + 1}`),
        { timeout: 15000 }
      );

      // ✅ 步骤4：显式切换到新页面上下文（重要！避免操作旧 page 实例）
      const targets = browser.targets();
      const newTarget = targets.find(t => t.url().endsWith(`?page=${currentNumber + 1}`));
      const newPage = await newTarget?.page();
      if (newPage) {
        await newPage.bringToFront();
        // 更新 page 引用，确保后续操作在最新页面执行
        page = newPage;
      } else {
        throw new Error('Failed to get new page instance');
      }

      currentPage = currentNumber + 1;

      // ⚠️ 此处插入你的数据提取逻辑（例如：抓取投票列表）
      // const votes = await page.$$eval('.vote-item', els => els.map(e => e.textContent.trim()));
      // console.log(`Fetched ${votes.length} votes on page ${currentPage}`);

    } catch (err) {
      console.error(`❌ Failed to navigate to page ${currentNumber + 1}:`, err.message);
      break;
    }
  }

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

? 关键改进说明：

精准等待机制：browser.waitForTarget() 直接监听浏览器级 Target 创建，不受前端路由干扰，比 page.waitForNavigation() 更可靠；
页码动态解析：从当前 URL 提取数字页码，避免硬编码或状态错乱；
显式页面上下文切换：通过 target.page() 获取新页面实例并赋值给 page，防止后续操作仍在旧 DOM 上执行（这是原代码重复打印的核心原因之一）；
末页兜底保护：检查 nextButton 是否存在，而非仅依赖 aria-label="Next" 元素；同时加入 maxPages 安全阈值；
增强健壮性：添加 waitUntil: 'networkidle2' 启动加载，使用 try/catch 捕获导航异常。

? 额外建议：

若目标站点支持 API（如 Clerk House 提供 /Votes/Export），优先调用 JSON 接口，比渲染页爬取更高效稳定；
对高频请求添加 await page.waitForTimeout(1000) 防封；
使用 page.on('response', ...) 监听关键资源响应，辅助判断页面加载完成。

遵循以上模式，即可彻底解决 Puppeteer 分页中“一页变多页”“导航卡死”“URL 滞后”等典型问题，构建高可用的自动化采集流程。

# js # 前端 # json # go # 编码 # 浏览器 # ai # 路由 # gate # try # catch # 接口 # 事件 # dom # history # https # 自动化 # 分页 # 加载 # 跳转 # 新页面 # 末页 # 这是 # 不受 # 原因之一 # 而非 # 首页

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】