Open Source Ecosystems

Mastering UI Testing

You can find the slides of the talk here.

Goal of this repository

I made this repository to follow up with the best practices I highlighted during my talk at the Working Software conference.

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! Remember to use your testing tool as your primary development tool
the talk branch is helpful only for the day of the conference, do not consider it

There are four main commands:

npm run start: starts the (super simple) front-end app
npm run start:server: starts 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

Please note: if you have the Autolaunch extension for VS Code, it proposes you to launch these scripts automatically.

read the slides of the talk
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 😊

checkout the talk branch
launch all the scripts except for npx cypress open
you will launch npx cypress open as soon as you start showing the code at the talk
show cypress and VSCode side-by-side on the same screen
prepare the browser opened on the slides
if you need, take a look at the transcription.md file on the talk branch
take a look at the "How to Talk to Developers" talk by Ben Orenstein