How to run Capybara tests using Selenium & Chrome in a Dockerised Rails environment on a Mac

Question

I feel like I am close, but have hit a wall and so would appreciate some advice.

My goal is to be able to run my system tests and (take screenshots) using Chrome.

The non-JS tests pass using :rack_test .

When driven by :remote_browser (my Chrome setup) I can visit a path, take a screenshot which displays This site cannot be reached 127.0.0.1 refused to connect.

Also worth mentioning is if I try to use vnc with open vnc://localhost:5900 I get an error Connection failed to “localhost” Unable to communicate with “localhost”. Make sure the remote computer is available and the firewall is not blocking screen sharing.

I know I'm missing something but am stuck as to what.

This is my docker-compose.yml file. I'm using the standalone Chrome image.

version: '3'

services:

  app: &app
    build: .
    tmpfs:
      - /tmp

  backend: &backend
    <<: *app
    stdin_open: true
    tty: true
    volumes:
      - .:/usr/src/app:cached
      - rails_cache:/usr/src/app/tmp/cache
      - bundle:/usr/local/bundle
      - node_modules:/app/node_modules
      - packs:/app/public/packs
    env_file:
      - .env/development/database
      - .env/development/web
    environment:
      - WEBPACKER_DEV_SERVER_HOST=webpack-dev-server

  web:
    <<: *backend
    entrypoint: ./bin/docker-entrypoint.sh
    command: bundle exec rails server -b 0.0.0.0
    ports:
      - "3000:3000"

  chrome:
    image: selenium/standalone-chrome:3.141.59
    ports:
      - "4444:4444"
      - "5900:5900"

  webpack-dev-server:
    <<: *app
    command: ./bin/webpack-dev-server
    volumes:
      - .:/usr/src/app:cached
      - bundle:/usr/local/bundle
      - node_modules:/app/node_modules
      - packs:/app/public/packs
    ports:
      - "3035:3035"
    environment:
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

  database:
    image: postgres
    env_file:
      - .env/development/database
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:
  rails_cache:
  bundle:
  node_modules:
  packs:

My Gemfile includes capybara and selenium-webdriver

group :test do
  gem 'capybara', '~> 3.32', '>= 3.32.1'
  gem 'selenium-webdriver', '~> 3.142', '>= 3.142.7'
end

Then my rails_helper.rb file includes this

require 'capybara/rspec'
require 'selenium-webdriver'

Capybara.server_host = '0.0.0.0'
Capybara.server_port = 3000
Capybara.app_host = "http://localhost:3000"

Capybara.register_driver :remote_browser do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: { args: %w(disable-gpu no-sandbox) }
  )

  Capybara::Selenium::Driver.new(app,
    :browser => :remote,
    url: "http://chrome:4444/wd/hub",
    desired_capabilities: capabilities
  )
end

Capybara.javascript_driver = :remote_browser

When I run tests I start Docker with

docker-compose up chrome database

In my logs I see this about the Chrome service starting up.

chrome_1              | 2020-04-24 16:17:05,059 INFO spawned: 'xvfb' with pid 10
chrome_1              | 2020-04-24 16:17:05,060 INFO spawned: 'selenium-standalone' with pid 11
chrome_1              | 16:17:05.229 INFO [GridLauncherV3.parse] - Selenium server version: 3.141.59, revision: e82be7d358
chrome_1              | 2020-04-24 16:17:05,230 INFO success: xvfb entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)
chrome_1              | 2020-04-24 16:17:05,230 INFO success: selenium-standalone entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)
chrome_1              | 16:17:05.289 INFO [GridLauncherV3.lambda$buildLaunchers$3] - Launching a standalone Selenium Server on port 4444
chrome_1              | 2020-04-24 16:17:05.328:INFO::main: Logging initialized @260ms to org.seleniumhq.jetty9.util.log.StdErrLog
chrome_1              | 16:17:05.486 INFO [WebDriverServlet.<init>] - Initialising WebDriverServlet
chrome_1              | 16:17:05.548 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444

Then I run a system test with this

docker-compose run --rm web bundle exec rspec spec/system/example_spec.rb

My example test is very simple

require 'rails_helper'

RSpec.describe "Example", type: :system do
  before do
    driven_by(:remote_browser)
  end

  it "should take a screenshot of root path" do
    visit root_path
    take_screenshot
  end
end

It runs and passes

