Cypress - Best Practices

Best practices in writing tests with Cypress including how to organize tests, strategies for testing logging in, and controlling state.

Transcript

1. Best Practices @be_mann Brian Mann
2. • Organizing Tests • Writing Tests • Logging In • Controlling State
3. What is Cypress?
4. First Commit June 5th, 2014 Today Public Beta Oct 9th, 2017
5. gothinkster/realworld https://demo.realworld.io “…a medium.com clone”
7. Organizing Tests
8. header_spec.js ƭ Not Logged In Logged In
9. login_spec.js ƭ Login http://BASE_URL/#/login
10. register_spec.js ƭ Register http://BASE_URL/#/register
11. settings_spec.js ƭ Settings http://BASE_URL/#/settings Log out
12. articles_spec.js ƭ Articles Tags http://BASE_URL/#/
13. article_spec.js ƭ Article http://BASE_URL/#/article/:slug Comments
14. author_spec.js ƭ Author http://BASE_URL/#/@:author ?
15. new_article_spec.js ƭ New Article http://BASE_URL/#/editor
18. • View Articles • View Article • View Author • View Comments • Log In • Register Logged In Not Logged In • Settings • Log Out • Create Article • Edit Article • Delete Article • Favorite Articles • Create Comments • Delete Comments
19. Logging In
20. Edit Article Delete Article Favorite Article Settings Log Out Create Comment Delete Comment Create Article View Article View Comment Register Log In Server Database
21. Strategies 1 Stub Requests Control the network - cy.server() - cy.route() - Set status codes - Set response bodies - Test edge cases (empty views / 500) Fast, Easy, Flexible No Server / DB Not True E2E Requires Fixtures
22. Strategies 1 Stub Requests Fast, Easy, Flexible No Server / DB Not True E2E Requires Fixtures 2 Static User Shared User + Credentials - OAuth Login (Github / Google) - Pre-seeded Databases - joe@example.com / joe
23. Strategies 1 Stub Requests Fast, Easy, Flexible No Server / DB Not True E2E Requires Fixtures 2 Static User Real Session E2E Shares Test State Seed the DB Requires Server
24. Strategies 1 Stub Requests Fast, Easy, Flexible No Server / DB Not True E2E Requires Fixtures 2 Static User Real Session E2E Shares Test State Seed the DB Requires Server 3 Dynamic User New User for each Test - Modify DB within Tests - Query DB within Tests
25. Strategies 1 Stub Requests Fast, Easy, Flexible No Server / DB Not True E2E Requires Fixtures 2 Static User Real Session E2E Shares Test State Seed the DB Requires Server 3 Dynamic User No State Mutations Slow / Complex DB Setup / Teardown Flexible / Powerful
27. Organizing Tests
35. cypress integration ƭ login_spec.js 100% Confidence
38. Login Steps Settings
39. Settings Brittle Selectors Abstraction Reusable Decoupled What’s needed? Duplicated Code
40. Settings
41. cypress integration ƭ login_spec.js ƭ settings_spec.js support ƭ index.js ƭ commands.js
42. settings_spec.js login_spec.js
43. support/index.js support/commands.js
45. Settings Commands (7 of 9) Failed at testing in isolation
46. Settings Commands (7 of 9) Failed at testing in isolation Added 0% more confidence ƭ login_spec.js 100% Confidence
47. Settings Commands (7 of 9) Accounted for 75% of the duration Failed at testing in isolation Added 0% more confidence
48. 1. onFormSubmit 2. Reads form values
49. 1. onFormSubmit 2. Reads form values 3. POST /api/users/login Request
50. 1. onFormSubmit 2. Reads form values 3. POST /api/users/login 4. Success: Save Token Response
51. 1. onFormSubmit 2. Reads form values 3. POST /api/users/login 4. Success: Save Token 5. On load, check for token
56. Best Practices Don’t use the UI to build up state Set state directly / programmatically Don’t use page objects to share UI knowledge Write specs in isolation, avoid coupling Don’t limit yourself trying to act like a user You have native access to everything
57. No Constraints
58. •Control Time: cy.clock() •Stub Objects: cy.stub() •Modify Stores: cy.window()
59. Redux Store
60. docs.cypress.io www.cypress.io