Pragmatic testing of Angular applications with Protractor
by Igor Soloydenko
@n0ther_guy
https://soloydenko.com
What Is Protractor?
Is NOT
IS
- a "silver bullet"
- a replacement for unit testing
- ...nor integration testing
- ...nor manual (sic!) testing
- a debugging tool
- a valuable high-level QA tool
- a complement to other tests
- a system health adviser
- a user's perspective reflector
- a time saver (automation)
- a thing with own rules
What Is Protractor?
Why To End-To-End Test?
- Increase confidence by maintaining the minimal bar*
-
Save time on routine testing activities:
- Redirect efforts towards testing harder cases
- Speed-up testing simple(r) things
- Fill the gap in quality assurance toolset
* "minimal" bar ≠ "low" bar
Why Isn't Protractor Omnipresent?
- Low industry acceptance (few "standards", tools, etc)
- Poor test planning by teams, if at all
- Missing core agreements
- Lack of plan review
- Undeveloped testing infrastructure
- Code quality principles are forgotten
- Psychology?
- "Tests are not real system code" → lower bar
- Flaky tests & maintenance burden
When To Start Testing?
Testing Late
Testing From Day 1
Testing After UI Stabilization
What Layer(s) To Test?
What Use Cases To Test?
Intuitive Use Case Ordering
Use Case Chain Evolution
How To Test?
Classic Demo
FRAGILE !
PageObject pattern
ComponentObject pattern
- Taking PageObject pattern further (mimic the target component hierarchy)
- Re-applying DRY and SOLID principles*
- Refactoring until test code becomes clear:
- test can be read by non-developers
- low-level abstractions are not leaked outside
* DRY – "Don't Repeat Yourself"
SOLID – is a mnemonic acronym for design principles aiming at achieving understandable, flexible and maintainable code.
Production Example
Common Issues
- CSS selectors is what breaks most often
-
Running tests parallelly (on different machines)
- Think about test user and data partitioning
-
Protractor/Angular interaction can cross your path
- Automatic waiting can cause test timeouts
- No (good?) way to programmatically stop execution
- Process orchestration can be tedious
References
Demo code:
Slides:
Protractor Tutorial:
Jasmine docs:
PageObject pattern:
BEM (Block, Element, Modifier):
SOLID Principles: