Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Protractor: Tips & Tricks

16,891 views

Published on

The tips and tricks of using protractor for writing e2e tests with AngularJS

Published in: Technology

Protractor: Tips & Tricks

  1. 1. Protractor's Tips & Tricks
  2. 2. Sergey N. Bolshchikov Developer Advocate @ Wix Creator of js-must-watch list Co-organizer of YouGottaLoveFrontend
  3. 3. Protractor's Tips & Tricks Heavily Opinionated List
  4. 4. Protractor e2e testing framework that runs test in a browser interacting as a real user
  5. 5. Protractor Is not Always Fun
  6. 6. ● Best Practices ● Tricks ● Performance ● Run & Debug
  7. 7. Best Practices
  8. 8. Problem 1 Unknown window size when the browser is opened
  9. 9. Solution 1 Set the required window size before every test
  10. 10. Solution 1
  11. 11. Problem 2 Small change in html can many changes in tests
  12. 12. Solution 2 Page Object and Page Fragments that introduce additional level of abstraction
  13. 13. Problem 3 Changing html structure (tags/classes) will break tests
  14. 14. Solution 3
  15. 15. Solution 3
  16. 16. Solution 3
  17. 17. Problem 4 Complicated tests with many checks are hard to read
  18. 18. Solution 4
  19. 19. Problem 5 Many tests lead to hairy long and complicated test structure
  20. 20. Solution 5
  21. 21. Tips & Tricks
  22. 22. Problem 1 Sharing values between tests
  23. 23. Solution 1
  24. 24. Problem 2 Setting a new value in tag
  25. 25. Solution 2
  26. 26. Problem 3 Classical click is simple but how about right mouse button click?
  27. 27. Solution 3
  28. 28. Problem 4 Still can’t find a protractor method that fits your purposes?
  29. 29. Solution 4
  30. 30. Problem 5 Testing non-angular application with protractor?
  31. 31. Problem 6 Tests are good but don’t pass in IE
  32. 32. Performance
  33. 33. Problem One and Only Running e2e tests takes too much time
  34. 34. Solution 1 Use sharding configuration for running several browser instances
  35. 35. Solution 1
  36. 36. Solution 1 Note: sharding is per file so create several testing files
  37. 37. Solution 2 Disable ng-animate and css animations
  38. 38. Solution 3 The right balance between amount of s and s
  39. 39. Run & Debugging
  40. 40. Problem 1 Hard to debug the test
  41. 41. Solution 1 Integration with IDE such as Intellij/Webstorm
  42. 42. Problem 2 Something is wrong and you have no idea why
  43. 43. Solution 2 Interactive REPL Element explorer
  44. 44. Solution 2
  45. 45. Solution 2 Elementor
  46. 46. Problem 3 Run in CI in all major browsers
  47. 47. Solution 3 Use Sauce Labs with credentials specified directly in protractor config file.
  48. 48. Solution 3
  49. 49. Thanks! http://bolshchikov.net http://blog.bolshchikov.net http://il.linkedin.com/in/bolshchikov http://github.com/bolshchikov

×