【日期选择】后台系统日期点不中？排查半天，最后发现是动画在捣乱

一、问题场景

公司内部有一个后台管理系统，需要自动录入一些业务数据，其中有一个“发生日期”字段。这个字段是一个只读文本框，必须点击之后弹出日历面板，再在面板里点选日期格子才能填上。其他字段（输入框、下拉框）用影刀都很顺利，唯独这个日期一直出问题。

二、遇到的问题

最开始用常规方法：捕获日期格子 → 点击元素。元素预览的时候高亮完全正常，定位没有问题。但运行的时候流程不报错，一路绿灯走完，结果一看——日期根本没选上，输入框还是空的。

重跑了很多次，偶尔成功，大部分失败。手动去点完全没问题。后来换了绝对路径XPath、按文本定位、加“等待元素出现”，全都试了一遍，日志显示元素确实出现了，紧接着点击还是落空。

三、解决方案

让流程在点击前停住，用F12检查日期面板的DOM结构，发现问题出在面板弹出的入场动画上。面板上挂着一个过渡class，动画期间对应的CSS设置了 pointer-events: none，也就是说面板弹出后大约0.4秒内根本不接收鼠标事件。真人从看到面板到移动鼠标点下去，时间远超动画时长，所以手动操作从来没遇到过这个问题；但影刀在捕获到元素后立刻点击，正好落在动画窗口内，点击就落空了。时好时坏是因为机器状态不同，点击落地的时间点有快有慢。

解法很简单：在“等待元素出现”之后、“点击元素”之前，插入一个0.5秒的延时。 动画0.4秒，留0.1秒余量。指令层面一行改动就解决了。

为了确认根因就是动画，我做了个对照实验：我在浏览器 F12 调试面板，临时把该面板的 transition 动画时长修改为 0，做对照测试；跑原来失败的流程，不改动任何影刀指令，全部执行成功，由此确认根因是入场动画导致点击落空。

关键代码片段（排查时看的 CSS）

.date-panel {
  opacity: 0;
  pointer-events: none;      /* 动画期间不接收鼠标事件 */
  transition: opacity .4s ease;
}
.date-panel.show {
  opacity: 1;
  pointer-events: auto;
}

F12 里选中日期面板，看 Computed 样式里的 pointer-events，动画期间是 none，动画结束后才变成 auto。影刀点击落空就是因为点在了 none 的时间窗口里。

如果延时方案不生效，备用 JS 方案

// 直接派发 click，绕过动画期间的鼠标事件限制
document.querySelector('.date-panel .day[data-date="2026-09-15"]').click();

或者输入框是 readonly 时：

document.querySelector('#dateInput').removeAttribute('readonly');

四、最终效果

加上0.5秒延时后，流程连续跑了20次，基本都成功，不再出现随机失败。整条录入流程从手工逐单操作变成了批量自动处理，稳定运行没有再翻车。

五、踩坑提醒

1. “等待元素出现” ≠ “等待动画结束”。 这是这次踩坑的核心。元素出现了，不代表它已经可以接收点击。如果页面上有弹窗、面板、下拉菜单这类带过渡动画的元素，点击前加一个小延时是最简单有效的兜底方案。

2. 不同系统的动画时长不一样。 我这次遇到的是0.4秒，但别的系统可能是0.3秒或0.6秒。建议先用F12看一下过渡class的CSS，确认动画时长，再设置略大于它的延时。

3. 如果动画很长或者不确定要等多久，也可以用「执行JS片段」直接对元素派发 click() 事件。方式不同：影刀的「点击元素」是真实鼠标事件，浏览器会做命中测试，受动画影响；element.click() 是直接向元素派发事件，不受动画影响。但个人建议优先试加延时，指令层面能解决的事，没必要引入JS选择器的维护成本。