Get Started with Cypress and Angular

Cypress is like Protractor for Angular applications, but Cypress is much faster to run and easier to debug. Cypress not only is good at the automated end-to-end testing that is independent from our applications, but also is capable of unit testing against methods in model classes, service classes, and so on. At this point, testing Angular components using Cypress may need a little bit of extra work (tutorial 1, tutorial 2, tutorial 3), but it’s still doable.

In this introductory article, we will go over some basics about adding Cypress to an Angular project, configuring TypeScript support, and setting up the continuous integration (CI) pipeline. In the end, I will summarize some useful resources for learning and working with Cypress.

Add Cypress to an Angular Project

It is straightforward to add Cypress to an Angular project. We only need to install an npm package cypress using the following command.

npm i -D cypress

The cypress package includes a desktop app and the Cypress binary. It may take a few minutes to run this command at the first time, because the package installation needs to download the Cypress binary. The Cypress binary is saved in a global cache directory, so installing this package in the future will be much faster for the same version.