Angular E2E Testing

From Karma to Protractor

Aaron Nielsen / @spitimage

The Announcement

  • June 2013 - Protractor to replace Angular scenario runner
  • Angular community now encouraged to use protractor for all new E2E testing

Let's have a look!

Why Not Karma?

  • Completely contained inside browser sandbox
  • "Manager" web app running all test code inside iframe
  • Typically local dev environment only
  • Really only good for testing javascript code
  • Bottom Line: Karma was designed for unit tests

Why Protractor?

  • Leverage hard work of Selenium community
  • Automates real user interaction with the browser
  • Ties Angular models and bindings to E2E testing
  • Can run against any deployment (even production)
  • Can test other aspects of the application (styling, layout etc)

How Does it Work?

  • WebDriver standard - multiple SDKs
  • Abstracts proprietary browser remote control
  • Selenium grid process. Handles translation or launches appropriate driver.

WebDriver JS

  • Leveraged heavily by protractor
  • Javascript SDK for WebDriver protocol
  • Async library

A Test


describe('Super Bowl Party Application', function() {
    beforeEach(function() {
        browser.get('#/guestDetails');
    });

    it('Should display all names in title case', function(){
        element(by.model('guest.name')).sendKeys('john doe');
        element(by.id('save')).click();
        var cell = element(by.repeater('guest in guests').row(0).column('name'));
        expect(cell.getText()).toEqual('John Doe');
    });
});

The Example App

  • Super Bowl guest list
  • CRUD on guests
  • Manage party supplies too

Resources

Thank You!