如何通过Selenium与Ant Design的Calendar日期选择器交互？

问题根因 #

你直接修改DOM元素value属性的方式只对原生静态输入框有效，Ant Design DatePicker是React框架实现的受控组件：

• 组件的真实值存储在React内部state中，DOM的value是由state同步渲染的
• 直接修改DOM的value不会触发React的状态更新，也不会触发组件绑定的change事件，所以框架侧的日期值根本没有被更新，自然HTML上的绑定属性也不会同步修改。

可行的解决方法 #

方法1：触发事件同步React状态 #

修改完value之后主动触发input和change事件，让React感知到值的修改，同步更新内部状态：

self.driver.execute_script("""
const input = document.querySelector('.ant-calendar-picker-input.ant-input');
input.readOnly = false;
input.value = '12-12-2021';
// 主动触发事件通知React更新状态
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
input.readOnly = true;
""")

方法2：模拟手动点选操作（兼容性最高） #

如果触发事件的方案因为项目框架配置问题不生效，可以直接模拟用户操作：先点击日期选择器唤起下拉面板，再定位到对应日期元素点击即可，完全绕开只读属性限制。

注意事项 #

• 日期格式要和项目中DatePicker配置的格式完全一致，否则组件会识别为无效值自动清空。
• 如果页面上有多个DatePicker，要替换选择器精准定位到目标输入框，避免选错元素。

内容的提问来源于stack exchange，提问作者I B