AngularJS end-to-end Testing using Protractor

TunJS - March 2015

By Nihel Akremi


  • Why is testing so important?
  • Protractor
  • Setup
  • Step 0 - write a test
  • Step 1 - interacting with elements
  • Step 2 - Run Tests

Why is testing so important?

Testing is about gaining confidence that your code does what you think it should do

Whats the idea behind E2E testing?

  • How would the users see my application?
  • Is my backend communicating with my frontend?
  • Can I release this code?
  • It does NOT replace Unit Testing!

The dark side of E2E testing

  • It needs a specific running environment
  • It's difficult to debug
  • It's hard to keep the tests up-to-date


Protractor is built on top of WebDriverJS, which is an API, written as extensions, for controlling browsers.

Testing system
Your AngularJS App


Use npm to install Protractor globally with

                    sudo npm install protractor -g

Use webdriver-manager to download the necessary binaries with

                    sudo webdriver-manager update

Now start up a server with

                    sudo webdriver-manager start


// conf.js
exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'],
  capabilities: {
    browserName: 'firefox'

// conf.js
exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'],
  multiCapabilities: [{
    browserName: 'firefox'
  }, {
    browserName: 'chrome'

Step 0 - write a test

// spec.js
describe('Protractor Demo App', function() {
  it('should have a title', function() {

    expect(browser.getTitle()).toEqual('Super Calculator');

The describe and it syntax is from the Jasmine framework. browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.

Basic Example

// spec.js
describe('by model', function() {
   it('should find an element by text input model', function() {
     var username = element(by.model('username'));
     var name = element(by.binding('username'));
     username.sendKeys('Jane Doe');
     expect(name.getText()).toEqual('Jane Doe');

by.model(modelName):Find an element by ng-model expression.
by.binding:Find an element by binding.


Step 1 - interacting with elements

// spec.js
describe('Protractor Demo App', function() {
  it('should add one and two', function() {


        toEqual('5'); // This is wrong!

Step 1 - interacting with elements

element takes one parameter, a Locator, which describes how to find the element. The by object creates Locators.

  • by.model('first') to find the element with ng-model="first".
  •'gobutton') to find the element with the given id.
  • by.binding('latest') to find the element bound to the variable latest. This finds the span containing {{latest}}

Step 2 - Run Tests

start the webdriver server

                    webdriver-manager start

run Protractor in another terminal

                    protractor test/e2e/config.js //this is the relative path to your config.js file


< thank-you >