Puppeteer点击特定网站按钮异常，无法跳转至目标界面求助

问题详情 #

我尝试使用Puppeteer点击按钮进入新界面，在普通浏览器中点击该按钮可正常跳转，真实浏览器的Chrome控制台执行$('#DSOL_entryPage_generateBtn').click()也能正常工作，但使用Puppeteer的page.click()和page.evaluate()方法均无法进入下一界面。截图显示页面变为空白而非跳转至目标界面，且执行await page.waitForSelector('#inspirationInput')会一直挂起，说明从未进入目标页面。

相关代码：

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://myedit.online/en/audio-editor/ai-sound-effect-generator');
// await page.click('#DSOL_entryPage_generateBtn');
await page.evaluate(() => {
  document.querySelector('#DSOL_entryPage_generateBtn').click();
});
page.waitForTimeout(2000);
// await page.waitForSelector('#inspirationInput');
await page.screenshot({ path: 'asdf.png' });

await browser.close();

解决思路与方案 #

• 模拟真实浏览器环境：默认无头模式的Chrome和普通浏览器环境存在差异，启动时添加参数缩小差异：

  const browser = await puppeteer.launch({
    headless: "new", // 新版无头模式更贴近真实浏览器行为
    args: [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      "--disable-blink-features=AutomationControlled",
      "--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"
    ]
  });
  

• 确保按钮可交互后再点击：先等待按钮完全可见并可点击，避免过早操作：

  await page.waitForSelector('#DSOL_entryPage_generateBtn', { visible: true, timeout: 5000 });
  await page.click('#DSOL_entryPage_generateBtn');
  

• 正确处理页面跳转/路由变化：如果是单页应用，点击按钮后是路由切换而非页面刷新，用Promise.all同时处理点击和导航等待：

  await Promise.all([
    page.click('#DSOL_entryPage_generateBtn'),
    page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 10000 })
  ]);
  

• 规避反爬检测：部分网站会检测自动化工具，通过注入脚本隐藏自动化标识：

  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(navigator, 'webdriver', {
      get: () => undefined
    });
  });
  

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