Angular E2E testing made easy

Sandor Vasi (@sawo01)

Gabor Szmetanko (@szmeti1)

Questionnaire

E2E testing in a nutshell

• Automated tests running in browsers
• No mocking (all services and components)
• Test like a user
• Slower and flakier than unit tests
• Complements unit tests nicely

E2E testing - the Angular way:

• Custom framework built for Angular
• Supports both Angular 1 and 2

Protractor

How Protractor works?

Protractor

WebDriver (Selenium)

Your app

WebDriver protocol

Why do we need another tool?

• Angular specific locators

• Automatic waiting for Model-View synchronization
   

• model
• repeater
• binding
• button text
• options
• etc.

How to use it?

$ npm install -g protractor

$ webdriver-manager start

$ webdriver-manager update

$ protractor conf.js

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://myhost:4444/wd/hub',
  specs: ['spec.js']
}

conf.js

Angular 1 demo

Issues with the TODO list tests

• Spaghetti code
• Mixing of concerns (interaction with the browser vs. test logic)
• Not feasible for larger applications
• Preferred locator strategies:

• Prefer more specific locators
• Do not use XPath
• Avoid text locators

Solution

Page object pattern

• API for the HTML markup
• Re-usable
• Decouples test logic from implementation

Angular 1 demo

Page object

Page object best practices

• One page object per file
• Should provide quick access to elements on the page
• Meaningful method names (clickOnBlueButton vs. clickOnSubscribeButton)
• No assertions in page objects
• Your tests should tell a story
• Create POs for individual directives, components, etc.

Angular 2 demo

Thank you!

https://github.com/pageobject-io/angular1-demo

https://github.com/pageobject-io/angular2-demo

Sandor Vasi (@sawo01) & Gabor Szmetanko (@szmeti1)

Find us on Twitter: @pageobject

https://github.com/pageobject-io/pageobject-generator

Please star us on Github!