Simple example of end-to-end tests performed with Selenium on a Node.JS webapp, with Travis-CI (using Sauce Labs).
This repo aims to give a very simple example of end-to-end tests performed on a Node.JS webapp, with a continuous integration service like Travis-CI.
End-to-end test a webapp means to perform automatic tests of your app in a web browser, with the exact same conditions as a real user.
This version uses Sauce Labs & Heroku to run your end-to-end tests during your Travis-CI builds. Thanks to Sauce Labs it is run on multiple web browsers (you will find the customizable list in tests/Utils.js
line 16).
However, you will have to adapt the Travis configuration with your own Sauce Labs / Heroku credentials and adapt the environment variables. If you don't want to do any kind of configuration please check my other tutorial, where I use Xvfb & Docker instead. This one works straight out of the box, but the test suit is only run in the Chrome Web Browser.
The strategy used here to perform the end-to-end tests of your app either in your local environment or with Travis-CI, is based on the following technologies :
In your local environment:
In your Travis-CI builds:
#Clone repo
git clone https://github.com/JohannC/Travis-CI-Selenium-Sauce-Labs-E2E-Testing.git
cd Travis-CI-Selenium-Sauce-Labs-E2E-Testing
git remote add origin https://github.com/$YOUR_USERNAME/$YOUR_REMOTE_REPO.git
#Install dependencies
npm install
#Run this minimalist app on you local environment
npm run start
Open another terminal and type the following:
#Launch the end-to-end test suit
npm run test
You will need to adapt the .travis.yml
file to allow Travis-CI to run this end-to-end test suit. Indeed, it uses Heroku to deploy a staging version of this app. Sauce Labs will then perform the end-to-end tests on this Heroku deployment.
#Replace with your own Heroku access key
travis encrypt xxxxxxxx-xxxx-xxxx-xxxxxxxxx
This command will generate you a hash that you will copy in the .travis.yml
file:
#line 10
deploy:
provider: heroku
app: travis-ci-selenium-sauce-labs
api_key:
secure: $REPLACE-WITH-YOUR-GENERATED-HASH-HERE
Create an app on Heroku.com where will be deployed the staging app. You will enter in the public HTTP address of your heroku deployed app in the .travis.yml
file:
#line 24
env:
global:
- HEROKU_STAGING_DEPLOYMENT=$REPLACE-WITH-YOUR-HEROKU_APP_URL
#Replace with your own Sauce Labs access key
travis encrypt xxxxxxxx-xxxx-xxxx-xxxxxxxxx
This command will generate you a hash that you will copy in the .travis.yml
file:
#line 20
sauce_connect:
username: $REPLACE-WITH-YOUR-SAUCE-LABS-USERNAME
access_key:
secure: $REPLACE-WITH-YOUR-GENERATED-HASH-HERE
Set the environment variables with your own Sauce Labs credentials:
#Replace with your own Sauce Labs access key
travis encrypt SAUCE_LABS_TOKEN=xxxxxxxx-xxxx-xxxx-xxxxxxxxx
This command will generate you a hash that you will copy in the .travis.yml
file:
#line 24
env:
global:
- HEROKU_STAGING_DEPLOYMENT=http://...herokuapp.com/
- SAUCE_LABS_USERNAME=$REPLACE-WITH-YOUR-SAUCE-LABS-USERNAME
- secure: $REPLACE-WITH-YOUR-GENERATED-HASH-HERE
The configuration is now finished. Commit your changes and push it to your GitHub repo. You will have your end-to-end tests running on Travis-CI.
Go check the video capture of those tests on Sauce Labs.