Validating if a DOM element is visible on the view

In the previous recipe, we learned how to install and configure Cypress in an Angular app. There might be different cases in your application where you'd want to see if an element is visible on the DOM or not. In this recipe, we'll write some tests to identify if any elements are visible on the DOM.

Getting ready

The project for this recipe resides in chapter11/start_here/cypress-dom-element-visibility:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run npm run cypress:test.

This should run the app at https://localhost:4200 and should open the Cypress window, as follows:

Figure 11.4 – Cypress tests running for the cypress-dom-element-visibility app

Now that we have the app and the Cypress tests running locally, let's see the steps of the recipe in the next section.

How to do...