Cypress - how to find by text content?

javascript cypress end-to-end
Phil picture Phil · Aug 17, 2019 · Viewed 14k times · Source

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?

Answer

DurkoMatko picture DurkoMatko · Aug 17, 2019

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.

Related questions

Cypress: Test if element does not exist

I want to be able to click on a check box and test that an element is no longer in the DOM in Cypress. Can someone suggest how you do it? //This is the Test when the check box is …

Read More
Cypress get href attribute

I have a test case in which i have a link which opens in a new tab, and since cypress doesn't support multi tab, i wanna get href attribute of that link and then open it in the same tab, …

Read More
How to get div 'text' value in Cypress test using jquery

Using Jquery in Cypress.io test, how to get the div 'text' value called 'Wildness' from the below html tag. I have tried below in my Cypress test, but it is throwing undefined in console. const $divText = Cypress.$('.ibxudA .…

Read More