Writing Cypress tests

In this section, we will start writing simple Cypress tests to see how fun and easy it is to write tests using Cypress. We will start the tests by adding a test attribute in an HTML tag in the authentication form. We are going to edit the auth-form.component.html file to write the test-id attribute. Here is what was changed in the auth-form.component.html line:

<mat-card-title data-cy="auth-title">{{title}}</mat-card-title>

You can see the attribute we added in the preceding code. data-cy is an attribute for the test ID that Cypress will use to target the HTML element we want to test.

Now that we’ve added our first test ID, let’s go to the e2e folder inside the cypress directory and create a new file. The filename needs to contain .cy. Name the new file anti-heroes.cy.ts and then add the following code:

/// <reference types="cypress"/>
describe("Anti Heroes Page", () => {
  ...