Cypress Tales: Effective E2E Testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Cypress Tales: Effective E2E Testing
slido.com
#armadajs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243581/nikola.png)
What this talk is?
- High level principles of testing (with Cypress) β¬οΈ
- Low level principles of Cypress testing β¬οΈ
- Opinionated π€π
What this talk is NOT?
- Detailed Cypress walkthrough πΆββοΈ
- Convincing you that you should test
- An ad π
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5499672/Screen_Shot_2018-11-18_at_3.12.05_PM.png)
Write tests.
Why test?
- Make sure software works
- And that it will work
- Future proof
Why test?
CONFIDENCE
Why test?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5499960/confidence.gif)
Why test?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6558072/giphy.gif)
Why test?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5499979/beyonce-confident.gif)
Why test?
BE SURE TO
TEST YOUR CODE
Not too many.
Code coverage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510263/Screen_Shot_2018-11-20_at_5.22.33_PM.png)
Code coverage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550417/Screen_Shot_2018-11-30_at_12.37.53_PM.png)
Code coverage
How much is enough?
Code coverage
How much is enough?
Β―\_(γ)_/Β―
Code coverage
How much is enough?
Β―\_(γ)_/Β― IT DEPENDS
Code coverage
YOU SHOULD HAVE IT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6515844/Screenshot_2019-09-07_at_18.25.27.png)
Mostly integration.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510408/smoking-testing-pyramid.jpg)
The "Smoking" Testing Pyramid
The Testing Square
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510453/testing-square.png)
The Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510465/testing-trophy-hq.png)
Static tests (analysis)
Flow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510508/flow_react.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510542/Screen_Shot_2018-02-12_at_9.27.50_PM.png)
ESLint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510512/eslint_react.png)
Static tests (analysis)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510541/Screen_Shot_2018-02-12_at_9.30.37_PM.png)
Check out
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550448/prettier-banner-light.png)
Unit tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510563/carbon__1_.png)
Integration tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5520255/carbon__4_.png)
E2E tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
What is
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
β
Let's see it π
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
$ npm install cypress
What is
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
- Takes snapshots πΈ
- Time travel π
- Easy debugging π
- Native access π₯
- Cypress Dashboard πΊ
Pros:
What is
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Cons:
- Not easy to talk to outside world π
- No cross-browser testing
What is
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Cons:
- Not easy to talk to outside world π
No cross-browser testing
(coming soon)
Cypress Best Practices
Cypress Best Practices
Test login flow
Cypress Best Practices
Test login flow
BUT
ONLY ONCE
Login test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547956/carbon__13_.png)
Login test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550590/Screen_Shot_2018-11-29_at_9.07.01_PM.png)
Viewing the settings page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547961/carbon__14_.png)
Viewing the settings page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547961/carbon__14_.png)
Login without UI test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547975/carbon__15_.png)
Page Object pattern
Page Object pattern
Cypress Custom Commands
Adding a Cypress Custom Command
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547987/carbon__16_.png)
Login without UI test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547994/carbon__17_.png)
Testing Login Flow only once
gives you
- More speed π
- Testing in isolation π
- Less complex tests πββοΈ
Cypress Best Practices
DO NOT USE
UI
TO POPULATE DATA
Cypress Best Practices
CLEAN UP STATE
BEFORE
TESTS RUN
Selenium-based tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5528585/carbon__11_.png)
In Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5528585/carbon__11_.png)
There's no guarentee this will run
Clean up state before tests run
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5548031/carbon__19_.png)
Cypress Best Practices
START A WEB SERVER PRIOR TO RUNNING CYPRESS
Start a web server prior to running Cypress
$ npm start & cypress run
Start a web server prior to running Cypress
π ββοΈπβπ ββοΈ
$ npm start & cypress run
Start a web server prior to running Cypress
$ npm start & cypress run
π ββοΈπβπ ββοΈ
$ npm start & wait-on http://localhost:8080 \
& cypress run
Start a web server prior to running Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5528660/carbon__13_.png)
$ npm test
Cypress Best Practices
Check out more at:
Cypress + React = β€οΈ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5538554/react-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Snapshot testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541015/cypress-plugin-snapshots.png)
Snapshot testing
HTML
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541247/carbon__2_.png)
Snapshot testing
JSON response
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541315/carbon__6_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541300/carbon__5_.png)
Redux
exposing the store
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541327/carbon__7_.png)
Redux
dispatching action objects
Redux
dispatching actions from our code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541366/carbon__9_.png)
Redux + Snapshots
checking state with snapshot testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541445/carbon__10_.png)
React Unit Tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5552966/carbon__22_.png)
React Unit Tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5552965/react-unit-test.png)
File upload
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550345/carbon__20_.png)
File upload
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541500/Screen_Shot_2018-11-28_at_2.13.22_PM.png)
BUT WAIT β
BUT WAIT β
Β
YOU JUST STUBBED
A SERVER RESPONSE
BUT WAIT β
Β
YOU JUST STUBBED
A SERVER RESPONSE
Β
IT'S NOT A "TRUE" E2E TEST?! π€
STUBBING REQUESTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541527/Screen_Shot_2018-11-28_at_2.25.17_PM.png)
REAL REQUESTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541529/Screen_Shot_2018-11-28_at_2.24.40_PM.png)
Writing E2E tests in Cypress
MEANS WRITING BOTH
-
E2E tests ππβ°
-
integration tests π»ππ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5499672/Screen_Shot_2018-11-18_at_3.12.05_PM.png)
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
cheap
π΅π°
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
cheap
ππ¨
π’
π΅π°
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
cheap
ππ¨
π’
π΅π°
BIG PROBLEMS π€―
Small problems π
Integration tests provide best balance of:
- π΅
- ππ¨
- π
That's why E2E testing in Cypress is:
- cheap π΅
- fast ππ¨
- fun π
$ npm install cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5551602/cypress-turning.jpg)
Novi Sad JavaScript community
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5221328/nsjs-logo-wide.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5221328/nsjs-logo-wide.png)
e2e testing with Cypress
By Nikola Δuza
e2e testing with Cypress
Why and how to do (e2e) tests with Cypress.
- 3,115