使用Puppeteer无法点击温德姆酒店的Available Hotels复选框

针对你遇到的无法点击复选框的问题，核心原因通常是该网站的复选框采用了视觉模拟设计——实际交互逻辑绑定在关联的<label>元素而非<input>本身，或是元素未完全加载到可交互状态。以下是几种可行的解决方案：

方案1：点击关联的Label元素 #

多数现代网站的复选框会将点击事件绑定在其父级<label>上，直接点击label能确保触发正确的交互：

// 等待label元素可见且可交互，然后执行点击
await page.waitForSelector('label[for="chk-show-avail"]', { visible: true, timeout: 10000 });
await page.click('label[for="chk-show-avail"]');

方案2：在页面上下文直接操作DOM #

如果元素被遮挡或Puppeteer的点击机制失效，可通过page.evaluate在浏览器原生上下文直接触发点击及状态同步：

await page.waitForSelector('#chk-show-avail', { visible: true });
await page.evaluate(() => {
  const checkbox = document.getElementById('chk-show-avail');
  if (checkbox && !checkbox.disabled) {
    checkbox.click();
    // 手动触发change事件，确保网站状态同步
    checkbox.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

方案3：强制点击（仅作备用） #

若元素被页面元素轻微遮挡，可使用force选项强制触发点击：

try {
  await page.waitForSelector('#chk-show-avail', { visible: true, timeout: 15000 });
  await page.click('#chk-show-avail', { force: true });
  await page.waitForTimeout(2000); // 等待页面响应筛选结果
} catch (error) {
  console.error('点击复选框失败:', error);
}

修改后的核心代码片段 #

替换你原代码中点击复选框的部分：

// ------------------------------------------ Re-directed to Results page ----------------------------------------

// 点击 "Available Hotels" 复选框
try {
  // 优先尝试点击关联label
  await page.waitForSelector('label[for="chk-show-avail"]', { visible: true, timeout: 10000 });
  await page.click('label[for="chk-show-avail"]');
  console.log('成功点击Available Hotels复选框');
  await page.waitForTimeout(3000);
} catch (labelError) {
  console.log('尝试点击label失败，改用直接操作input');
  // 备用方案：直接操作input元素
  await page.waitForSelector('#chk-show-avail', { visible: true, timeout: 10000 });
  await page.evaluate(() => {
    const checkbox = document.getElementById('chk-show-avail');
    if (checkbox) {
      checkbox.checked = !checkbox.checked;
      checkbox.dispatchEvent(new Event('change', { bubbles: true }));
    }
  });
} finally {
  await browser?.close();
}

额外注意事项 #

• 尽量避免使用固定时长的waitForTimeout，优先用waitForNavigation或waitForSelector等待页面状态变化
• 检查页面是否有Cookie提示、弹窗等遮罩层，如有需先处理这些元素再点击目标复选框

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