This article will demonstrate how to setup an automated UI testing project using Selenium WebDriver Ruby binding with headless PhantomJS browser.
- Create a GitHub repository
- Create a Selenium WebDriver Ruby project
- Push to Github
- Login to Travis CI and enable hook
- Run project on Travis CI
- Analyze results on Travis CI
Create a GitHub repository
A public GitHub repository is needed in order to be built on Travis CI for free. New open-source projects can be created at GitHub's 'Create a New Repository' page.
Create a Selenium WebDriver Ruby project
There are no requirements for how Selenium WebDriver Ruby project should be set up. Hence here is how this sample Selenium Ruby project is structured:
/root -- root of the repository /test -- folder contains the sample test test_home_page.rb -- sample test file .travis.yml -- configuration file for Travis CI README.md -- description of the project Rakefile -- Rakefile
Create a UI test
Test::Unitframework is used as the testing framework in this example.
- Headless WebKit PhantomJS will be the browser to run the UI tests.
- PhantomJS binary should be installed by default on Travis CI servers, which is
1.9.7as of 20/04/2014.
- Travis CI supports tests which require GUI, where some setup for
Here is a sample test file called
Travis CI uses
Rakefile to build project and execute the tests, if it is not present, build will fail like this:
$ rake rake aborted! No Rakefile found (looking for: rakefile, Rakefile, rakefile.rb, Rakefile.rb) The command "rake" exited with 1.
Therefore here comes the sample Rakefile:
Travis CI uses
.travis.yml file in the root of the repository to learn about the project, which for instance includes:
- Programming language of the project
- Build setup and cleanup
- Commands to execute the build
The sample testing project here is written in Ruby, so Ruby configurations will be used in
.travis.yml. Detailed official documentation for building Ruby projects can be found here. In order to validate it, Travis Lint would be a handy tool, while the simplest way is just to go to Travis WebLint and paste the content in.
Push to Github
Once the repository is properly created, push it to Github.
Login to Travis CI and enable hook
- Login to Travis CI with the GitHub account of this repository.
- Visit Travis CI profile and find the repository. If the repository does not appear on the list, make sure
- It is not a private repository
- Travis CI has been synced with GitHub (click "Sync now" if necessary)
- Enable the hook for this repository.
Run project on Travis CI
Travis CI should be able to build to the project automatically whenever new changesets are pushed to GitHub. However, to kick off a test run manually:
- From Travis CI project page
- Find this project's page on Travis CI
- Click the refresh icon
- From GitHub project settings
- Go to project's settings page on GitHub
- Select tab
Webhooks & Services(url: https://github.com/[GITHUB_USERNAME]/[REPO_NAME]/settings/hooks)
- Click 'Configure services' button
Travisdown to bottom
Analyze results on Travis CI
The project page on Travis CI is:
Clicking each job number will open up the build log for that particular job, which contains all console output produced during the build.
Test results are shown in the
rake section of the build log. For example, here are the test results inside this particular job's build log:
$ rake /home/travis/.rvm/rubies/ruby-2.0.0-p0/bin/ruby -I"lib:test" -I"/home/travis/.rvm/gems/ruby-2.0.0-p0/gems/rake-10.0.4/lib" "/home/travis/.rvm/gems/ruby-2.0.0-p0/gems/rake-10.0.4/lib/rake/rake_test_loader.rb" "test/test_home_page.rb" Run options: # Running tests: Finished tests in 1.078374s, 0.9273 tests/s, 0.9273 assertions/s. 1 tests, 1 assertions, 0 failures, 0 errors, 0 skips ruby -v: ruby 2.0.0p0 (2013-02-24 revision 39474) [x86_64-linux] The command "rake" exited with 0.
Build status images
Travis CI provides build status images for projects, which are encouraged to be added to project sites or README files as good software development practices.
The status image can be found at
https://travis-ci.org/[GITHUB_USERNAME]/[REPO_NAME].png, with branches can be specified by URL query string like
Alternatively, in the repository page of Travis CI, click settings icon button, then select
Status Image, a dialog with all the options will be displayed, as shown in the screenshot below: