Cypress Tales: Effective E2E Testing
Cypress Tales: Effective E2E Testing
slido.com
#armadajs
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 π
Write tests.
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
Not too many.
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
Mostly integration.
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
What is
β
Let's see it π
$ npm install cypressWhat is
- Takes snapshots πΈ
- Time travel π
- Easy debugging π
- Native access π₯
- Cypress Dashboard πΊ
Pros:
What is
Cons:
- Not easy to talk to outside world π
- No cross-browser testing
What is
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
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 cypress
Novi Sad JavaScript community
