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

E2E testing - the Angular way

• Custom framework built for Angular
• Supports both Angular 1 and 2
• Angular specific locators (model, binding, repeater, etc)
• Automatic waiting

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!