✅ Quick Tip: Using Regex in Cypress Tests

Most days, sitting at a computer, automating tests, I can either grab or add the selector into the application I need for the test I’m working with.

And, then some days, I need to select only a specific part of an aria-label text, or I need to return the exact result for text in a heading. In instances like these, commands like cy.contains() may not give me exactly what I need to create a reliable test.

Enter the magic of Regex. According to ComputerHope, regex (short for regular expression) is a string of text that lets you create patterns that help match, locate, and manage text. Regex helps me find partial text within an aria label or an id. It helps me match the exact text. And, its use with Cypress is easy to implement. Let’s get started.

TL;DR

1. When you need to match beginning text on a selector:

cy.get("[id^='shadow-wrapper-']").click();

1. When you need any part of the selector:

cy.get("[id*='-app-button-']").click();

1. If the text displays at the end of the selector:

cy.get("[id$='-app-button']").click();

1. Matching exact text:

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

Read on for more insight 💡

1. When you need to use only the first part of a selector:

Let’s say you are working on a test and need to use an id in a specific element:

id="app-button-kdIhTe"

And, maybe the id regenerates after every page refresh. Meaning that every time you open the page, the id you select for your test is never the same. Here’s how regex helps us solve this:

cy.get("[id^='app-button-']").click();

By adding the ^ symbol to the id, you are using regex to tell Cypress to use only the parts of text you’ve included from the id, disregarding the rest.

2. When you need some part of a selector:

Let’s say the id we’re using has dynamic values displaying in the beginning and you only need a part of the id.

id="iUJew-app-button-kdIhTe"

In this case, you’d use the * wild card symbol to match the section of the selector that’s static.

cy.get("[id*='-app-button-']").click();

Again, by only including that static part of the id, you’re using regex to help Cypress identify the id that includes the text you provided.

3. When you need to match the end of the selector

If the dynamic values display at the beginning of the selector and you only need to match the end…

id="iUJew-app-button"

in this example, you would use the $ sign:

cy.get("[id$='-app-button']").click();

4. When you need to match the exact text in an element

StackOverflow has a great example of this.

Let’s use the navigation example for this. Imagine that there are a series of options in a dropdown. The first option has the label:

New Navigation Label

The second option has

Navigation Label

In our test, writing

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

will select the first option because it appears first for Cypress. But, what if we need to click the second Navigation Label?

As shown in the StackOverflow answer, using the ^ and the $ will match only the text written and will ignore all other options:

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

There is so many ways we can use regex to help us match text when we’re writing tests. It’s a wonderful world waiting to be discovered.

What are your tricks with regex? Please share in the comments!

Till next time…

Sources:

Working with Dynamic Element Ids, Classes and Attributes— Cypress

Click an exact match text in Cypress

Written with You've Finally Reached Heavenly Realm📡✨[4K] by Teravibe playing in the background