While building my subscription tracking service I broke the mobile navigation menu and deployed it to production. It was only after a day or so that a user emailed me to report this bug. I directly understood why my ads did not convert! This should never happen again, let’s create a system test with mobile viewport sizes that verifies the menu works correctly.
Default screen size desktop
As you might know, the default Rails system tests use dimensions that are defined in
test/application_system_test_case.rb with a line such as:
driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400]
The most simple solution would be to just modify the sizes in that array. However, this would make all system test cases use the mobile viewport, which is not what I want.
Every test case a different screen size
After some searching I found that the Rails APIs did not support setting the screen size for one test case. Capybara, which is used as an underlying gem, does however. So as the first line to a mobile viewport test case you can set the screen size using:
Capybara.current_session.current_window.resize_to(360, 740) # Galaxy S9
The naive solution to resetting the screen size after this test case would be to repeat this call with the original 1400, 1400 as arguments. However, if the test does not succeed, it will not execute that line. It is therefore better to reset the viewport in a seperate teardown method, for example in your
You can DRY the resulting
test/application_system_test_case.rb a bit by storing the default size in a const array and using that in the various calls. The one I use now looks like this:
# frozen_string_literal: true
class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
WINDOW_SIZE = [1400, 1400].freeze
driven_by :selenium, using: :headless_chrome, screen_size: WINDOW_SIZE
Subscribe to the RSS feed to be notified of my next blog post!