The document discusses best practices, tips, performance, and debugging strategies for Protractor, an end-to-end testing framework for AngularJS applications. It addresses common problems like unknown window sizes, fragile tests due to small HTML changes, and long test run times. Solutions include setting the window size before tests, using page objects to abstract the HTML, enabling sharding to run tests in parallel, and integrating with IDEs for debugging. The tips are from Sergey Bolshchikov, a developer advocate and creator of resources for front-end developers.

1. Protractor's
Tips & Tricks

2. Sergey N.
Bolshchikov
Developer Advocate @ Wix
Creator of js-must-watch list
Co-organizer of YouGottaLoveFrontend

3. Protractor's
Tips & Tricks
Heavily
Opinionated List

4. Protractor
e2e testing framework that
runs test in a browser
interacting as a real user

5. Protractor
Is not
Always
Fun

6. ● Best Practices
● Tricks
● Performance
● Run & Debug

7. Best
Practices

8. Problem 1
Unknown window size
when the browser is
opened

9. Solution 1
Set the required window
size before every test

10. Solution 1

11. Problem 2
Small change in html
can many changes in
tests

12. Solution 2
Page Object and Page
Fragments that introduce
additional level of
abstraction

15. Problem 3
Changing html
structure (tags/classes)
will break tests

16. Solution 3

17. Solution 3

18. Solution 3

19. Problem 4
Complicated tests with
many checks are hard
to read

20. Solution 4

22. Problem 5
Many tests lead to
hairy long and
complicated test
structure

23. Solution 5

24. Tips &
Tricks

25. Problem 1
Sharing values between
tests

26. Solution 1

27. Problem 2
Setting a new value in
tag

28. Solution 2

29. Problem 3
Classical click is simple
but how about right mouse
button click?

30. Solution 3

31. Problem 4
Still can’t find a protractor
method that fits your
purposes?

32. Solution 4

33. Problem 5
Testing non-angular
application with
protractor?

37. Problem 6
Tests are good but don’t
pass in IE

40. Performance

41. Problem One and Only
Running e2e tests takes
too much time

42. Solution 1
Use sharding configuration
for running several
browser instances

43. Solution 1

44. Solution 1
Note: sharding is per file
so create several testing
files

45. Solution 2
Disable ng-animate and
css animations

48. Solution 3
The right balance between
amount of s and
s

49. Run &
Debugging

50. Problem 1
Hard to debug the test

51. Solution 1
Integration with IDE
such as
Intellij/Webstorm

54. Problem 2
Something is wrong
and you have no idea
why

55. Solution 2
Interactive REPL
Element explorer

56. Solution 2

57. Solution 2
Elementor

58. Problem 3
Run in CI in all major
browsers

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

60. Solution 3

61. Thanks!
http://bolshchikov.net
http://blog.bolshchikov.net
http://il.linkedin.com/in/bolshchikov
http://github.com/bolshchikov