Docker container for running browser tests

So you’re migrating your app to everything docker containers. You’re pretty happy with the new setup and as you’re running your tests, you hit a snag. Browser tests. You’re now asking a big question:

How the heck am I going to run browser tests?

Credit to The Huffington Post

If your project is on Rails you probably have been accustomed to using an acceptance test framework like capybara and run your tests on a browser that’s on your host computer like firefox or chrome. The problem with this approach was that you and your fellow developers had to install a web browser like firefox and any other dependencies needed for this to run. That’s not what Docker stands for. This all should be automated and done using containers. No need for people to be installing things they don’t want to on their personal computers.

And so that’s what we’re going to need ladies and gentlemen, a container.

Searching Github, I came across the docker-selenium project by SeleniumHQ. It allows you to plug in a container that runs a selenium standalone firefox browser. I use a docker-compose.yml file to configure my applications. Here’s how the selenium container entry would look:

image: selenium/standalone-firefox-debug:2.47.1
— “4444:4444”
— “5900:5900”

The 4444 port is the port that the web driver runs on. In this case, firefox.

The 5900 port is important and is used for a VNC connection which if you’re not familiar with, creates a remote desktop session that you can hook into to see the web browser interaction.

Okay, but what changes have to happen on the Rails side to use this container?

in your spec_helper.rb:

This will:

  1. Find the docker ip to reach the docker host running all containers
  2. Register the selenium driver to use our container’s firefox browser for tests exposed on port 4444
  3. Sets the server host and port of the web container we’re running the test so that the selenium container can reach it. I chose to use port 3010 but this can be arbitrary.

With the web and selenium containers up and running, you can set up your VNC connection and then run your tests on the web container all viewed through the selenium container’s firefox web browser.

Here’s how to see it:

If you’re on a Mac, all you have to do to get the desktop viewer is go to Finder -> Go -> Connect to Server and in the server address field type:

# password defaults to `secret`

You should now see a screen share of the container’s desktop which will have a web browser (firefox) installed to run your tests.

Now, you can run your tests on the web container:

docker-compose run — service-ports web rspec spec/to/browser_spec.rb

Note: This will run on the web container’s port 3010 which we requested.

… and now… we have …

screenshot taken from vnc screen share

It’s pretty awesome. You don’t lose anything migrating to docker and get to see everything tested in your browser like normal.

There’s so much configuration you could wire up like switching to a chrome browser and heck, if you wanted a video of the browser test you can set that up too. Just read the documentation.

I hope this helps someone out there. I’m curious to hear how this has been working out for you as well. Let me know if you have any questions here or hit me up on Twitter.