使用Puppeteer登录并截图失败求助（Node.js/Discord.js）

问题描述 #

在Node.js的Discord.js环境中使用Puppeteer实现网页登录并截图时，遇到以下问题：

• Puppeteer能成功输入用户名和密码，但无法完成登录提交
• 第三次截图为空白，多数情况触发超时错误：TimeoutError: Navigation timeout of 30000 ms exceeded

相关代码 #

testblockscreenshot: async function (){
  debugger;
  console.log("Getting screenshot...");
  const browser = await puppeteer.launch({ headless: 'false' },{devtools: true});  
  const page = await browser.newPage();

  const options = {
    path: 'images/website.png',
    fullpage: true,
    omitBackground: true
  }  
  const options2 = {
    path: 'images/website2.png',
    fullpage: true,
    omitBackground: true
  } 
  const options3 = {
    path: 'images/website3.png',
    fullpage: true,
    omitBackground: true
  } 
  await page.goto('https://hyblockcapital.com/login');
  //await page.click('cookieConsent');
  await page.type('[name="Email"]', 'obfuscated');
  await page.type('[name="Password"]', 'obfuscated');
  console.log('Take Screenshot1...');
  await page.screenshot(options);
  console.log('Take Screenshot2...');
  await page.screenshot(options2);
   console.log("Wait for Nav...");
  await page.waitForSelector('[type="submit"]');
  const submitButton = await page.$('button[type="submit"]');
  if (submitButton) {
    const isButtonDisabled = await submitButton.evaluate((btn) => btn.disabled);
    if (!isButtonDisabled) {
      await submitButton.click();
      console.log("Lets attempt to click the button");
    } else {
      console.log('The submit button is disabled and cannot be clicked.');
    }
  } else {
    console.log('Submit button not found.');
  }
  await delay(120000); // Wait for 2000 milliseconds (2 min)
  await page.screenshot(options3);
  await page.goto('https://hyblockcapital.com/liquidationlevel');
  await page.screenshot(options4);
  await page.screenshot(options5);
  await browser.close();
}
};

目标网站登录按钮元素 #

<button type="submit" class="submit_btn width_100 m_t_35 btn_color btn_cls">Login</button>

需求：确认网站是否拦截无头自动化登录，并获取解决方法，实现成功登录及后续页面截图。

解决思路与方案 #

1. 反爬拦截规避 #

该网站大概率存在自动化检测，可通过以下方式绕过：

• 伪装浏览器指纹：启动浏览器时添加参数隐藏自动化特征，模拟真实用户环境：

const browser = await puppeteer.launch({
  headless: 'false',
  devtools: true,
  args: [
    '--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"'
  ]
});
// 清除navigator.webdriver标识
await page.evaluateOnNewDocument(() => {
  Object.defineProperty(navigator, 'webdriver', {
    get: () => undefined,
  });
});

• 处理Cookie授权：取消Cookie同意按钮的注释，修正选择器后先完成授权：

await page.waitForSelector('#cookieConsent'); // 根据实际元素调整选择器
await page.click('#cookieConsent');

2. 优化登录交互逻辑 #

• 精确定位按钮：用类名组合定位按钮，避免选择器歧义：

await page.waitForSelector('button.submit_btn.btn_color');
await page.click('button.submit_btn.btn_color');

• 直接提交表单：如果按钮点击无效，直接触发表单提交事件：

await page.evaluate(() => {
  document.querySelector('form').submit(); // 替换为实际登录表单的选择器
});

• 等待导航完成：替换固定延迟为等待页面跳转，避免超时：

// 点击按钮时并行等待导航
await Promise.all([
  page.click('button.submit_btn.btn_color'),
  page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 60000 })
]);

3. 修复代码错误 #

• 补充未定义的截图配置：代码中options4和options5未声明，需补充类似options的配置对象。
• 修正launch参数格式：原代码将配置拆分为两个对象，合并为一个：

const browser = await puppeteer.launch({
  headless: 'false',
  devtools: true,
  // 其他参数
});

4. 调试技巧 #

• 打开DevTools查看点击按钮后的网络请求，确认是否有请求被拦截或失败
• 在关键步骤前后添加截图和日志，追踪按钮状态、页面变化

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