Node.js/Puppeteer无法点击指定元素：焦点跳转至邻近输入框求助

可能的核心原因 #

• 目标元素的点击区域被输入框的事件冒泡/捕获逻辑干扰
• 元素pointer-events样式不稳定，导致实际点击位置偏移
• Puppeteer默认鼠标点击方式，受Angular动态渲染（ng-star-inserted标识）影响出现偏差

针对性解决方法 #

1. 基于坐标的精确点击 #

避免选择器歧义，直接点击元素中心位置：

const selector = 'div.show-menu-client.ng-star-inserted';
await page.waitForSelector(selector, { visible: true, timeout: 10000 });

// 获取元素边界框，计算中心坐标
const box = await page.$eval(selector, el => {
  const rect = el.getBoundingClientRect();
  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
});

// 模拟完整鼠标点击流程
await page.mouse.move(box.x, box.y);
await page.mouse.down();
await page.mouse.up();

2. 直接触发元素原生点击事件 #

绕过页面事件委托逻辑，直接调用元素原生click()：

const selector = 'div.show-menu-client.ng-star-inserted';
await page.waitForSelector(selector, { visible: true, timeout: 10000 });

// 在页面上下文直接执行点击
await page.evaluate(selector => {
  const element = document.querySelector(selector);
  if (element) element.click();
}, selector);

3. 等待Angular动态渲染稳定 #

针对带ng-star-inserted的Angular动态元素，先等待框架渲染完成：

// 等待Angular应用稳定（适配大部分Angular版本）
await page.waitForFunction(() => {
  return window.getAngularTestability?.()?.isStable() ?? true;
}, { timeout: 15000 });

const selector = 'div.show-menu-client.ng-star-inserted';
await page.waitForSelector(selector, { visible: true, timeout: 10000 });
// 强制点击（忽略元素表面的可点击状态限制）
await page.click(selector, { force: true });

4. 先聚焦目标元素再点击 #

强制将页面焦点切换到目标元素后执行点击：

const selector = 'div.show-menu-client.ng-star-inserted';
await page.waitForSelector(selector, { visible: true, timeout: 10000 });

// 先设置元素焦点
await page.evaluate(selector => {
  const element = document.querySelector(selector);
  if (element) element.focus();
}, selector);

await page.click(selector);

额外排查方向 #

• 检查目标元素的父级是否绑定了点击事件，导致事件冒泡到输入框
• 监听页面控制台输出排查异常：

  page.on('console', msg => console.log('Page log:', msg.text()));
  

• 若使用无头模式，添加启动参数--no-sandbox、--disable-setuid-sandbox排除环境限制

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