Capybara填充text_field_tag未触发jQuery on_change，测试失败求助

你的问题核心是：Capybara的fill_in方法直接修改了输入框的值，但没有模拟真实用户输入后的失焦操作，而jQuery绑定的onchange事件只有在输入框失去焦点且值发生变化时才会触发，所以测试中标签不会同步更新。

以下是几种可行的解决方法：

方法1：手动触发change事件 #

填充值后，通过执行JS代码主动触发输入框的change事件：

it 'displays text in label_tag after input' do
  @page.fill_in('textFieldTag', with: '420')
  # 触发目标输入框的change事件
  @page.execute_script("document.querySelector('#textFieldTag').dispatchEvent(new Event('change'));")
  
  expect(@page).to have_content('420')
end

如果项目依赖jQuery，也可以用jQuery的触发方式：

@page.execute_script("$('input#textFieldTag').trigger('change');")

方法2：让输入框失去焦点 #

模拟真实用户输入后点击其他区域或按Tab键的操作，让输入框失焦，自然触发change事件：

方式A：按Tab键 #

it 'displays text in label_tag after input' do
  input_element = @page.find('#textFieldTag')
  input_element.fill_in(with: '420')
  # 按Tab键让输入框失去焦点
  input_element.send_keys(:tab)
  
  expect(@page).to have_content('420')
end

方式B：点击页面其他元素 #

如果页面上有其他可点击元素（比如按钮、空白区域），可以直接点击：

it 'displays text in label_tag after input' do
  @page.fill_in('textFieldTag', with: '420')
  # 点击页面空白处（需确保目标元素存在）
  @page.find('body').click
  
  expect(@page).to have_content('420')
end

方法3：改用input事件（前端代码调整） #

如果业务允许，把前端的onchange换成oninput事件——input事件会在输入框值变化时立即触发，不需要等待失焦。这样Capybara填充值时也会触发事件：

// 原代码
$('#textFieldTag').on('change', function() {
  $('#targetLabel').text($(this).val());
});

// 修改后
$('#textFieldTag').on('input', function() {
  $('#targetLabel').text($(this).val());
});

这种方法不需要修改测试代码，fill_in后标签会自动同步。

为什么sleep/wait_until没用？ #

因为问题根源是事件从未被触发，而不是元素加载延迟，所以等待再久也不会让标签更新，必须主动触发事件或触发失焦流程。

内容的提问来源于stack exchange，提问作者Peter T. Walker