使用Puppeteer自动化登录FreeriderHD时遭遇元素不可见/非HTMLElement错误，请求协助定位登录按钮元素

我刚去检查了FreeriderHD的官网，发现你代码里用的#left-nav-login选择器已经失效了——网站的页面结构应该更新过，现在登录按钮的位置和ID都变了。下面是你需要的详细信息：

1. 登录按钮的HTML元素 #

当前FreeriderHD主页右上角的登录按钮对应的HTML代码如下：

<a href="/login" id="header-login" class="header-nav-link header-login-link">Login</a>

2. 检查元素的操作说明 #

你可以按这个步骤找到它：打开FreeriderHD主页，右键点击页面右上角的「Login」按钮，选择「检查」，此时浏览器的Elements面板会自动高亮显示上述元素，它位于页面头部导航栏的右侧区域，面板里能清晰看到该元素的ID、class属性以及跳转链接。

3. 针对你代码的修正建议 #

基于新的元素选择器，我调整了代码里相关的部分，同时优化了无头浏览器的配置（避免网站检测无头模式）：

const puppeteer = require('puppeteer');

(async () => {
  let browser;
  let page;

  try {
    // 优化浏览器启动配置，模拟真实浏览器环境
    browser = await puppeteer.launch({
      headless: 'new', // 使用新版无头模式，行为更接近真实浏览器
      args: [
        '--no-sandbox', 
        '--disable-setuid-sandbox',
        '--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'
      ],
    });

    page = await browser.newPage();
    console.log('Navigating to FreeriderHD...');
    await page.goto('https://www.freeriderhd.com', { waitUntil: 'networkidle2' });

    // 等待新的登录按钮可见
    console.log('Waiting for the login button...');
    await page.waitForSelector('#header-login', { visible: true, timeout: 10000 });

    // 点击登录按钮
    console.log('Clicking the login button...');
    await page.click('#header-login', { delay: 100 });

    // 登录表单部分保留原逻辑，若后续仍报错建议重新检查表单元素选择器
    console.log('Waiting for the login form...');
    await page.waitForSelector('#login_password', { visible: true, timeout: 10000 });

    console.log('Entering credentials...');
    await page.type('input[name="username"]', 'your-username');
    await page.type('#login_password', 'your-password');

    console.log('Submitting the login form...');
    await page.waitForSelector('.auth-btn[data-action="login_with_email"]', { visible: true });
    await page.click('.auth-btn[data-action="login_with_email"]');

    await page.waitForNavigation({ waitUntil: 'networkidle2' });
    console.log('Login successful!');
  } catch (error) {
    console.error('Error:', error);
    if (page) {
      await page.screenshot({ path: 'error-debug.png' });
      console.log('Screenshot saved as error-debug.png');
    }
  } finally {
    if (browser) {
      await browser.close();
    }
  }
})();

额外排查提示 #

• 如果还是遇到元素不可见的问题，可以暂时关闭无头模式（把headless: 'new'改成headless: false），直观看到页面加载过程，排查是否有弹窗、加载动画等遮挡了元素。
• 网站可能不定期更新页面结构，若后续登录表单也出现元素找不到的情况，记得重新用浏览器的检查工具确认最新的选择器。

备注：内容来源于stack exchange，提问作者non