Basics of Protractor.js and usage of Page Object pattern

1. Protractor.js
End to End testing
Global Logic

2. Lets Learn
Bad
Experience
BE
Reflection
R
Theoretical
Base
TB
Practice
P

3. Fairy Tail about karma
Huge tests
No
Agreements
No
Abstractions
“Should”
Copy/Paste

4. How it connects
Tests
Jasmine
Protractor
Web
DriverJS
Explorer
Mozilla
Firefox
Google
Chrome
Selenium
InternetNode.js

5. Node.js
• Blocks execution
• Runs immediately and
return result
• Good for working with data
in memory
Synchronous
• Adds new event in the loop
• Runs after all synchronous
operations are executed.
• Good for heavy operations
like database or filesystem
access
Asynchronous

6. Promise
asynchrony
try/catch
map
chaining
Abstraction of asynchrony

7. ??
By the way, everything is a Promise

8. Why does it look syncronous?
W
C O N T R O L
L
F

9. Protractor provides...
2
3
4
5
ElemenFinder1
ElementArrayFinder
Waiters for Angular $http and $timeout
Mock modules
Search by css, xpath, repeater, etc

10. What E2E testing is about?

11. Page Object pattern
2
3
4
5
Hides implementation details1
Maintainable
Reusable
Simplify tests
Extendable

12. Keep in mind
If you have WebDriver APIs in your test
methods, You're Doing It Wrong
© Simon Stewart

13. Page decomposition

14. Page “primitives”

15. Section methods
2
3
4
5
field(name)1
hasErrorOn(fieldName)
ensure(state, expected).otherwise(act)
try(action)
errorFor(fieldName)

16. OK, but how to organize code?
test/e2e
├── config
├── lib
│ ├── section
│ │ ├── behavior
│ │ └── field
│ ├── page.js
│ └── section.js
├── features
│ ├── login
│ └── channels
├── shared-specs
│ ├── toolbars
│ └── validators
└── support
└── login.js

17. What we have learned
Simplicity is prerequisite of reliability
© Edsger Dijkstra

18. Sergii Stotskyi
sergiy.stotskiy@gmail.com
Any questions?
??