使用Puppeteer自动登录时waitForNavigation页面加载后仍挂起

这个坑我之前踩过好几次，你的代码里有几个关键问题导致了挂起，咱们一步步来修复：

1. 必须给page.click()加上await #

你的代码里page.click('[type=submit]')没有用await，这会导致点击操作还没完成，程序就提前进入了waitForNavigation的等待状态——相当于你还没触发跳转，就开始等页面跳转，自然会一直挂着。

修改成：

await page.click('[type=submit]');

2. 用Promise.all()合并点击和导航等待（更可靠） #

有时候点击后跳转触发的时机非常快，分开写还是会有竞态条件。Puppeteer官方推荐把点击和导航等待放在同一个Promise.all里，确保同时监听这两个操作，彻底避免时序问题：

await Promise.all([
  page.click('[type=submit]'),
  page.waitForNavigation({ waitUntil: 'networkidle2' })
]);

这里把waitUntil从load换成networkidle2是因为：load只等待页面基本资源加载完成，但很多登录后的页面会有异步请求（比如加载用户信息），networkidle2会等待网络连接数降到2个以下，更符合实际登录完成的状态。

3. 排查是否是单页应用（SPA）跳转 #

如果目标网站是单页应用，登录后可能只是前端路由切换，没有真正的浏览器页面刷新，这时候waitForNavigation会一直挂着，因为根本没有触发浏览器的导航事件。这种情况应该换成等待登录后才会出现的元素：

await page.click('[type=submit]');
await page.waitForSelector('#user-avatar'); // 替换成你登录后能看到的元素选择器

4. 其他辅助排查点 #

• 先确保提交按钮能被正确定位：可以在点击前先等待元素出现，避免选择器错误导致没触发点击

  await page.waitForSelector('[type=submit]'); // 确保按钮加载完成
  await page.click('[type=submit]');
  

• 临时关闭无头模式，直观查看页面状态：在puppeteer.launch()里加{ headless: false }，看看有没有验证码、弹窗拦截了登录请求

修正后的完整脚本 #

const puppeteer = require('puppeteer');
async function logIn(userName, password) {
  const browser = await puppeteer.launch({ headless: false }); // 先关闭无头模式，方便调试
  const page = await browser.newPage();
  await page.goto('https://foo.com');
  
  await page.type('[name="Email"]', userName);
  await page.type('[name="Pass"]', password);

  // 推荐的可靠写法
  await Promise.all([
    page.click('[type=submit]'),
    page.waitForNavigation({ waitUntil: 'networkidle2' })
  ]);

  // 如果是SPA，替换成下面的代码
  // await page.click('[type=submit]');
  // await page.waitForSelector('#logged-in-indicator');

  // 后续操作...
  // await browser.close();
}
logIn('user@domain.com', 'your-password');

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