Download to read offline
UI Tests Are Fun To Write (If You Write Them Right)
- 1. UITests Are FuntoWrite! Seth Petry-Johnson @spetryjohnson github.com/spetryjohnson
- 3.
- 5. UI tests provestuff works where it matters: in the browser
- 6. UI tests provestuff works where it matters: in the browser
- 7. "When I firststarted writing UI tests, I hated them. Now, I kind of like them. They're fun." - A developer on my team
- 10. Today's agenda •When touse a UI test – and when not to •How we use the PageObject pattern •Creating test data withTest Helpers •Writing resilient tests
- 11. When should youwrite a UI test?
- 12. When should youwrite a UI test? Only when you can't write a test instead
- 13. Types ofTests UI /Functional Integration Data Unit
- 14. Refactor UI codeto make it unit-testable
- 15. Refactor UI codeto make it unit-testable
- 16. Refactor UI codeto make it unit-testable
- 17. Refactor UI codeto make it unit-testable
- 18. Types ofTests UI /Functional Integration Data Unit Use unit tests for… •Property-based testing of view models •Formatting •Calculations
- 19. Types ofTests UI /Functional Integration Data Unit Use data/integration tests to validate… •Database updates •File system changes •Email delivery •Any externally-visible side effects of a piece of code
- 20. Types ofTests UI /Functional Integration Data Unit Use data/integration tests to validate… •Database updates •File system changes •Email delivery •Any externally-visible side effects of a piece of code
- 21. Types ofTests UI /Functional Integration Data Unit
- 22. Types ofTests UI /Functional Integration Data Unit
- 23. Types ofTests UI /Functional Integration Data Unit
- 24. Types ofTests UI /Functional Integration Data Unit
- 25. Types ofTests UI /Functional Integration Data Unit
- 26. Types ofTests UI /Functional Integration Data Unit
- 27. Types ofTests UI /Functional Integration Data Unit
- 28. Types ofTests UI /Functional Integration Data Unit Use UI tests for… •Validating that all UI elements work together •Testing user interaction rather than business rules
- 29. Setting up aUI test Initial State Who's Logged In? Initial Navigation Assert()
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 41.
- 42.
- 43. PageObject (it’s notjust for “pages”!)
- 44. Setting up aUI test Initial State Who's Logged In? Initial Navigation Assert()
- 45. Setting up aUI test Initial State Who's Logged In? Initial Navigation Assert()
- 46. Setting up aUI test Initial State Who's Logged In? Initial Navigation Assert()
- 47. Setting up aUI test Initial State Who's Logged In? Initial Navigation Assert()
- 48. Setting up aUI test Initial State Who's Logged In? Initial Navigation Assert()
- 50.
- 51. Test Data Dilemma:Pre-staged data
- 52. Test Data Dilemma:Pre-staged data
- 53. Test Data Dilemma:Pre-staged data
- 54. Test Data Dilemma:Pre-staged data
- 55. Test Data Dilemma:Pre-staged data
- 56. Test Data Dilemma:Pre-staged data
- 57. Test Data Dilemma:Pre-staged data
- 58. Each test should createits own test data
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. Creating test-specific dataw/Test Helpers •Don't "new up" test data by hand – use a helper! •Tests only specify the values that impact the test
- 71.
- 72. Pre-existing data Tests easierto write / harder to maintain Managing the database is a PITA Painful when tests need to change data Data created per-test Tests easier to maintain Data creation helpers are a must! Teardown / rollback scripts are necessary
- 73. Do not useside effects of one test as the starting point for another!
- 74. Test Data anti-pattern Submit "NewWidget" form Load & Submit "Edit Widget" form Submit "Delete Widget" form
- 75. Test Data anti-pattern Submit "NewWidget" form Load & Submit "Edit Widget" form Use Widget Submit "Delete Widget" form
- 76. Test Data anti-pattern Submit "NewWidget" form Load & Submit "Edit Widget" form Use Type 1 Widget Submit "Delete Widget" form
- 77. Test Data anti-pattern Submit "NewWidget" form Load & Submit "Edit Widget" form Use Type 1 Widget Submit "Delete Widget" form
- 78. Test Data anti-pattern Submit "NewWidget" form Load & Submit "Edit Widget" form Use Type 1 Widget Submit "Delete Widget" form
- 79. Test Data anti-pattern Submit "NewWidget" form Load & Submit "Edit Widget" form Use Type 1 Widget Submit "Delete Widget" form
- 80. Test Data anti-pattern Submit "NewWidget" form Load & Submit "Edit Widget" form Use Type 1 Widget Submit "Delete Widget" form
- 81. Writing ResilientTests Use test-specificIDs, classes, & data attributes to simplify locators
- 82. Complex selectors areNOT fun!
- 83. Use test-specific CSSclasses & IDs
- 84. LocatorTree of Life Fruitat the top is bitter; eat in moderation only! Fruit at the bottom is tasty and healthy – eat your fill!
- 85. LocatorTree of Life Fruitat the top is bitter; eat in moderation only! Fruit at the bottom is tasty and healthy – eat your fill!
- 86. LocatorTree of Life Fruitat the top is bitter; eat in moderation only!
- 87. LocatorTree of Life Usethese locators w/ test-specific markers for extremely resilient tests
- 88. Takeaway #1 Have adeliberate test strategy; use UI tests to plug specific gaps left by lower-level tests
- 89. Takeaway #2 Use thePageObject pattern to create an app-centric API for tests to consume
- 90. Takeaway #3 Tests createtheir own data using helpers; Remember Chekhov's Gun!
- 91. Have fun testing! 1.Have a deliberate test strategy – only UI test what you can't unit test instead 2. Use PageObjects to create application-centric, page-specific test APIs 3. Tests create their own data using helpers; remember Chekhov's Gun! github.com/spetryjohnson @spetryjohnson / seth@petry-johnson.com