如何用Capybara/Selenium操作react-day-picker Input？除设置值外有其他方法吗？

绝对有办法搞定这个！我之前在项目里也碰到过react-day-picker Input组件的这个痛点——直接输入MM/DD/YYYY格式文本确实不生效，不过除了强制设置值，还有更贴近用户真实操作的方案，也有高效的技巧，给你分享几种可行的方法：

1. 模拟真实用户的鼠标交互（推荐） #

这种方法完全模拟用户点击选择日期的流程，更符合E2E测试的初衷，能覆盖交互层面的场景：

• 第一步：点击Input组件，触发日期选择器弹窗
• 第二步：根据需求选择日期（今天、指定日期都可以）

示例代码（选择今天的日期） #

# 定位输入框并点击打开选择器
find('input[placeholder="Select date"]').click
# 选择带有"今日"标识的日期按钮（类名通常为rdp-day_today）
find('.rdp-day_today').click

示例代码（选择指定日期，比如2024年10月5日） #

# 打开日期选择器
find('input[placeholder="Select date"]').click

# 切换到目标年份（循环点击年份切换箭头，直到找到2024年）
until find('.rdp-month').text.include?('2024')
  find('.rdp-nav_button[aria-label="Next year"]').click
end

# 切换到目标月份（循环点击月份切换箭头，直到找到October）
until find('.rdp-month').text.include?('October')
  find('.rdp-nav_button[aria-label="Next month"]').click
end

# 选择5号日期
find('.rdp-day', text: '5').click

2. 通过JavaScript直接设置值并触发事件（高效） #

如果不需要模拟完整交互，追求测试速度，可以用JS直接设置输入框的值，同时触发React能识别的change事件（因为组件是受控的，单纯设置value不会同步状态）：

# 定位日期输入框
date_input = find('input[placeholder="Select date"]')

# 执行JS设置值并触发change事件
page.execute_script("
  const input = arguments[0];
  input.value = '10/05/2024';
  input.dispatchEvent(new Event('change', { bubbles: true }));
", date_input)

这个方法能快速让组件识别到输入的日期，无需打开选择器弹窗。

3. 直接调用React组件API（不推荐，依赖内部实现） #

如果你的测试环境能访问到React组件实例，也可以直接调用组件的状态设置方法，但这种方法依赖组件内部代码，一旦组件更新可能失效，所以仅作为备选方案。

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