Writing your first Cypress test

If you have been writing E2E tests already, you might have been doing this using Protractor. Working with Cypress is a completely different experience, though. In this recipe, you’ll set up Cypress with an existing Angular application and write your first E2E test with Cypress.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cypress-starter inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cypress-starter
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 11.1: ng-cypress-starter app running on localhost:4200

How to do it…

The app we’re working with is a simple counter application. It has minimum and maximum values and some buttons that...