Cypress - Best Practices
6 likes4,647 views
The document outlines best practices for using Cypress, a testing framework that started its public beta in 2017. It discusses organizing tests, various strategies for managing user sessions, and emphasizes writing isolated specs without relying on UI interactions. Key strategies include stubbing requests, using static and dynamic users, and controlling application state programmatically.
Cypress - Best Practices
- 2. • Organizing Tests • Writing Tests • Logging In • Controlling State
- 4. First Commit June 5th, 2014 Today Public Beta Oct 9th, 2017
- 11. settings_spec.jsƭ Settings http://BASE_URL/#/settings Log out
- 18. • View Articles • View Article • View Author • View Comments • Log In • Register Logged InNot 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 InServer 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 - [email protected] / 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
- 40. Settings
- 41. cypress integration ƭ login_spec.js ƭ settings_spec.js support ƭ index.js ƭ 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