End-to End Testing with Cypress

Cypress installation

Cypress is an excellent tool for writing end-to-end tests. It was explicitly created with modern web applications in mind, so it’s great at handling dynamic apps that perform many API requests. If we didn’t add Cypress while scaffolding a project with VueCLI, we could do so by running vue add e2e-cypress. This command initializes @vue/cli-plugin-e2e-cypress, installs appropriate libraries, creates the cypress.json config file, and create the tests/e2e directory with Cypress-related files. We’ll be able to run tests by running npm run test:e2e or yarn test:e2e. Be aware that if we’re on Linux, we’ll need to install additional dependencies on our system. We can read more about it in installation docs. If you’ve never used Cypress before, you can read more about it in the installation docs.

The Testing Library that we’ve used before with Vue Test Utils also offers utilities for Cypress. We can install it by running one of the commands below.