How to check if an Element exists using Cypress?

Cypress is a modern end-to-end JavaScript-based framework for testing web applications. It was designed to make it easier for developers to write and run tests that simulate user interaction with a web application. 

Let’s understand in depth why Cypress is preferred and how to check if an element exists using the Cypress Check if Element Exists Command.

Why choose Cypress for extensive testing? 

Cypress testing has several key features and advantages that make it an attractive choice for extensive testing:

• Live Reload: Cypress automatically reloads the page after each test, making it easy to review test results quickly.
• Autowait: Cypress automatically waits for items to appear and actions to complete, eliminating the need to add manual wait commands to tests.
• Debugging Tools: Cypress debugging includes a powerful suite of tools, such as Timed Debugging, making it easier to understand what is happening in your tests.
• Easy Setup: Cypress has a straightforward setup process requiring no additional setup or configuration.
• Integration with CI/CD pipelines: Cypress integrates seamlessly with popular CI/CD pipelines, allowing you to test in a continuous integration environment.

What are Cypress Elements?

In web applications, elements refer to the individual HTML elements that make up the structure and content of a web page. These elements include buttons, text boxes, links, images, etc. Each element has its attributes, such as id, class, and style, that can be used to select it and interact with CSS or JavaScript selectors. 

• Elements are an important part of web applications, as they define the structure and behavior of a page. 
• By selecting and interacting with elements, you can write automated tests to verify that the web application behaves as expected for all users.
• In Cypress, elements refer to the HTML elements of your website that you want to interact with or test. 
• To interact with or test these elements, select them with a selector, like in CSS. 

 How are Cypress elements used in web applications?

Cypress elements simulate user interactions and test application behavior in a web application. You can write tests that simulate real user interactions with your application by selecting elements on the page using selectors and interacting with them using Cypress commands. 

Here is a simple example showing how Cypress elements can be used in a web application:

Step 1

cy.visit('https://example.com/login');

This example uses the cy.visit() command  to load the web application login page. 

Step 2 

cy.get('#username').type('user@example.com');
cy.get('#password').type('password');

Then the cy.get() command is used to select the username and password input fields and the .type() method is used to fill in the values. 

Step 3 

cy.get('#submit-button').click();
cy.contains('Login successful');

Finally, click the Submit button and use the cy.contains() command  to see if the text “Connection successful” appeared on the page.  

Cypress Check if Element Exists Command

In Cypress cy.get() method is one of Cypress’s most commonly used methods for interacting with elements on a web page. It allows you to retrieve an element based on its CSS selector and then perform actions or confirm its status.

Explanation of the check if element exists command

Cypress provides several ways to verify that an element is present on a page. You can use the cy.get() method to get an element and check its length to see if it exists.

Here is an example:

cy.get('#element-id').then(($el) => {
if ($el.length) {
// Element exists, do something
} else {
// Element does not exist, do something else
}
});

You can also use the cy.contains() method to search for elements that contain a specific text and check the length of the returned elements to see if there are any:

cy.contains('Text of element to search for').then(($el) => {
if ($el.length) {
// Element exists, do something
} else {
// Element does not exist, do something else
}
});

If you just need to know if an element exists and you don’t need to interact with it, you can use the cy.get() method with .should(‘exist’) or .should(‘not.exist’ ) . 

Commands:

cy.get('#element-id').should('exist');
cy.get('#element-id').should('not.exist');

Benefits of using the Cypress Check if Element Exists Command

The “Check if element exists” command in Cypress has several advantages:

• Improved test reliability
• Improved readability of tests
• Improved Test Maintainability
• Improved debugging

Syntax for the check if element exists command

• Cypress provides the. should(‘exist’) and. should (‘not. Exist’) commands to determine if an element exists on a page. 
• These commands provide a convenient alternative to using a. then () and checks the element’s. length property, providing a more concise and readable syntax for this type of assertion.
• The “Cypress test element does exist” command is used to verify that a specific element exists on a web page. 
• In Cypress, you can use the “.exists()” method to check if an element exists. This method returns a boolean value, indicating whether the element exists.

Here’s an example of how you might use the “Cypress test element does exist” command:

 cy.get('#element-id').should('exist');

In this example, 

• “. get()” method is used to target the element with the ID of “element-id”. 
• “. should()” method is then used to assert the element, in this case, that it exists.

If the element does not exist, the test will fail and return an error message indicating that the element was not found. You can also use the “.should(‘not.exist’)” method to verify that an element does not exist on a page. 

 cy.get('#element-id').should('not.exist')

In this example, 

• cy.get(‘#element-id’) method is used to retrieve the element with the id of ‘element-id’.
• .should(‘not.exist’) command is then used to assert that the element does not exist on the page.

If the element does not exist, the test will pass. If the element does exist, the test will fail, and an error will be displayed in the Cypress test runner.

Use case scenarios for check if element exists command

Here are a few use case scenarios for the “check if element exists” command in Cypress:

• Verifying the existence of a critical element on a page
• Validating the display of an element after an action
• Testing element visibility and accessibility
• Debugging failing tests

Using the Cypress Check if Element Exists Command

Step-by-step process to check if an element exists in Cypress

1. Load the page: Use the cy.visit command to load the page you want to test.

For example:

cy.visit('http://localhost:3000/index.html')

2. Select the element: Use the cy.get command to select the element you want to check if it exists.

For example, if you want to check if an element with the ID “header” exists:

 cy.get('#header')

3. Make the assertion: Use the .should(‘exist’) command to make an assertion that the element exists on the page. For example:

 cy.get('#header').should('exist')

4. Run the test: Run the test in the Cypress Test Runner to see if the element exists.

Running Cypress Tests on BrowserStack

BrowserStack allows you to run Cypress tests on the latest browsers like Chrome, Firefox, Edge, and Safari (Webkit). Start running tests on 30+ versions of the latest browsers across Windows and macOS with BrowserStack. Use instant, hassle-free Cypress parallelization to run Cypress Parallel tests and get faster results without compromising accuracy. Detect bugs before users do by testing software in real user conditions.

Start Cypress Testing