Rails 7+Capybara测试点击事件失效问题求助

问题背景 #

在开发Rails 7应用的功能测试中，遇到RSpec+Capybara点击事件无效的问题：page.find(".single-post-card").click能定位到元素，但点击后无法触发预期的模态框（.modal）显示，手动操作页面功能完全正常。测试环境为Ruby 3.2.2、Rails 7.0.5、Chrome 113，搭配selenium-webdriver、webdrivers、capybara、poltergeist，运行在M1 Mac上。

测试用例示例：

require "rails_helper"

RSpec.feature "Visit single post", :type => :feature do
  let(:user) { create(:user) }
  let(:post) { create(:post) }

  scenario "User goes to a single post from the home page", js: true do
    post
    visit root_path
    page.find(".single-post-card").click
    expect(page).to have_selector('body .modal')
    page.find('.interested a').click
    expect(page).to have_selector('#single-post-content p', text: post.content)
  end
end

报错信息：

Failure/Error: expect(page).to have_selector('body .modal')
  expected to find visible css "body .modal" but there were no matches. Also found "", which matched the selector but not all filters. 
# ./spec/features/posts/visit_single_post_spec.rb:11:in `block (2 levels) in <top (required)>'

解决方法 #

1. 弃用Poltergeist，改用Selenium+Chrome Headless #

Poltergeist基于已淘汰的PhantomJS，对Rails 7默认的Turbo等现代JS特性支持极差，这是多数点击失效问题的核心原因：

• 移除Gemfile中的poltergeist，执行bundle install
• 在spec/rails_helper.rb中配置适配M1 Mac的Selenium Chrome Headless驱动：

  Capybara.register_driver :selenium_chrome_headless do |app|
    options = Selenium::WebDriver::Chrome::Options.new
    options.add_argument('--headless=new')
    options.add_argument('--disable-gpu')
    options.add_argument('--no-sandbox')
    options.add_argument('--window-size=1920,1080')
    options.add_argument('--force-device-scale-factor=1') # 解决M1渲染偏移问题
    Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
  end
  Capybara.javascript_driver = :selenium_chrome_headless
  

2. 优化点击逻辑，确保元素可交互 #

Capybara的模拟点击可能因元素未完全加载或渲染偏移失效，可尝试以下调整：

• 先等待元素完全可见再点击：

  expect(page).to have_selector('.single-post-card', visible: true, wait: 5)
  page.find('.single-post-card').click
  

• 指定点击位置（规避M1 Mac上的渲染偏移）：

  page.find('.single-post-card').click(x: 5, y: 5) # 点击元素左上角区域
  

• 直接用JS触发点击（绕过Capybara的模拟层）：

  page.execute_script("document.querySelector('.single-post-card').click()")
  

3. 适配Rails 7的Turbo特性 #

Turbo会拦截页面交互，测试中需确保Turbo完成加载或导航：

• 延长Capybara默认等待时间（在rails_helper.rb中）：

  Capybara.default_max_wait_time = 10
  

• 点击后等待Turbo加载状态结束：

  page.find('.single-post-card').click
  expect(page).not_to have_css('turbo-progress-bar', visible: true, wait: 5)
  expect(page).to have_selector('body .modal')
  

4. 调试技巧 #

• 点击后截图查看页面实际状态：

  page.find('.single-post-card').click
  page.save_screenshot('after_click.png') # 截图保存至项目根目录
  

• 关闭headless模式，直接观察Chrome测试过程：临时去掉驱动配置中的--headless=new参数，运行测试时会弹出Chrome窗口，可查看控制台是否有JS报错。

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