How to find by text content in Cypress?

When using Cypress for automated testing, there are multiple ways to locate elements on the page. To determine if an element exists based on its text content, you can use the .contains() method. This method is powerful because it allows you to select elements based on their text content, whether static or dynamic.

Using the .contains() Method

.contains() can be used to find elements containing specific text. The basic syntax is:

javascript
cy.contains(content)

Here, content is the text you want to match.

Example

Suppose we have a button with the text "Submit". If you want to check if this button exists, you can write the test code as follows:

javascript
cy.contains('Submit').should('exist');

This line of code searches the entire DOM for any element containing the text "Submit" and verifies its existence.

Finding Elements by Type and Text

Sometimes, you may need to specify the element type to ensure you find the correct element. For example, if there are multiple elements with the same text on the page but you're only interested in the button, you can do this:

javascript
cy.contains('button', 'Submit').should('exist');

Here, 'button' specifies the element type, and 'Submit' is the text you want to match. This allows you to more accurately find the button.

Combining Selectors with .contains()

You can also combine selectors with the .contains() method to precisely locate elements. For example, if you know that the button containing the text is within a specific container, you can write:

javascript
cy.get('#formId').contains('button', 'Submit').should('exist');

Here, #formId is the ID of the container that holds the target button.

Summary

Through these methods, you can flexibly and accurately use Cypress to locate elements based on text content. This approach is particularly useful when the text content is dynamically generated or may change, as it does not rely on fixed HTML structure or attributes. This makes your tests more robust and adaptable to changes on the web page.