github-tests

Sample UI Tests running against GitHub website.

About the project

The project contains automated UI tests written in Node.js using:

• Protractor - an end-to-end test framework for AngularJS apps, but that works very nicely with non-Angular apps as well
• Jasmine - a JS test library. Protractor uses it as default test library, but it allows to use other libraries, such as Mocha
• Grunt - a JS task runner

PS: The tests are written using the Page Object Pattern.

Requirements

• Node.js
• Google Chrome

PS: The project was developed on OS X Yosemite, with Node.js 0.10.33 and Chrome 46.0.

Setup

• Install Grunt and Grunt-CLI globally:

  npm install -g grunt grunt-cli

• Install the project dependencies:

  npm install

• To run all tests locally:

  grunt

The default Grunt task will run a jshint check on the code syntax, start webdriver-manager locally and run the Protractor tests using your Chrome browser.

Running tests in the cloud

The project is also configured to run tests in the cloud, using Sauce Labs. The conf-saucelabs.js file defines two environments in which the tests may run:

• Chrome 46 + Windows 8
• Firefox 42 + OS X 10.10 (Yosemite)

To run tests in Sauce Labs, a "saucelabs" Grunt task was created. So, you just need to run:

grunt saucelabs

You can add or edit these environments as you want. Sauce Labs provides a Platform Configurator to help with that.

PS: The project is using a sample Sauce Labs user. In a real-world project, the username/accessKey would be passed by environment variables.

Reports

An HTML report will be automatically generated in the reports directory. For every test case, the report will show a screenshot that represents the last state of the browser. The report will look like that:

I used the protractor-jasmine2-html-reporter lib to generate the reports, because they look really great. Unfortunately, there is a small issue with the screenshot generation. A quick workaround to make the screenshots appear successfully was to declare afterAll(function () {})"; in the test specs.

Continuous Integration

After every commit, CircleCI will build and run the project. CircleCI is a cloud-based Continuous Integration server, which has easy integration with GitHub repositories. The build steps are defined in the circle.yml file. CircleCI is also archiving the generated test reports (if logged in, you can see the reports in the "Artifacts" tab).

PS: The CircleCI build is using Node.js 0.10.33 and Ubuntu 12.04.