Puppeteer登录失败求助：新手用page失败、page2成功如何解决？

嘿，刚接触JavaScript和Puppeteer就遇到这种问题太正常啦！我帮你捋捋为啥原来的代码会失败，以及怎么优化~

问题根源分析 #

你原来的代码里有个很容易踩的坑：在page.goto()之后直接加了await page.waitForNavigation()。

page.goto()方法默认会等待页面的load事件完成（也就是页面所有资源加载完毕），这时候页面已经稳定了。但你紧接着调用waitForNavigation()，它会一直等待下一次页面导航触发——可这时候页面根本没有新的跳转，代码就会卡在这一步，后面输入账号密码的操作根本没机会执行，自然登录失败。

而你新增page2的时候，相当于重新开启了一个干净的页面，避开了原页面中这个多余的等待逻辑，所以后续的操作能正常执行，登录也就成功了。

修正后的代码示例 #

给你调整了代码，去掉冗余的等待，同时加上更稳妥的元素等待逻辑：

const CREDS = require('./creds'); 
async function main() { 
  const puppeteer = require('puppeteer'); 
  const browser = await puppeteer.launch({headless: false}); 
  const page = await browser.newPage(); 
  await page.setViewport({width: 1200, height: 720}) 

  // goto本身会等待页面加载完成，不需要额外的waitForNavigation
  await page.goto('https://www.daum.net'); 

  // 先等待账号输入框出现，确保可以操作
  await page.waitForSelector('#id'); 
  await page.type('#id', CREDS.username); 

  // 同理，等待密码框出现再输入
  await page.waitForSelector('#pw'); 
  await page.type('#pw', CREDS.password); 

  // 如果点击登录按钮后会跳转页面，用Promise.all同时处理点击和等待导航
  // 替换成实际的登录按钮选择器
  const loginButton = await page.$('#loginBtn'); 
  await Promise.all([
    page.waitForNavigation({ waitUntil: 'networkidle2' }), // 等待跳转完成
    loginButton.click() // 触发登录跳转
  ]); 

  // 这里可以加登录后的验证或操作
  console.log('登录成功！');

  await browser.close();
}

// 捕获错误，方便调试
main().catch(err => console.error('执行出错：', err));

关键注意事项 #

• 不要滥用waitForNavigation：只有在明确会触发页面跳转的操作（比如点击登录按钮、提交表单）之前，才需要配合Promise.all()使用它，避免代码卡住。
• 操作元素前先等待元素出现：用waitForSelector()确保目标元素已经被页面渲染出来，防止出现“元素未找到”的错误。
• 处理竞态条件：点击跳转类操作时，一定要用Promise.all()同时执行点击和等待导航，否则可能出现点击完成了，但等待导航还没开始的情况，导致等待超时。

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