[SOLVED] Cypress: contains().click() with or statement

Issue

the problem is that the Docker image from Cypress sets the browser language to english and some elements on the page are translated to english. It looks like it’s a bug in Cypress because the browser in the Docker image, regardless of the set language, translates certain texts into English. even if the set browser language is different.

my local browser language is different than the one in the docker image so some texts are different for me locally than in the dockerimage (english). now i have to build a workaround until cypress manages to fix the bug.

i want cypress to select an element which is selected by a logical or ( || ). However it doesn’t work because cypress.contains() doesn’t support this.
For a better illustration here is a simple example of what I mean. Do you have an idea how to implement this?

const value1 = data.text_local_language
const value2 = data.text_english

         cy.get("element")
          .contains(value1 || value2)
          .click();

Solution

You can use a regular expression in contains()

const value1 = data.text_local_language
const value2 = data.text_english

const regex = new RegExp(`${value1}|${value2}`)  // build regex from variables

cy.get("element")
  .contains(regex)
  .click();

The regular expression (inside the slashes) value1|value2 matches either value1 or value2 (or is denoted by the pipe-symbol |).

Answered By – Fody

Answer Checked By – Pedro (BugsFixing Volunteer)