Cypress - how to find by text content?
This code 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.
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.
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 :)