Automate End to end (e2e) testing for Angular using Protractor & Jasmine

3 min readDec 1, 2018

End-to-end testing is a methodology used to test whether the flow of an application is performing as designed from start to finish.

Angular CLI has build in E2E test framework using Protractor and Jasmine

This example shows Angular end to end testing for ‘Tour of Heros’ application.

Code base is from
https://angular.io/guide/testing
Git clone:
https://github.com/dhormale/e2e-testing-Angular-Protractor-Jasmine

Application generated using “ng new” has below default files for e2e testing.

Default settings from protractor.conf.js and tsconfig.e2e.json should work without any changes.

Apart from above configuration files, we have /src folder in /e2e folder which contains…

app.e2e-spec.ts — Spec file has steps which gets executed. Spec file are written using the jasmine syntax.
(Jasmine syntax: https://jasmine.github.io/pages/docs_home.html)
app.po.ts — Page Object file (methods used to find elements in the page. From spec file we can then call these methods to test the various elements.)

This example’s app.e2e-spec.ts file has list of specification.

Ref: https://gist.github.com/dhormale/90dd6288ab1780bf0f3039c7cef386c9#file-app-e2e-spec-ts

ng e2e

This command will do following things

Run spec in browser (default browser configured is chrome which run with message ‘Chrome is being controlled by automated test software’)
Log test execution result on console as below.

To run e2e testing with headless mode.

For continues integration we need to run e2e tests in headless mode. (without opening Chrome browser). To make this work we need to update protractor.conf.js files capabilities section as below.

capabilities: {
   'browserName': 'chrome',
   chromeOptions: {
   binary: process.env.CHROME_BIN,
   args: ['--headless', '--no-sandbox']
   }
},

From command prompt we can have this dynamic as

ng e2e --capabilities.chromeOptions.args="--headless"

To run e2e on DEV/QA servers or seperate environment.

protractor.conf.js file has baseUrl: ‘http://localhost:4200/'
This can be changed to one we want. To make pass it dynamically from command prompt, we can pass baseUrl as below.

node node_modules/protractor/bin/protractor --baseUrl="https://google.com/"

Cheatsheet for accessing elements:

element(by.id('firstName'))

element(by.css('.signout'))

element(by.model('address.city')) 

element(by.binding('address.city')); 

element(by.input('firstName'));

element(by.input('firstName')).clear();

element(by.buttonText('Close'));

element(by.partialButtonText('Save'));

element(by.linkText('Save'));

element(by.partialLinkText('Save'));

element(by.css('img[src*='assets/img/profile.png']')); element(by.css('.pet .cat'));element(by.cssContainingText('.pet', 'Dog'));

allColors = element.all(by.options('c c in colors'));

Cheatsheet for typing (sendKeys):

element(by.id('firstName').sendKeys("John");

sendKeys(Key.ENTER);

sendKeys(Key.TAB);sendKeys(Key.BACK_SPACE)element(by.id('user_name')).clear()

Cheatsheet for collection:

var list = element.all(by.css('.items));

var list2 = element.all(by.repeater('personhome.results'));

expect(list.count()).toBe(3);

expect(list.get(0).getText()).toBe('First’)

expect(list.get(1).getText()).toBe('Second’)

expect(list.first().getText()).toBe('First’)

expect(list.last().getText()).toBe('Last’)

For accessing angular material elements, below link has e2e specs from material team. https://github.com/angular/material2/tree/master/e2e/components

Happy e2e testing and If you found this useful, hit that 👏button :)