Cypress - how to find by text content?
JavascriptCypressEnd to-EndJavascript Problem Overview
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 = () => getNavigationSidenav()
.find('mat-expansion-panel-header')
.each(($el, index, $list) => {
const text = $el.find('.mat-content > mat-panel-title').text();
if (text === 'Customer') {
return $el;
}
return null;
});
The problem I have now is that I have to filter out the nulls from the element array. Is there a less complicated way?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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 :)
Solution 4 - Javascript
The accepted answer "can" work. However: if the element is not visible on the first try, the element cannot be found in subsequent retries.
See: https://github.com/cypress-io/cypress/issues/3745
Cypress uses "Sizzle" as selector library - so this:
cy.get('button:contains("FooBar")')
would work in retries.
Solution 5 - Javascript
There are multiple ways to do that
Syntaxes:
cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)
Examples:
cy.contains('button', 'Customer')
cy.contains('.buttonClass', 'Customer')
cy.get('button:contains("Customer")')
cy.contains('Customer')