Puppeteer执行click操作报错Node is either not visible or not an HTMLElement问询

核心问题原因 #

• page.click 操作默认会校验元素的可见性与可交互状态，而你使用的 page.$eval 仅要求元素存在于DOM树中，不需要可见，因此会出现输入框填充正常、点击报错的差异
• 多处异步操作未添加 await 关键字，执行顺序混乱，元素还未挂载到DOM或渲染可见就触发了点击
• 页面跳转后未等待动态内容渲染完成，目标元素还未生成就执行了匹配
• 使用的选择器层级过长、依赖节点顺序，稳定性差，DOM结构微小变动就会匹配失败
• waitForNavigation 调用时机错误，容易错过导航触发时机，导致后续操作提前执行

修复要点 #

1. 页面跳转时添加 waitUntil: 'networkidle2' 参数，等待页面网络空闲，确保动态内容加载完成
2. 所有异步操作（点击、等待元素、导航等待）都添加 await 关键字，保证执行顺序正确
3. 点击元素前先调用 page.waitForSelector 并传入 {visible: true} 配置，确认元素可见后再执行点击
4. 触发页面跳转的点击操作，和 waitForNavigation 用 Promise.all 包裹，避免错过导航事件
5. 替换过长的层级选择器为更稳定的类名选择器，降低DOM结构变动的影响

完整可运行代码 #

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false, slowMo: 100 });
    const page = await browser.newPage();
    // 等待页面网络空闲，保证动态内容加载完成
    await page.goto('https://www.eatthismuch.com/', { waitUntil: 'networkidle2' });

    // 点击素食预设标签：先等元素可见再点击
    await page.waitForSelector('.preset_selector_div li a', { visible: true });
    const vegeTags = await page.$$('.preset_selector_div li a');
    // 索引2对应第三个素食标签
    await vegeTags[2].click();

    // 点击"我不确定"按钮，同时等待导航完成，避免错过导航事件
    await Promise.all([
        page.waitForNavigation({ waitUntil: 'networkidle2' }),
        page.click('#not_sure_button')
    ]);

    // 点击目标单选标签，先等待元素可见
    await page.waitForSelector('#c56_goal > label:nth-child(1)', { visible: true });
    await page.click('#c56_goal > label:nth-child(1)');

    // 输入框填充操作逻辑不变
    await page.$eval('#height-secondary', el => el.value = '180');
    await page.$eval('#weight', el => el.value = '70');
    await page.$eval('#age', el => el.value = '22');

    // 测试用延迟关闭，可自行删除
    await page.waitForTimeout(3000);
    await browser.close();
})();

兜底方案 #

如果仍出现可见性校验报错，可以直接在浏览器上下文调用原生点击方法，绕过Puppeteer的交互校验：

await page.evaluate(() => {
    document.querySelector('#c56_goal > label:nth-child(1)').click();
});

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