[Screenshot]: /usr/src/app/tmp/screenshots/r_spec_example_598.png
.

Finished in 0.77216 seconds (files took 1.73 seconds to load)
1 example, 0 failures

Here is the log

chrome_1              | 16:29:55.662 INFO [ActiveSessionFactory.apply] - Capabilities are: {
chrome_1              |   "browserName": "chrome",
chrome_1              |   "chromeOptions": {
chrome_1              |     "args": [
chrome_1              |       "disable-gpu",
chrome_1              |       "no-sandbox"
chrome_1              |     ]
chrome_1              |   },
chrome_1              |   "cssSelectorsEnabled": true,
chrome_1              |   "javascriptEnabled": true,
chrome_1              |   "nativeEvents": false,
chrome_1              |   "rotatable": false,
chrome_1              |   "takesScreenshot": false,
chrome_1              |   "version": ""
chrome_1              | }
chrome_1              | 16:29:55.662 INFO [ActiveSessionFactory.lambda$apply$11] - Matched factory org.openqa.selenium.grid.session.remote.ServicedSession$Factory (provider: org.openqa.selenium.chrome.ChromeDriverService)
chrome_1              | Starting ChromeDriver 81.0.4044.69 (6813546031a4bc83f717a2ef7cd4ac6ec1199132-refs/branch-heads/4044@{#776}) on port 13909
chrome_1              | Only local connections are allowed.
chrome_1              | Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
chrome_1              | [1587745795.669][SEVERE]: bind() failed: Cannot assign requested address (99)
chrome_1              | 16:29:55.943 INFO [ProtocolHandshake.createSession] - Detected dialect: W3C
chrome_1              | 16:29:55.943 INFO [RemoteSession$Factory.lambda$performHandshake$0] - Started new session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)
chrome_1              | 16:29:56.287 INFO [ActiveSessions$1.onStop] - Removing session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)

And the screenshot looks like this...

Also, this is the error message when I try to open vnc://localhost:5900

It's got to that point where I am close to admitting defeat and not testing these use cases so would really appreciate some advice. Thanks!

Answer 1

Thanks to Thomas Walpole for pointing me in the right direction.

I have it working now and thought I'd post the solution in case anyone else struggles to get the setup working.

First point — vnc not working

This is straightforward to fix—the version of Chrome I was using did not include this and it was necessary to use the debug selenium version.

The selenium_chrome service in docker-compose.yml becomes this

  selenium_chrome:
    image: selenium/standalone-chrome-debug:3.141.59
    ports:
      - "5900:5900"

Main.networking issue

This related to the Capybara.app_host as Thomas Walpole explained.

The solution took a number of steps. First, the test server now broadcasts on a different port, 4000.

The web service in docker-compose.yml has the port added.

  web:
    <<: *backend
    entrypoint: ./bin/docker-entrypoint.sh
    command: bundle exec rails server -b 0.0.0.0
    ports:
      - "3000:3000"
      - "4000:4000"

The rails_helper.rb uses this port and web is the Docker internal.network address for the web service.

    Capybara.server_host = '0.0.0.0'
    Capybara.server_port = 4000
    Capybara.app_host = "http://web:4000"

The final issue with my code was the location of this code. It also needed to be within the Rspec.config block.

Complete rails_helper.rb code

The complete working final relevant code in rails_helper.rb therefore was this.

require 'capybara/rspec'
require 'selenium-webdriver'

Capybara.register_driver :headless_selenium_chrome_in_container do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: { args: %w(headless disable-gpu window-size=1440x768) }
  )

  Capybara::Selenium::Driver.new(app,
    :browser => :remote,
    url: "http://selenium_chrome:4444/wd/hub",
    desired_capabilities: capabilities
  )
end

Capybara.register_driver :selenium_chrome_in_container do |app|
  Capybara::Selenium::Driver.new(app,
    :browser => :remote,
    url: "http://selenium_chrome:4444/wd/hub",
    desired_capabilities: :chrome
  )
end

RSpec.configure do |config|
  ...

  config.before(:each, type: :system) do
    Capybara.server_host = '0.0.0.0'
    Capybara.server_port = 4000
    Capybara.app_host = "http://web:4000"
    driven_by(:headless_selenium_chrome_in_container)
  end
end

Note: this gives the option to run Chrome headlessly, or with a browser accessible via vnc://localhost:5900 .