Cypress - Best Practices

Slide 1

Slide 1 text

Best Practices @be_mann Brian Mann

Slide 2

Slide 2 text

• Organizing Tests • Writing Tests • Logging In • Controlling State

Slide 3

Slide 3 text

What is Cypress?

Slide 4

Slide 4 text

First Commit June 5th, 2014 Today Public Beta Oct 9th, 2017

Slide 5

Slide 5 text

gothinkster/realworld https://demo.realworld.io “…a medium.com clone”

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Organizing Tests

Slide 8

Slide 8 text

header_spec.js ƭ Not Logged In Logged In

Slide 9

Slide 9 text

login_spec.js ƭ Login http://BASE_URL/#/login

Slide 10

Slide 10 text

register_spec.js ƭ Register http://BASE_URL/#/register

Slide 11

Slide 11 text

settings_spec.js ƭ Settings http://BASE_URL/#/settings Log out

Slide 12

Slide 12 text

articles_spec.js ƭ Articles Tags http://BASE_URL/#/

Slide 13

Slide 13 text

article_spec.js ƭ Article http://BASE_URL/#/article/:slug Comments

Slide 14

Slide 14 text

author_spec.js ƭ Author http://BASE_URL/#/@:author ?

Slide 15

Slide 15 text

new_article_spec.js ƭ New Article http://BASE_URL/#/editor

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

• 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

Slide 19

Slide 19 text

Logging In

Slide 20

Slide 20 text

Edit Article Delete Article Favorite Article Settings Log Out Create Comment Delete Comment Create Article View Article View Comment Register Log In Server Database

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Organizing Tests

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

cypress integration ƭ login_spec.js 100% Confidence

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Settings Brittle Selectors Abstraction Reusable Decoupled What’s needed? Duplicated Code

Slide 40

Slide 40 text

Settings

Slide 41

Slide 41 text

cypress integration ƭ login_spec.js ƭ settings_spec.js support ƭ index.js ƭ commands.js

Slide 42

Slide 42 text

settings_spec.js login_spec.js

Slide 43

Slide 43 text

support/index.js support/commands.js

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Settings Commands (7 of 9) Failed at testing in isolation

Slide 46

Slide 46 text

Settings Commands (7 of 9) Failed at testing in isolation Added 0% more confidence ƭ login_spec.js 100% Confidence

Slide 47

Slide 47 text

Settings Commands (7 of 9) Accounted for 75% of the duration Failed at testing in isolation Added 0% more confidence

Slide 48

Slide 48 text

1. onFormSubmit 2. Reads form values

Slide 49

Slide 49 text

1. onFormSubmit 2. Reads form values 3. POST /api/users/login Request

Slide 50

Slide 50 text

1. onFormSubmit 2. Reads form values 3. POST /api/users/login 4. Success: Save Token Response

Slide 51

Slide 51 text

1. onFormSubmit 2. Reads form values 3. POST /api/users/login 4. Success: Save Token 5. On load, check for token

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

No Constraints

Slide 58

Slide 58 text

•Control Time: cy.clock() •Stub Objects: cy.stub() •Modify Stores: cy.window()