Checking Element Existence with Cypress: A Step-by-Step Guide

In web testing, verifying the existence of elements using Cypress.io is crucial. It ensures that dynamic elements, like buttons or forms, appear as expected, improving test reliability and user experience. This practice helps catch issues early, making debugging easier and maintaining test accuracy.

Setting Up Cypress IO

Here are the steps to set up Cypress:

Install Node.js: Ensure you have Node.js installed on your machine. You can download it from nodejs.org.
Initialize npm: In your project directory, run:
```
npm init -y
```
Install Cypress: Add Cypress as a development dependency:
```
npm install cypress --save-dev
```
Open Cypress: Run Cypress for the first time:
```
npx cypress open
```
Configuration: Cypress will create a default folder structure. You can customize the cypress.json file for configuration settings.

That’s it! You’re ready to start writing tests in the cypress/integration folder.

Basic Commands in Cypress IO

Here are the basic commands in Cypress IO for checking if an element exists:

cy.get(): Selects an element.
```
cy.get('#element-id')
```
.should('exist'): Asserts that the selected element exists.
```
cy.get('#element-id').should('exist')
```

.then(): Checks the length of the selected element.

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

cy.contains(): Finds an element containing specific text.
```
cy.contains('text').should('exist')
```

These commands help ensure that elements are present on the page during testing.

Using cy.get() Method

To use the cy.get() method in Cypress to select elements and check their existence, follow these steps:

Select Elements:

By CSS Selector:

cy.get('.class-name'); // Selects elements with the specified class
cy.get('#element-id'); // Selects the element with the specified ID
cy.get('tag-name'); // Selects elements with the specified tag
cy.get('[attribute=value]'); // Selects elements with the specified attribute

Check Existence:

Using .should():

cy.get('.class-name').should('exist'); // Asserts that elements with the specified class exist
cy.get('#element-id').should('be.visible'); // Asserts that the element with the specified ID is visible

Using .then():

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

These commands allow you to interact with and verify the presence of elements in your Cypress tests.

Using .should(‘exist’) Assertion

To verify the presence of an element in Cypress using the .should('exist') assertion, follow these steps:

Select the element: Use a Cypress command like cy.get() to select the element.
Apply the assertion: Chain the .should('exist') assertion to the command.

Here’s a quick example:

cy.get('#elementID').should('exist');

This code checks if the element with the ID elementID exists in the DOM.

Handling Non-Existent Elements

Here are some strategies for handling scenarios where an element does not exist using Cypress:

Conditional Checks:

cy.get('selector').then(($el) => {
  if ($el.length) {
    // Element exists, perform actions
  } else {
    // Element does not exist, handle accordingly
  }
});

Assertions:

cy.get('selector').should('not.exist');

Element Polling:

cy.get('selector', { timeout: 10000 }).should('exist');

Custom Commands:

Cypress.Commands.add('checkElement', (selector) => {
  cy.get('body').then(($body) => {
    if ($body.find(selector).length) {
      // Element exists
    } else {
      // Element does not exist
    }
  });
});

These methods help ensure your tests are robust and handle scenarios where elements may or may not be present.

Practical Examples

Here are some practical examples and code snippets to check if an element exists using Cypress:

Using `cy.get()` and `.then()`

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

Using `cy.get()` with `.should('exist')`

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

Using `cy.get()` with `.should('not.exist')`

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

Conditional Testing with `cy.get()`

cy.get('body').then(($body) => {
  if ($body.find('.banner').length) {
    // Banner exists, do something
  } else {
    // Banner does not exist, do something else
  }
});

These snippets should help you verify the presence of elements in your Cypress tests.

Cypress IO Element Existence Methods

Cypress IO provides several methods to check if an element exists, including `cy.get()` with `.then()`, `.should(‘exist’)`, and conditional testing. These methods help ensure robust tests that handle scenarios where elements may or may not be present.

Using `cy.get()` with `.then()`

Using `cy.get()` with `.then()` allows for conditional testing based on the existence of an element. For example:

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

`cy.get()` with `.should(‘exist’)`

`cy.get()` with `.should(‘exist’)` is a more concise way to check for an element’s existence. For example:

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

`cy.get()` with `.should(‘not.exist’)`

Conversely, using `.should(‘not.exist’)` checks if an element does not exist. For example:

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

Conditional Testing

Conditional testing with `cy.get()` can be used to check for the presence of specific elements on a page. For instance:

cy.get('body').then(($body) => { if ($body.find('.banner').length) { // Banner exists, do something } else { // Banner does not exist, do something else } });

Cypress IO’s Methods for Checking Element Existence

Cypress IO’s methods for checking element existence provide flexibility and reliability in testing scenarios where elements may or may not be present. By using these methods, developers can write robust tests that accurately reflect the behavior of their application.

Sep 30, 2024
Roderick Webb
No Comments