cy.contains and regular expressions

📺 Watch this recipe explained in the video cy.contains And Regular Expressions Examples.

For more cy.contains examples, see Querying commands.

Ignore case

Command cy.contains can ignore case using an option.

<div id="greeting">HeLlO wOrLd</div>

cy.contains('Hello', { matchCase: false }).should(
  'have.id',
  'greeting',
)

Use a regular expression

You can also use a regular expression with i option to ignore the case.

<div id="greeting">HeLlO wOrLd</div>

cy.contains(/Hello/i).should('have.id', 'greeting')

Match the start of the string

Regular expressions are really useful to match a string at the start or end of the text.

<div id="greeting">HeLlO wOrLd</div>

cy.contains(/^Hello/i).should('have.id', 'greeting')

Here is matching text at the end:

<div id="greeting">HeLlO wOrLd</div>

cy.contains(/world$/i).should('have.id', 'greeting')

Dynamic regular expression

If you do not know the text beforehand, you can construct a regular expression object instead of using a regular expression syntax.

<div id="greeting">HeLlO wOrLd</div>

// the text to find comes from a variable
const start = 'hello'
// construct the regular expression object
const regex = new RegExp('^' + start, 'i')
// the cy.contains will be equivalent to /^hello/i
cy.contains(regex).should('have.id', 'greeting')

Escape the text

When building a regular expression, you should take care to escape any special characters.

📺 Watch this example explained in the video Escape Regular Expression Text When Using cy.contains Command.

<div id="rate">45 $/day</div>

Let's say we want to find the element with a number followed by the $/day text. Simply constructing the regular expression will not work, since the $ character has special meaning in regular expressions.

// 🚨 DOES NOT WORK
// The "$" in the regular expression causes problems
const suffix = '$/day'
const regex = new RegExp(suffix)
cy.contains(regex).should('have.id', 'rate')

// ✅ Escape the $ character when building a regular expression
const suffix = '\\$/day'
const regex = new RegExp(suffix)
cy.contains(regex).should('have.id', 'rate')

If we don't know which characters the text might have, we might want to escape them all using the Lodash _.escapeRegExp function. Since Lodash is bundled with Cypress, nothing to install.

// ✅ Escape all special Regexp characters
// using _.escapeRegExp
cy.contains(new RegExp(Cypress._.escapeRegExp('$/day'))).should(
  'have.id',
  'rate',
)