Puppeteer操作IHG酒店网站日历组件失败，报错Node不可点击或非元素

问题原因与修复方案 #

1. 先处理Cookie授权弹窗 #

多数网站加载后会弹出Cookie同意框，会遮挡元素或阻止交互，必须优先处理：

await page.goto("https://www.ihg.com/hotels/us/en/reservation", {waitUntil: "networkidle2"}); // 改用networkidle2确保资源加载完成

// 等待并点击Cookie同意按钮（选择器可根据页面实际调整）
try {
  await page.waitForSelector('button[data-testid="cookie-accept-all"]', {timeout: 5000});
  await page.click('button[data-testid="cookie-accept-all"]');
} catch (err) {
  console.log("未检测到Cookie弹窗，继续执行");
}

2. 调整元素等待与点击顺序 #

原代码中waitForSelector放在点击操作之后，逻辑错误，需先等待元素可见且可点击，再执行点击：

// 等待日历图标元素可见且可点击
await page.waitForSelector('#datePicker div.input-adjacent-icon.fa.fa-calendar', {visible: true, timeout: 10000});
// 若元素被轻微遮挡，使用force选项强制点击
await page.click('#datePicker div.input-adjacent-icon.fa.fa-calendar', {force: true});

3. 替换更稳定的选择器 #

原选择器稳定性不足，可尝试点击日期输入框本身（多数场景下点击输入框也能唤起日历）：

await page.waitForSelector('#datePicker input', {visible: true});
await page.click('#datePicker input');

4. 完整修复代码 #

const puppeteer = require('puppeteer')

async function start(){
    const browser = await puppeteer.launch({headless: false}); // 开启可视化模式方便调试
    const page = await browser.newPage();
    await page.setViewport({width: 1200, height: 800}); // 设置合适视口，避免响应式布局导致元素隐藏

    await page.goto("https://www.ihg.com/hotels/us/en/reservation", {waitUntil: "networkidle2"});

    // 处理Cookie弹窗
    try {
      await page.waitForSelector('button[data-testid="cookie-accept-all"]', {timeout: 5000});
      await page.click('button[data-testid="cookie-accept-all"]');
    } catch (err) {
      console.log("无Cookie弹窗，跳过");
    }

    // 等待并点击日历图标
    await page.waitForSelector('#datePicker div.input-adjacent-icon.fa.fa-calendar', {visible: true, timeout: 10000});
    await page.click('#datePicker div.input-adjacent-icon.fa.fa-calendar', {force: true});

    // 等待日历组件加载完成
    await page.waitForSelector('span.datepicker-field span.input-and-icon.brand-outline', {visible: true});

    // 可在此添加选择日期的后续逻辑
    // await page.click('div.datepicker-day:not(.datepicker-day-disabled)');

    // await browser.close(); // 调试阶段可注释关闭，方便查看页面状态
}

start();

关键说明 #

• 用networkidle2替代domcontentloaded：确保页面网络请求基本完成，避免元素未渲染。
• 开启headless: false：直观查看页面操作过程，排查元素遮挡或未加载问题。
• force: true选项：应对元素被轻微覆盖（如悬浮提示）导致的点击失效。
• 设置视口：避免移动端布局下元素隐藏或位置偏移。

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