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
:
- Open the project in VS Code.
- Open the terminal and run
npm install
to install the dependencies of the project. - Once done, run
npm run cypress:test
.
This should run the app at https://localhost:4200
and should open the Cypress window, as follows:
Now that we have the app and the Cypress tests running locally, let's see the steps of the recipe in the next section.