protractor: tips & tricks

Protractor's Tips & Tricks

Sergey N.Bolshchikov

Developer Advocate @ WixCreator of js-must-watch listCo-organizer of YouGottaLoveFrontend

Protractor's Tips & Tricks

Heavily

Opinionated List

Protractor e2e testing framework thatruns test in a browser interacting as a real user

Protractor Is notAlways Fun

● Best Practices● Tricks● Performance● Run & Debug

BestPractices

Problem 1

Unknown window size when the browser is opened

Solution 1

Set the required window size before every test

Solution 1

Problem 2

Small change in html can many changes in tests

Solution 2

Page Object and Page Fragments that introduce additional level of abstraction

Problem 3

Changing html structure (tags/classes) will break tests

Solution 3

Solution 3

Solution 3

Problem 4

Complicated tests with many checks are hard to read

Solution 4

Problem 5

Many tests lead to hairy long and complicated test structure

Solution 5

Tips &Tricks

Problem 1

Sharing values between tests

Solution 1

Problem 2

Setting a new value in tag

Solution 2

Problem 3

Classical click is simple but how about right mouse button click?

Solution 3

Problem 4

Still can’t find a protractor method that fits your purposes?

Solution 4

Problem 5

Testing non-angular application with protractor?

Problem 6

Tests are good but don’t pass in IE

Performance

Problem One and Only

Running e2e tests takes too much time

Solution 1

Use sharding configuration for running several browser instances

Solution 1

Solution 1

Note: sharding is per file so create several testing files

Solution 2

Disable ng-animate and css animations

Solution 3

The right balance between amount of s and

s

Run &Debugging

Problem 1

Hard to debug the test

Solution 1

Integration with IDE such as Intellij/Webstorm

Problem 2

Something is wrong and you have no idea why

Solution 2

Interactive REPLElement explorer

Solution 2

Solution 2

Elementor

Problem 3

Run in CI in all major browsers

Solution 3

Use Sauce Labs with credentials specified directly in protractor config file.

Solution 3

Thanks!

http://bolshchikov.nethttp://blog.bolshchikov.nethttp://il.linkedin.com/in/bolshchikovhttp://github.com/bolshchikov