Click an exact match text in Cypress

by Baronvonbirra   Last Updated September 11, 2019 17:26 PM

In Cypress, .contains command yields all matching elements, so for clicking in a dropdown item with a text on it, .contains works fine. But I'm facing the problem I need to click in a dropdown item which text is 'Navigation Label': the problem comes as there's another option, in the same dropdown, called 'New Navigation Label', and it's being press instead, as it's appearing first.

Is there a way to click in an element that exactly matches the text you want?

Given('I click on the {string} drop down option', option => {
  cy.get(`[data-test="dropdown"]`)
    .find('.item')
    .contains(option)
    .click();
});

I partially solve the problem using a .last(), but I find this solution quite vague as I try to keep my steps as reusable as possible, and this is just a patch to make it work in this specific problem.

Note that having a data-test for each specific item in the dropdown is not possible, as items are rendered directly from semantic-ui.

Tags : regex qa cypress


Answers 2


You can use below code snippet to click on an element which has exact text. This will work like charm, let me know if you face any issue.

You have to handle like below in cypress which is equivalent getText() in selenium webdriver.

clickElementWithEaxctTextMatch(eleText) {
  cy.get(".className").each(ele => {
    if (ele.text() === eleText) {
      ele.click();
    }
  });
}
Srinu Kodi
Srinu Kodi
June 05, 2019 15:45 PM

Regular Expressions will work nicely here.

.contains() allows for regex So you can do a regex that matches the whole string only (use ^ and $). That way anything with extra characters won't match (like New Navigation Label). So for example, you could do:

  cy.get(`[data-test="dropdown"]`)
    .find('.item')
    .contains(/^Navigation Label$/)
    .click();

Regex is a little tricky when you are building an expression with a variable (your option variable). In this case, you'll build a regular expression like so:

  cy.get(`[data-test="dropdown"]`)
    .find('.item')
    .contains(new RegExp(option, "g"))
    .click();

So to get an exact match with contains:

cy.contains(new RegExp(yourString, "g"))
Bryce S
Bryce S
September 11, 2019 17:25 PM

Related Questions


Updated August 28, 2018 05:26 AM

Updated March 29, 2019 06:26 AM

Updated July 19, 2019 02:26 AM

Updated September 09, 2019 12:26 PM

Updated September 10, 2019 07:26 AM