Angular E2E testing made easy
Sandor Vasi
@sawo01
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
https://github.com/pageobject-io/pageobject-generator
Sandor Vasi (@sawo01) & Gabor Szmetanko (@szmeti1)
Find us on Twitter: @pageobject
