Validating if a DOM element is visible on the view

In most web applications, there is at least one element/view that is shown based on a certain condition. Otherwise, it is hidden. When it comes to making sure the end users see the right content in the right situations, it becomes necessary to test them well. In this recipe, you are going to learn how to check if an element is visible on the DOM.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cy-element-visibility inside the cloned repository. However, the e2e tests are in the folder start/apps/chapter11/ng-cy-element-visibility-e2e. In this recipe, we are going to modify files in both folders. Let’s run the e2e tests first by following these steps:

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 run the e2e tests for the project:

   npm run e2e ng-cy-element-visibility...