Switch to using Cypress for your end-to-end Angular tests

With the end in sight for Protractor’s integration with Angular, now is a good time to make the switch to something else.

Protractor has been the bedrock of End-To-End testing in Angular since the days of AngularJS, but as part of the Angular team’s decision to remove AngularJS support by December 2021, it was announced that Protractor will be removed from future releases.

Based on the Angular team’s own research, it seems that Cypress is the most used end-to-end testing framework out there, and I’ll show you the simplest and easiest way to replace Protractor with Cypress for your Angular project.

To get started, run the following command in the root folder of your project:

ng add @cypress/schematic

This will run a Schematic that will remove your protractor-related files and add a Cypress folder to your project. Your folder structure will now look something like this:

my-angular-app/
— src/
— — app/…
— cypress/
— — integrations/
— — support/

This folder structure separates the end-to-end tests from the application itself, and follows the suggested folder structure when creating apps that use Protractor.

You can read more about the official Cypress Angular Schematic here: Migrating from Protractor to Cypress