Capybara/Selenium/Chrome：仅在调用 save_screenshot 时测试通过

Question

I'm in the process of migrating from Poltergeist to headless Chrome.

Gemfile:

group :test do
  # Capybara - Headless, JavaScript-executing browser for Selenium
  gem 'selenium-webdriver'  # Selenium webdriver (needed to use Chrome driver)
  gem 'webdrivers', '~> 4.0', require: false # Run Selenium tests more easily with automatic installation and updates for all supported webdrivers.
  gem 'capybara-screenshot' # Automatically save screen shots when a scenario fails
  ...
end

spec/support/capybara.rb:

Capybara.javascript_driver = :selenium_chrome_headless

I have spec which tests whether focusing an element applies a CSS class to an element.

it 'shows the fullscreen toggler on focus', js: true do
  visit new_user_path
  page.execute_script("$('#user_about').focus()")
  expect(page).to have_css '.textarea-fullscreenizer-toggler'
end

With Poltergeist it passed. With :selenium_chrome_headless it does not:

expected to find visible css ".textarea-fullscreenizer-toggler" within #<Capybara::Node::Element tag="div" path="/HTML/BODY[1]/MAIN[1]/DIV[1]/DIV[1]/FORM[1]/FIELDSET[1]/DIV[1]/DIV[1]/DIV[5]"> but there were no matches. Also found "", which matched the selector but not all filters. 

With :selenium_chrome though, it passes. So it seems that the headless and non-headless driver do different things! This is pretty uncomfortable.

Interestingly, when putting a save_screenshot after focusing the element, the spec passes with headless chrome, too!

What can I do here? I'm on the right track? Should I try https://github.com/twalpole/apparition driver instead?

Answer 1

You can also try something like this for headless chrome in the helper capybara.rb file.

require "selenium/webdriver"

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.register_driver :headless_chrome do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: { args: %w(headless disable-gpu) }
  )

  Capybara::Selenium::Driver.new app,
    browser: :chrome,
    desired_capabilities: capabilities
end

Capybara.javascript_driver = :headless_chrome

This worked for me. Might work for you as well.

Answer 2

Seems like a timing issue to me. My guess would be that the jQuery call you use to trigger focus takes some time while the matcher is already executed. However, since it finds an element, which is not yet visible though, it raises the error. Inserting the screenshot may consume just enough time to have JavaScript evaluated your command.

Have you tried to explicitly match for a visible element like expect(page).to have_selector('.textarea-fullscreenizer-toggler', visible: true) ? Also, the focus trigger could also be done like that: find('#user_about').trigger('focus') . This may also resolve the issue since it returns after it triggered the event.

Answer 3

The error you provided is obviously not being returned for the code as shown, since the code you've provided isn't scoping anything or checking for text. In the future it would be much better if the error matched the code. That being said the answer below is a guess based on the info available.

The issue is most likely that your JS execution is happening before the page has fully loaded and therefore the page is resetting focus. This can happen because visit does not guarantee the page is fully loaded/stable when it returns. To synchronize that you need an expectation before the execute_script call that checks for something on the page that would indicate the page is loaded/stable.

visit new_user_path expect(page).to have_css('input#first_input:focus') # wait until the initially focused element is loaded/displayed/focused page.execute_script("$('#user_about').focus()")

Note that using execute_script is generally a bad idea in tests though since it's not doing what a user would - you'd be much better off having Capybara do whatever actions a user would perform to make the element you care about focused.