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.

• 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.

• 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!

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

• 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

Do not forge to add a star to my (work in progress) UI Testing Best Practices book on GitHub 😊