使用RSpec+Capybara测试Turbo确认弹窗时无法正常处理的问题

问题根源 #

你的测试代码存在两个核心问题：

1. 方法误用：Turbo的data-turbo-confirm触发的是浏览器原生confirm()确认框，而非alert()警告框，你误用了针对alert的accept_alert方法，导致无法匹配对应弹窗。
2. 时机错误：attach_file的块逻辑是触发文件选择对话框，而confirm弹窗是在文件上传完成、表单提交时才弹出的，之前的代码把弹窗处理逻辑包裹在文件选择的块里，时机完全不匹配。

解决方案 #

根据你的Turbo使用方式（原生confirm或自定义模态框），分两种情况处理：

情况1：使用Turbo默认的原生confirm对话框 #

直接用Capybara的accept_confirm方法包裹整个触发流程，确保弹窗触发时能被正确捕获：

it 'shows confirmation message and processes upload' do
  login_as user
  visit profile_path

  expect(page).not_to have_css('#Upload')

  # 用accept_confirm包裹触发文件上传及表单提交的操作
  accept_confirm("Are you sure to upload file?") do
    # 直接定位file_field，make_visible: true处理隐藏的输入框
    attach_file('file', Rails.root.join('spec/fixtures/files/sample.pdf'), make_visible: true)
  end

  # 等待表单提交完成后验证页面状态
  expect(page).not_to have_table
end

如果必须通过label触发文件选择（比如file_field完全隐藏），可以调整为：

it 'shows confirmation message and processes upload' do
  login_as user
  visit profile_path

  expect(page).not_to have_css('#Upload')

  accept_confirm("Are you sure to upload file?") do
    attach_file('file', Rails.root.join('spec/fixtures/files/sample.pdf')) do
      first(:label, text: 'Upload').click
    end
  end

  expect(page).not_to have_table
end

情况2：使用自定义Turbo Confirm模态框（非原生对话框） #

如果项目中替换了Turbo的默认confirm为自定义DOM模态框，需要通过定位模态框元素来完成确认操作：

it 'shows confirmation message and processes upload' do
  login_as user
  visit profile_path

  expect(page).not_to have_css('#Upload')

  # 上传文件触发自定义确认弹窗
  attach_file('file', Rails.root.join('spec/fixtures/files/sample.pdf'), make_visible: true)

  # 等待自定义模态框出现（根据实际文本或类名调整）
  expect(page).to have_content('Are you sure to upload file?')

  # 点击模态框中的确认按钮（根据实际DOM结构调整选择器）
  find('[data-turbo-confirm-accept]').click # 或 find('.turbo-confirm button', text: '确定').click

  expect(page).not_to have_table
end

关键注意事项 #

• 确保accept_confirm的文本和data-turbo-confirm的内容完全一致（大小写、空格都要匹配）。
• 如果测试仍不稳定，可通过using_wait_time延长等待时间，确保弹窗有足够时间加载：

  using_wait_time(10) do
    accept_confirm("Are you sure to upload file?") do
      attach_file('file', Rails.root.join('spec/fixtures/files/sample.pdf'), make_visible: true)
    end
  end
  

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