Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cypress - how to find by text content?

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?

like image 794
Phil Avatar asked Aug 17 '19 06:08

Phil


People also ask

How do you search for text in Cypress?

within(() => { cy. findByText("Button Text"). should("exist"); }); cy. get("form").

How do I get an element's text contents in Cypress?

Cypress can validate the text on an element with the help of jQuery text() method. This method shall help us to fetch the text content on the selected element. We can also put assertions on the text content of the element. cy.

How do you find elements in Cypress?

Get Element By Containing Text in Cypress You can simply use the contains() function along with the tag name and should be able to get the element. Note: The above example we are using contains() for <a> element, but you can use it for any element if you want to find the attribute or perform an action using text.


4 Answers

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.

like image 159
DurkoMatko Avatar answered Oct 17 '22 06:10

DurkoMatko


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.

like image 44
Mr. J. Avatar answered Oct 17 '22 05:10

Mr. J.


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 :)

like image 26
konekoya Avatar answered Oct 17 '22 05:10

konekoya


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.

like image 35
madflow Avatar answered Oct 17 '22 06:10

madflow