Effective E2E Testing with Cypress.io
What will you learn?
- Learn Cypress Best Practices
- Advances use of Cypress
- Running Cypress with a backend
Topics
- Why test?
- What about code coverage?
- What kinds of tests to write?
- Cypress Best Practices
- Cypress + React = π
Why test?
Why test?
- Make sure software works
- And that it will work
- Future proof
Why test?
CONFIDENCE
Why test?
Why test?
Why test?
Why test?
BE SURE TO
TEST YOUR CODE
What about code coverage?
Code coverage
Code coverage
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
What kinds of tests to write?
The "Smoking" Testing Pyramid
The Testing Square
The Testing Trophy
Static tests (analysis)
Flow
ESLint
Static tests (analysis)
Check out
Unit tests
Integration tests
E2E tests
Cypress Best Practices
Cypress Best Practices
Test login flow
Cypress Best Practices
Test login flow
BUT
ONLY ONCE
Login test example
Login test example
Viewing the settings page
Viewing the settings page
Login without UI test example
Page Object pattern
Page Object pattern
Cypress Custom Commands
Adding a Cypress Custom Command
Login without UI test example
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
In Cypress
There's no guarentee this will run
Clean up state before tests run
Cypress Best Practices
START A WEB SERVER PRIOR TO RUNNING CYPRESS
Start a web server prior to running Cypress
$ npm start & cypress runStart a web server prior to running Cypress
π ββοΈπβπ ββοΈ
$ npm start & cypress runStart a web server prior to running Cypress
$ npm start & cypress runπ ββοΈπβπ ββοΈ
$ npm start & wait-on http://localhost:8080 \
& cypress runStart a web server prior to running Cypress
$ npm testCypress Best Practices
Check out more at:
Cypress + React = β€οΈ
Snapshot testing
Snapshot testing
HTML
Snapshot testing
JSON response
Redux
exposing the store
Redux
dispatching action objects
Redux
dispatching actions from our code
Redux + Snapshots
checking state with snapshot testing
React Unit Tests
React Unit Tests
File upload
File upload
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
REAL REQUESTS
Writing E2E tests in Cypress
MEANS WRITING BOTH
-
E2E tests ππβ°
-
integration tests π»ππ
Testing Trophy
Testing Trophy
cheap
π΅π°
Testing Trophy
cheap
ππ¨
π’
π΅π°
Testing Trophy
cheap
ππ¨
π’
π΅π°
BIG PROBLEMS π€―
Small problems π
Integration tests provide best balance of:
- π΅
- ππ¨
- π
That's why E2E testing in Cypress is:
- cheap π΅
- fast ππ¨
- fun π
$ npm install cypressLet's see it π
