"Refused to connect" using ChromeDriver, Capybara & Docker Compose

Question

I'm trying to make the move from PhantomJS to Headless Chrome and have run into a bit of a snag. For local testing, I'm using Docker Compose to get all dependent services up and running. To provision Google Chrome, I'm using an image that bundles both it and ChromeDriver together while serving it on port 4444. I then link it to the my app container as follows in this simplified docker-compose.yml file:

web:
    image: web/chrome-headless
    command: [js-specs]
    stdin_open: true
    tty: true
    environment:
        - RACK_ENV=test
        - RAILS_ENV=test
    links:
        - "chromedriver:chromedriver"

chromedriver:
    image: robcherry/docker-chromedriver:latest
    ports: 
        - "4444"
    cap_add: 
        - SYS_ADMIN
    environment:
        CHROMEDRIVER_WHITELISTED_IPS: ""

Then, I have a spec/spec_helper.rb file that bootstraps the testing environment and associated tooling. I define the :headless_chrome driver and point it to ChromeDriver's local binding; http://chromedriver:4444. I'm pretty sure the following is correct:

Capybara.javascript_driver = :headless_chrome

Capybara.register_driver :chrome do |app|
    Capybara::Selenium::Driver.new(app, browser: :chrome)
end

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

Capybara::Selenium::Driver.new app,
    browser: :chrome,
    url: "http://chromedriver:4444/",
    desired_capabilities: capabilities
end

We also use VCR, but I've configured it to ignore any connections to the port used by ChromeDriver:

VCR.configure do |c|
    c.cassette_library_dir = 'spec/vcr_cassettes'
    c.default_cassette_options = { record: :new_episodes }
    c.ignore_localhost = true
    c.allow_http_connections_when_no_cassette = false
    c.configure_rspec_metadata!
    c.ignore_hosts 'codeclimate.com'
    c.hook_into :webmock, :excon

    c.ignore_request do |request|
        URI(request.uri).port == 4444
    end
end

I start the services with Docker Compose, which triggers the test runner. The command is pretty much this:

$ bundle exec rspec --format progress --profile --tag 'broken' --tag 'js' --tag '~quarantined'

After a bit of waiting, I encounter the first failed test:

  1) Beta parents code redemption:  redeeming a code on the dashboard when the parent has reached the code redemption limit does not display an error message for cart codes
     Failure/Error: fill_in "code", with: "BOOK-CODE"

     Capybara::ElementNotFound:
       Unable to find field "code"
     # ./spec/features/beta_parents_code_redemption_spec.rb:104:in `block (4 levels) in <top (required)>'

All specs have the same error. So, I shell into the container to run the tests myself manually and capture the HTML it's testing against. I save it locally and open it up in my browser to be welcomed by the following Chrome error page. It would seem ChromeDriver isn't evaluating the spec's HTML because it can't reach it, so it attempts to run the tests against this error page.

Given the above information, what am I doing wrong here? I appreciate any and all help as moving away from PhantomJS would solve so many headaches for us.

Thank you so much in advance. Please, let me know if you need extra information.

Answer 1

The issue you're having is that Capybara, by default, starts the AUT bound to 127.0.0.1 and then tells the driver to have the browser request from the same. In your case however 127.0.0.1 isn't where the app is running (From the browsers perspective), since it's on a different container than the browser. To fix that, you need to set Capybara.server_host to whatever the external interface of the "web" container is (which is reachable from the "chromedriver" container). That will cause Capybara to bind the AUT to that interface and tell the driver to have the browser make requests to it.

In your case that probably means you can specify 'web'

Capybara.server_host = 'web'