使用Puppeteer爬取CanopyTax时遇导航超时问题求助

问题分析 #

你遇到的Navigation timeout问题，核心原因大概率是目标URL属于SPA（单页应用）的前端路由（带#），page.goto对这种路由的处理逻辑和普通页面不同，再加上登录后的等待逻辑不够严谨，导致导航完成的条件一直无法满足。

解决方案 #

1. 替换直接page.goto为前端路由跳转

因为目标URL是带#的前端路由，page.goto可能不会触发预期的导航行为，改用page.evaluate直接修改页面location.href，再等待关键元素加载完成：

// 替换原有的page.goto代码
await page.evaluate(() => {
  window.location.href = 'https://app.canopytax.com/#/billing/payments/collected';
});
// 等待支付页面的关键元素出现（替换为实际页面存在的选择器）
await page.waitForSelector('.payment-list-container', { timeout: 120000 });

2. 修复登录流程的等待逻辑

原代码中提交OTP后只用了sleep(4000)，这种固定延迟的方式非常不稳定，应该等待登录后的导航完成或首页标志性元素出现：

await page.click(OTP_NEXT_SELECTOR);
console.log('OTP Submitted');
// 等待登录后的页面导航完成
await page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 60000 });
// 或者等待登录后首页的标志性元素替代导航等待
// await page.waitForSelector('#dashboard-header', { timeout: 60000 });

3. 调整page.goto的等待参数（如果坚持使用goto）

如果一定要用page.goto，可以调整waitUntil条件和超时时间，因为networkidle2可能会因为页面持续的后台请求一直无法满足：

await page.goto(paymentUrl, { 
  waitUntil: 'domcontentloaded', // 改用DOM加载完成的条件，比networkidle2更宽松
  timeout: 120000 // 延长超时时间到2分钟
});

4. 排查网络请求阻塞

添加请求失败监听，查看是否有持续失败的请求导致networkidle2条件一直无法达成：

// 在创建page实例后添加监听
const page = await browser.newPage();
page.on('requestfailed', request => {
  console.error('请求失败:', request.url(), request.failure());
});

完整修改后的代码片段 #

const paymentUrl = 'https://app.canopytax.com/#/billing/payments/collected';
const browser = await puppeteer.launch({
  args: ['--no-sandbox', '--disable-setuid-sandbox'],
  ignoreHTTPSErrors: true,
});

const page = await browser.newPage();
// 添加请求失败监听排查问题
page.on('requestfailed', request => {
  console.error('请求失败:', request.url(), request.failure());
});
await page.setViewport({ width: 1366, height: 768 });
await page.setUserAgent(userAgent);
await page.goto(websiteUrl, { waitUntil: 'networkidle2' });

await page.click(USERNAME_SELECTOR);
await page.keyboard.type(C.username);
await page.click(PASSWORD_SELECTOR);
await page.keyboard.type(C.password);
await page.click(CTA_SELECTOR);
await page.waitForNavigation({ waitUntil: 'networkidle2' });

await page.click(OTP_NEXT_SELECTOR);
await page.waitForNetworkIdle();
// 替换固定sleep为等待OTP输入框，更可靠
// await page.waitForSelector(OTP_INPUT_SELECTOR);
await sleep(50000);
const otp = await this.getOtpFromEmail();
await page.click(OTP_INPUT_SELECTOR);
await page.keyboard.type(otp);
await page.click(OTP_NEXT_SELECTOR);
console.log('OTP Submitted');
// 等待登录后的导航完成
await page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 60000 });

// 改用前端路由跳转支付页面
await page.evaluate(() => {
  window.location.href = 'https://app.canopytax.com/#/billing/payments/collected';
});
// 等待支付页面关键元素加载
await page.waitForSelector('.payment-table', { timeout: 120000 });

await browser.close();

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