AngularJS end-to-end Testing using Protractor


TunJS - March 2015

By Nader Toukabri

Program

  • 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

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

Testing system
|
Webdriver
|
Your AngularJS App

Setup

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

Configuration


// 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() {
    browser.get('http://juliemr.github.io/protractor-demo/');

    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.clear();
     expect(name.getText()).toEqual('');
   
     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.

Reference

Step 1 - interacting with elements


// spec.js
describe('Protractor Demo App', function() {
  it('should add one and two', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    element(by.model('first')).sendKeys(1);
    element(by.model('second')).sendKeys(2);

    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).
        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".
  • by.id('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

References

< thank-you >