如何解决Puppeteer中的「Node is either not clickable or not an HTMLElement」错误

针对你遇到的这个点击报错问题，我整理了几个实用的排查和解决方法，结合你的代码来逐一说明：

1. 等待元素完全可见且可交互 #

硬编码的waitForTimeout（比如你用的1500ms）并不稳定，建议替换为waitForSelector并指定元素可见、可点击的条件，确保元素完全渲染好再执行点击：

await page.goto('https://example.com/', { waitUntil: 'networkidle2' });
// 等待元素可见且启用（可点击）
await page.waitForSelector("input[id='year-2021']", { visible: true, enabled: true });
await page.click("input[id='year-2021']");

2. 确保元素在视口内 #

如果元素不在当前屏幕可见区域，Puppeteer的点击操作也会失败。可以先将元素滚动到视口再点击：

await page.goto('https://example.com/', { waitUntil: 'networkidle2' });
const targetElement = await page.waitForSelector("input[id='year-2021']", { visible: true });
// 滚动元素到视口
await targetElement.scrollIntoView();
await page.click("input[id='year-2021']");

3. 用鼠标模拟真实点击 #

有时候page.click()会因为元素的事件绑定问题失效，改用鼠标模拟用户点击元素中心位置，更接近真实操作：

await page.goto('https://example.com/', { waitUntil: 'networkidle2' });
const element = await page.waitForSelector("input[id='year-2021']", { visible: true });
const boundingBox = await element.boundingBox();
// 移动鼠标到元素中心
await page.mouse.move(
  boundingBox.x + boundingBox.width / 2,
  boundingBox.y + boundingBox.height / 2
);
// 执行点击
await page.mouse.click();

4. 直接在浏览器端触发点击事件 #

如果元素被弹窗、浮层遮挡，或者页面有特殊的交互限制，可以绕过Puppeteer的点击，直接在浏览器上下文执行元素的click()方法：

await page.goto('https://example.com/', { waitUntil: 'networkidle2' });
await page.waitForSelector("input[id='year-2021']");
// 直接在浏览器中触发点击
await page.evaluate(() => {
  document.querySelector("input[id='year-2021']").click();
});

注意：这个方法会跳过前端的一些交互校验，仅在其他方法失效时使用。

5. 检查元素是否在iframe内 #

如果目标元素位于iframe中，需要先切换到对应的iframe再操作：

await page.goto('https://example.com/', { waitUntil: 'networkidle2' });
// 根据iframe的名称或URL找到对应的frame
const targetFrame = page.frames().find(frame => frame.name() === 'your-iframe-name');
// 等待iframe内的元素
await targetFrame.waitForSelector("input[id='year-2021']", { visible: true });
await targetFrame.click("input[id='year-2021']");

如果你提供元素的检查截图，还可以进一步确认元素是否有隐藏属性（比如display: none、visibility: hidden）、是否是非HTMLElement节点等特殊情况，再针对性调整方案。

内容的提问来源于stack exchange，提问作者Coder's