元素定位点错目标：包含匹配、祖先节点与隐藏副本

自动化脚本最容易被误判的一类故障是"点了没反应"或"点开了别的页面"。日志里事件确实派发了，坐标确实落在元素上，但落地页不是预期的那个。多数情况下不是前端拦了点击，而是脚本从一开始就选中了错误的节点。下面三种成因在真实页面里反复出现，每一种都有可观测的判据。

一、包含匹配会跨卡片污染

按文案找按钮时常用这种写法：

const hit = [...document.querySelectorAll('.cardItem')]
  .find(c => c.innerText.includes('DevSpace'));
hit.querySelector('button').click();

问题在于 innerText 返回的是整张卡片折叠后的全部文本——标题、描述、标签、按钮文案都在里面。当多张卡片共享相同的描述或按钮文案（例如每张卡都有「去完成」），而目标字符串恰好出现在某张无关卡片的描述里，find 返回的是文档顺序里第一个匹配，不是想点的那个。

实测：一个任务列表有 12 张卡，其中 3 张描述含目标关键字，find 命中的是索引 0 的卡片，点击后跳到了完全无关的认证页。

修正办法是把匹配范围收缩到语义字段，并用精确相等代替模糊包含：

const hit = [...document.querySelectorAll('.cardItem')]
  .find(c => (c.querySelector('.title')?.innerText || '').trim() === '每日体验 AI DevSpace');

判据很直接：打印命中的卡片标题，与期望值做等价比较。只要用了 includes，这一步就不能省。

二、祖先节点被当成目标

用 querySelectorAll('*') 配合文本匹配时，最先命中的往往是外层容器：卡片、表格行，甚至 body。给容器 click() 不一定会触发内部按钮绑定的处理器，表现就是"点了没反应"。

区分容器与叶子节点看两个字段：

• children.length：大于 0 的多半是容器；
• className：DIV.cardBox、DIV.cardItem、DIV.ellipsisBox 是布局层，BUTTON.tiny-button、SPAN.title、A.btn 才是可交互层。

同一次查找里出现的候选列表通常长这样：

DIV.card-actions        ← 容器
A.btn.btn-ghost         ← 真正的可点元素
DIV.card-actions
A.btn.btn-ghost

正确做法是从命中的容器里再取一次具体元素，并且必须过滤不可见节点：

const btn = [...hit.querySelectorAll('button,a')]
  .filter(e => e.getBoundingClientRect().width > 0)[0];

三、同名元素里有一个是隐藏副本

响应式布局会同时渲染两套 DOM，其中一套宽高为 0。querySelectorAll('.status-btn')[0] 拿到的可能是隐藏那套，click() 执行成功、无异常、无请求，页面纹丝不动。

const b = [...document.querySelectorAll('.status-btn')]
  .filter(e => e.getBoundingClientRect().width > 0)[0];

这条过滤应该成为所有选择器的默认动作，而不是出问题之后才补。

四、点击前必须做的两件事

坐标现算并回验命中对象。 不要用截图目测值，也不要用缓存的坐标：

const r = b.getBoundingClientRect();
const cx = Math.round(r.x + r.width / 2);
const cy = Math.round(r.y + r.height / 2);
const at = document.elementFromPoint(cx, cy);

at 必须是目标本身或目标的后代。如果 at 是下拉菜单项、遮罩层、提示条，说明目标被盖住了，先处理遮挡再点——这种情况下事件"落到了元素上"和"点击生效"之间隔着一个覆盖层。

点击后回读状态。 表单类按钮通常有前置条件：复选框没勾时按钮是禁用态（button.disabled === true，或链接带特定后缀类名）。提交前回读一次，别盲点。

五、一个可复用的定位夹具

function pick(sel, text, { exact = true } = {}) {
  const norm = s => (s || '').replace(/\s+/g, ' ').trim();
  return [...document.querySelectorAll(sel)]
    .filter(e => e.getBoundingClientRect().width > 0)
    .find(e => exact ? norm(e.innerText) === text : norm(e.innerText).includes(text));
}

includes 只在确实需要模糊匹配时使用，且拿到结果后必须再向下收缩到叶子节点、向上做 elementFromPoint 回验。把"选中了什么"打印出来，比事后猜"为什么没生效"成本低得多。