How to set screen size for chrome headless system test in rails 5.1?

Viewed 3774

In order to work with and test a new responsive frontend for my site, I'm trying to use Rails' new system tests (specs) with javascript and Chrome headless. I cannot figure out a way to set the screen size of the browser in the spec, though.

Here's my setup in spec/rails_helper.rb

config.before(:each, type: :system, js: true) do
  driven_by :selenium_chrome_headless, screen_size: [1900, 800]
end

I then create the screenshot with:

page.driver.save_screenshot(the_uri)

But the size of the rendered screenshot still is the default, which is much smaller. Ideally, I'd like to see the entire rendered page, but at this point, I'd be happy with just using the dimensions I've provided.

Ideas on what I'm missing here?

3 Answers

You simply need to redefine the driver which passes the headless and screen size arguments.

Capybara.register_driver :selenium_chrome_headless do |app|
  options = Selenium::WebDriver::Chrome::Options.new

  [
    "headless",
    "window-size=1280x1280",
    "disable-gpu" # https://developers.google.com/web/updates/2017/04/headless-chrome
  ].each { |arg| options.add_argument(arg) }

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

RSpec.configure do |config|
  config.before(:each, type: :system, js: true) do
    driven_by :selenium_chrome_headless
  end
end

Had same issue.

Changed this line

driven_by :selenium_chrome_headless, screen_size: [1400, 1400]

to this

driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400]

to fix the issue.

I just ran into this today and I think the answer is... you can't :(

From the docs:

driven_by has a required argument for the driver name. The keyword arguments are :using for the browser and :screen_size to change the size of the browser screen. These two options are not applicable for headless drivers and will be silently ignored if passed.

Huge bummer. Testing responsive websites is going to be nearly impossible as certain elements show and hide depending on screen width.

Related