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

Question

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?

Answer 1

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