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

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

PageObject pattern

https://martinfowler.com/bliki/PageObject.html

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

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:

https://github.com/another-guy/protractor-angular-seattle

https://slides.com/igorsoloydenko/pragmatic-protractor

https://www.protractortest.org/#/tutorial

https://jasmine.github.io/2.0/introduction.html

https://martinfowler.com/bliki/PageObject.html

http://getbem.com/introduction/

https://en.wikipedia.org/wiki/SOLID