【日期选择】记一个后台系统日期无法选中的问题

一、问题场景

公司报销走一个古董后台系统。市场部每个月要把报销单录入系统，除了报销人、部门、金额这些字段，还有一个【费用发生日期】，规则是按发票上的日期选，且不能默认当天。

字段是个只读文本框，点一下弹出日历面板，再点日期格子选上。手工操作一切正常。后来单量上来，故用影刀搭了一个自动化流程：从 Excel 读报销单->打开录入页->填字段->选日期->提交。实操下来其他字段都正常，仅在选日期上会有一些问题。

二、遇到的问题

1、流程直到结束都不报错

2、但日期没有选上，输入框是空的

3、重跑多次，偶尔成功，大部分失败，结果不稳定

4、手动点没有任何问题

尝试过的办法：

1、换绝对路径 Xpath

2、按文本定位、加前置判断【等待元素出现】

发现问题：

1、日志显示元素确实出现了，但是点击还是落空。结论可以定位为元素捕获成功，可能是点击未生效

2、后来让流程在点击前停住，审查模式检查日期面板的DOM，发现面板上挂着一个过渡class，对应面板弹出时的入场动画，动画期间的 CSS 是：

pointer-events: none;

3、实际是面板弹出后不能立刻点击，中间有一个时间间隔。真人操作因为没那么快，所以使用正常

三、解决方案

在【等待元素出现】和【点击元素】当中，插入一个0.5秒的延时

为了确认根因就是动画，我做了个对照实验：把动画时长从 400ms 改成 0，然后跑最初那个失败的流程，不做任何修改，全部通过。证明问题与定位无关，就是点击落在了动画窗口内。

兜底：直接派发 click，绕开命中测试。

如果页面动画很长、或不确定要等多久，可以用「执行 JS 片段」直接对元素派发事件：

(() => {
const panel = document.querySelector('.dp-panel:not([hidden])');
const cell = [...panel.querySelectorAll('span[data-d]')].find((e) => e.getAttribute('data-d') === '2026-08-19');
cell.click();
})();

两种方式的区别：

四、最终效果

加上 0.5 秒延时后，流程连续跑 20 次，基本都成功，不再出现随机失败。整条报销单录入流程从手工逐单填写，变成批量自动录入，单张单据的处理时间从约 1 分钟降到可忽略，市场部不再需要专人录单。