Cypress - how to find by text content?

Question

In Cypress, I want to select a button from a group of buttons based on its text-content. How can I do it? Here is my approach:

export const getCustomerButton = (         


        

Answer 1

Or maybe an even slicker solution is to use this:

cy.contains('YOUR_BUTTON_CLASS', 'Customer');

This can be done since contains() can hold 2 arguments. And if it gets two arguments the first one is always the element and the second the text.

Answer 2

Another option that's not mentioned in the previous answers here.

Use testing-library/cypress-testing-library

After the installation, just import it in cypress' commands.js:

import '@testing-library/cypress/add-commands'

And in your tests

cy.findAllByText("Jackie Chan").click();
cy.findByText("Button Text").should("exist");
cy.findByText("Non-existing Button Text").should("not.exist");
cy.findByLabelText("Label text", { timeout: 7000 }).should("exist");
cy.get("form").within(() => {
  cy.findByText("Button Text").should("exist");
});
cy.get("form").then((subject) => {
  cy.findByText("Button Text", { container: subject }).should("exist");
});

This is pretty straightforward and easy to use. We use this in our production site along with react testing library. Highly recommend :)

Answer 3

This will yield the DOM element with YOUR_BUTTON_CLASS which contains text 'Customer'. Is that what you're looking for?

cy.get('YOUR_BUTTON_CLASS').contains('Customer');

Here the documentation for .contains cypress command.