Example of End To End Testing Using Selenium Webdriver and Jasmine Tests With Istanbul Code Coverage

Goal

• Inside of src we have a very basic website with some really simple JS
  • The JS creates two click handlers:
    • when an a tag is clicked, append a div with some text in it to the body
    • when a div tag is clicked, add some text to the body
• We want to set up tests that will:
  • Test that the page title is Test Title
  • Test that clicking on a link will indeed create a div with the text added through jquery
• Lastly, we want to create a coverage report that will show how much of our JS code was tested
  • NOTE: We intentionally omit testing the JS code regarding clicking on a div tag, so that we can see in our coverage that it was not run

Installation

Global Installation

Firstly, install grunt-cli globally:

npm install -g grunt-cli

Next install jasmine-node test runner globally:

npm install -g jasmine-node

Now we'll download a browser driver that Selenium will use to control Firefox:

1. Download firefox webdriver: https://github.com/mozilla/geckodriver/releases/tag/v0.16.1
2. Put the driver somewhere in your PATH
   • e.g. /usr/local/bin

Local Installation

1. clone this repo somewhere on your computer

2. cd into the newly created directory for the locally cloned version of this repo

3. Install all necessary node packages:

   npm install
   

Running

Website code from src/ into the prod/ directory and instrument it:

grunt dev

Start a local static file web server in a different terminal window:

grunt server

Back in the previous terminal window, run the tests:

jasmine-node specs/test-spec.js

The tests have been run, and the coverage has been generated. Create human readble report:

grunt report

This will create an html report and put it in coverage/lcov-report/index.html