Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cypress - Best Practices

E83ca48738a2ca5ed91e3d410bbae530?s=47 Brian Mann
February 27, 2018

Cypress - Best Practices

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

E83ca48738a2ca5ed91e3d410bbae530?s=128

Brian Mann

February 27, 2018
Tweet

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”

  6. None
  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

  16. None
  17. None
  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
  26. None
  27. Organizing Tests

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. cypress integration ƭ login_spec.js 100% Confidence

  36. None
  37. None
  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

  44. None
  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
  52. None
  53. None
  54. None
  55. None
  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