Running selenium based browser tests on Travis CI

I recently modified an existing Ruby on Rails project to use Travis CI for Continuous Integration.

The project was using RSpec, Capybara, and Selenium Webdriver for JavaScript testing.

The RSpec feature specs had scenario’s like the following:

  scenario "with images", js: true do
     fill_in "Name", with: "Arizona Trail"
     fill_in "Description", with: "A trail that runs from Mexico to Utah"
     select "Arizona"
     fill_in "Url #1", with: "http://www.aztrail.org/images/washingtonpark.jpg"
     click_link "Add another image"
     fill_in "Url #2", with: "http://www.aztrail.org/images/mulesgrandcanyon.jpg"
     click_button "Add Trail"

     expect(page).to have_content "Trail Added."
  end

With the js: option set to true, the selenium-webdriver gem installed, and FireFox installed then the above test will launch FF to run the test in the browser. This is great locally, but not the optimal configuration for running under CI.

There are several third party providers such as Sauce Labs which integrate with Travis CI to allow you to run your browser tests on their servers, but most require creating an account and some type of subscription fee.

The simplest solution is to configure Travis CI to run headless browser tests directly by adding the following to your .travis.yml file:

..
before_script:
  ## Required to run browser tests (FF) ##
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
..

The above uses Xvfb which is a virtual display framebuffer for X – the display system used by Linux. It provides a fake display buffer for graphical programs to write to, thus allowing any program to run headlessly.

Refer to the Travis CI docs for more details: https://docs.travis-ci.com/user/gui-and-headless-browsers/#Using-xvfb-to-Run-Tests-That-Require-a-GUI

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s