Best practices for writing end-to-end testing in Cypress including organizing tests, testing logging in through authorization, and controlling state.

1. Best Practices
@be_mannBrian 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 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
- 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