Simulating mobile devices in tests

You can simulate a mobile device in system tests as follows:

register a new capybara driver in your test helper:

Capybara.register_driver :mobile_chrome do |app|
  opts = Selenium::WebDriver::Chrome::Options.new(
    args: %w[--headless --no-sandbox --disable-dev-shm-usage --disable-gpu]
  )
  opts.add_emulation(device_metrics: {width: 375, height: 667, pixelRatio: 2}, user_agent: "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1")
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: opts)
end

You can also .add_emulation by just specifying a device name:

opts.add_emulation(device_name: 'iPhone 6')

Name can be any valid device name from the Chrome DevTools Emulation panel. See more .

Afterwards you can switch to mobile driver in your tests whenever you need:

Capybara.current_driver = :mobile_chrome