Front-end Testing on Steroids (V2)
The first version of this talk was about the main reasons that make UI Testing hard, this second part is more about how to leverage Cypress to improve front-end development productivity.
Please note: this is the spoken version of my "Front-end productivity boost: Cypress as your main development browser" article.
Talk walkthrough
- Replacing E2E tests with UI Integration tests
- Controlling the clock to test long waitings in a while
- Testing corner cases by simulating network requests failure
- Leveraging Chrome and React DevTools in UI tests
- Using Cypress as the main development browser
During the talk, some interesting Cypress' features will be shown:
- The Cypress UI
- The amazing Test Runner
- Actions are asynchronous by default
- Elements retrieval by contents
- The test and app use the same console.log
- Time-travelling the test steps and pausing the test
Take a look at the complete authentication.e2e.test test and the authentication.integration.test one. They contains everything shown in the talk and a lot of comments.
About this repository
- I bootstrapped this project with create-react-app
- it contains a super-simple authentication form
- it contains a fake server with artificial delays to simulate E2E testing slowness
- it runs the tests in Travis too to show a complete UI Testing project
- all the code is well commented, with a lot of links to the slide explanations
- I wrote the front-end app with a outside-in approach writing the acceptance test at the beginning.
I have not tested it manually at all!
How to play with it
There are four main commands:
-
npm run start
: starts the (super simple) front-end app and the (fake) back-end app
-
npm run cy:open
: opens the Cypress UI
-
npm test
: launches both the front-end and the back-end apps, and runs cypress in the non-visual
mode. Remember killing the manually launched apps since it uses the same ports
How to read it
- launch the front-end app and take a look at the
src/App.js
file
- launch both the back-end app and Cypress
- launch the
authentication.integration.test.js
in Cypress and watch it running
- open the
cypress/integration/authentication.integration.test.js
and explore it
- then, move to the
cypress/integration/authentication.e2e.test.js
- in the end: run the
npm test
command
UI Testing Best Practices book
Do not forge to add a star to my (work in progress) UI Testing Best
Practices book on GitHub 😊