Agile / Technology

Testing with Angular’s E2E Testing Framework

Outdated content warning. The techniques in this article are now out of date. Google no longer supports the “E2E” testing framework. 7 Reasons to love Duck Angular covers a more modern approach to testing Angular applications.

Note Special Collaboration

This article is a special collaboration between Stephane Bisson, who developed the concept, the app, and the spec, and Kyle Hodgson who helped write and produce the article.


The Problem

Testing AngularJS applications with Selenium can be difficult! I’ve seen teams struggle with waits and timeouts, writing jQuery selectors, and all sorts of complicated things to work around these limitations. Selenium, and in particular Selenium with WebDriver, can be a challenge when working with any “Web 2.0” site, and a single page application built with Angular presents even bigger challenges. Part of the challenge is that Selenium doesn’t know when Angular is finished adding functionality to the page.


Enter E2E

Angular’s team has developed a project called “E2E”, or the “End to End” testing framework. It allows developers to test in multiple browsers at the same time, while your output scrolls past on a terminal every time you change your code without having to re-run a slow functional test. It doesn’t do everything Selenium does, but it’s much much faster at running tests on AngularJS sites.


Getting Started

Create an application. For instance, here’s a simple, but well structured example app. You’ll also need have e2e and testacular installed.

sudo npm install -g  testacular

If you’re in the directory with the index.html and app.js, you can start a simple web server on port 8000 like this:

python -m SimpleHTTPServer

Set up Testacular

You’ll need to create a testacular config file. It’s easy to specify the browsers, by using the testacular init command. It asks you a few questions and creates the file for you. That process looks like this, you can see us provide some sensible defaults below.

$ testacular  init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine


Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> Firefox
> Safari

Which files do you want to test ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> spec/**/*.js


Do you want Testacular to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

The Spec

Write a simple test scenario. If you’re used to Jasmine’s approach you might think of this like a Jasmine spec.

describe('my app', function() {
        it('should login', function() {
                browser().navigateTo('/');

                input('username').enter('steph');
                input('password').enter('steph');
                element('#login').click();

                expect(browser().location().url()).toBe("/home");

                expect(element('#user').text()).toEqual('steph');
        });
});

Start Testacular

Once you start testacular, it’s going to watch your source code files for changes, and automatically display the test results on the console.

testacular start <name-of-config-file.js>

Edit your app or your tests and see it run! The end result looks something like this:

e2e-in-action.png

As you can see, tested in all three browsers with test output in the console. Voila! I love this workflow – keep your favorite text editor open, keep a terminal open, watch your tests go red and green while you work.

5 thoughts on “Testing with Angular’s E2E Testing Framework

  1. I configured testacular (now it is named “karma”), am able to run it, but when it encounters “browser”, it says: ReferenceError: browser is not defined at null..
    Some people hinted that “browser” is defined in angular-scenario.js, but when I include it all the tests stop working normally (they disregard the expect-tobe conditions: expect(‘111’).toBe(‘222’); is evaluated as true).

    • Remove the reference to angular-scenario.js. Insteat add framework=[“ng-scenerio”] before your file list. Also install karma-ng-scenario using npm and add it to plugins at the bottom of your config file.

  2. Hey Kyle, nice article …. however do you have a more detail analysis of differences between selenium webdriver and Angular’s E2E’s capabilities and limitations

  3. Pingback: Como instalar AngularJS desde cero con Yeoman | Jorge Alvarez Moreno

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s