Adds ability to run spec not headlessly (#8844)

docs/tests/test-flags.md

@@ -53,11 +53,21 @@ There are two ways to do this:
 
 ### `js: true` Flag
 
-`js: true` indicates to our specs that we want the javascript on the page to be
-executed when the page is rendered. One side effect of running our javascript in our specs is
-that a lot of pages will hit Elasticsearch. Since we don't clean out
-Elasticsearch between every single spec (because it is very costly) this can lead
-to unexpected data being loaded for a spec. To prevent this from happening, we can use the
-`:stub_elasticsearch` flag. The `:stub_elasticsearch` flag will stub all index
-and search requests made to Elasticsearch and return an empty response. This
-will ensure that no unwanted data shows up on your spec's page.
+`js: true` indicates that we want the javascript on the page to be executed when
+the page is rendered, and a headless chrome instance will be initialized to do
+so (instead of the default
+[rack_test](https://github.com/teamcapybara/capybara#racktest) driver). One side
+effect of running our javascript in our specs is that a lot of pages will hit
+Elasticsearch. Since we don't clean out Elasticsearch between every single spec
+(because it is very costly) this can lead to unexpected data being loaded for a
+spec. To prevent this from happening, we can use the `:stub_elasticsearch` flag.
+The `:stub_elasticsearch` flag will stub all index and search requests made to
+Elasticsearch and return an empty response. This will ensure that no unwanted
+data shows up on your spec's page.
+
+If you are debugging a `js: true` spec and want to see the browser, you can set
+`HEADLESS=false` before running a spec:
+
+```shell
+HEADLESS=false bundle exec rspec spec/app/system
+```

spec/support/initializers/capybara.rb

@@ -6,15 +6,6 @@ Webdrivers.cache_time = 86_400
 
 Capybara.default_max_wait_time = 10
 
-Capybara.register_driver :headless_chrome do |app|
-  options = Selenium::WebDriver::Chrome::Options.new(
-    args: %w[no-sandbox headless disable-gpu window-size=1920,1080 --enable-features=NetworkService,NetworkServiceInProcess],
-    log_level: :error,
-  )
-
-  Capybara::Selenium::Driver.new app, browser: :chrome, options: options
-end
-
 RSpec.configure do |config|
   config.before(:each, type: :system) do
     driven_by :rack_test
@@ -29,7 +20,9 @@ RSpec.configure do |config|
 
       driven_by :selenium, using: :chrome, screen_size: [1400, 2000], options: { url: ENV["SELENIUM_URL"] }
     else
-      driven_by :headless_chrome
+      # options from https://github.com/teamcapybara/capybara#selenium
+      chrome = ENV["HEADLESS"] == "false" ? :selenium_chrome : :selenium_chrome_headless
+      driven_by chrome
     end
   end
 end

spec/system/user/view_user_index_spec.rb

@@ -74,6 +74,7 @@ RSpec.describe "User index", type: :system, stub_elasticsearch: true do
     end
 
     it "shows organizations", js: true do
+      Capybara.current_session.driver.browser.manage.window.resize_to(1920, 1080)
       expect(page).to have_css("#sidebar-wrapper-right h4", text: "organizations")
     end
   end