如何在Capybara+Rspec测试中模拟回车或点击外区域提交Rails+React表单

解决方案 #

你遇到的核心问题是 React 的合成事件机制和 Capybara 原生方法的兼容性问题：React 依赖自带的合成事件体系感知输入变化、键盘操作和失焦行为，而你之前用的set、send_keys等方法大多不会正确触发 React 需要的冒泡事件，导致 React 侧根本感知不到操作，自然不会触发提交逻辑。

下面是经过验证的稳定方案：

1. 触发回车自动提交

先手动触发input事件同步输入值到 React 状态，再触发回车的键盘事件：

fill_in "name", with: "你要输入的内容"
page.execute_script <<~JS
  const targetInput = document.querySelector('.class'); // 换成你实际的输入框选择器
  // 触发input事件让React同步输入值
  targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  // 触发回车的keydown事件，和你React代码监听的事件类型保持一致即可
  targetInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
JS

2. 触发失焦自动提交

直接主动触发输入框的blur事件即可，比点击其他区域更稳定：

fill_in "name", with: "你要输入的内容"
page.execute_script <<~JS
  const targetInput = document.querySelector('.class');
  targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  targetInput.blur();
JS

注意事项

• 如果你的自动提交逻辑加了防抖，需要在操作后加等待逻辑，比如用Capybara的内置匹配器expect(page).to have_content('保存成功')等待请求完成，不要立刻断言。
• 不要用native.send_keys类的方法，这类方法依赖具体的测试驱动实现，对React合成事件的兼容性极差，直接通过JS触发事件是全驱动兼容的方案。

内容的提问来源于stack exchange，提问作者raphael-allard