Disabling Image Loading with Rails System Tests

Disabling external assets like JavaScript or images can improve the performance of your Rails System Tests. Capybara is the acceptance test framework abstracted by Rails System Tests. It will load all assets on a page before proceeding to the next step in your test. Since, we are only testing interactions with Rails System Tests, we can reduce the page load time by ignoring images, external scripts and fonts.

Rails 5.1 introduced SystemTestCase. It is a nice abstraction around Capybara providing a sane default configuration. The driven_by configuration method allows you to pass additional options to the underlying ChromeDriver.

If your using the default ApplicationSystemTestCase it is configured to use the :chrome web driver with Selenium. This uses the ChromeDriver executable to communicate with the Chrome browser. Disabling image loading is not immediately obvious.

To disable image loading with the ChromeDriver, you need to configure a profile option that is passed to the Chrome browser. I found the solution on this issue: Disable image with chromedriver · Issue #1056 · webdriverio/webdriverio · GitHub

To disable image loading for Rails SystemTestCase using the ChromeDriver pass the prefs profile option:

require "test_helper"

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  driven_by :selenium, using: :chrome, screen_size: [1400, 1400],
            options: {
              prefs: {
                profile: {
                  default_content_setting_values: { images: 2 } # disable image loading
                }
              }
            }
end

If you like to learn more about Rails System Tests, I recommend watching RailsConf 2017: Building Rails ActionDispatch::SystemTestCase Framework by Eileen Uchitelle