Cypress: contains().click() with or statement

Question

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();

You almost solved it. [Regular Expressions in Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) are defined surrounded by slashes, and the _or_ is symbolized by a single pipe: `/value1|value2/` (Note: spaces removed to not match them). — hc_dev, Jun 23 '22 at 20:44
And since `value1` and `value2` are variables, you need [create a `RegExp` object as pattern](https://stackoverflow.com/questions/17885855/use-dynamic-variable-string-as-regex-pattern-in-javascript) instead `/../`. — hc_dev, Jun 23 '22 at 20:54

TesterDick · Answer 1 · 2022-06-24T09:55:04.663

4

There is the oneOf assertion if an exact match is is acceptable.

cy.get('element')
  .should('satisfy', ($el) => {
    expect($el.text()).to.be.oneOf([value1,value2])
  })
  .click()

edited Jun 24 '22 at 09:55

answered Jun 23 '22 at 21:02

TesterDick

3,830
5
18

It is worth mentioning that Cypress bundles popular *Chai* assertion library. This is why those assertions are not explained in detail in Cypress docs. A link to the docs like [`oneOf`](https://www.chaijs.com/api/bdd/#method_oneof) is part of a well-informed answer. It forwards to more details. – hc_dev Jun 24 '22 at 09:59

Fody · Accepted Answer · 2022-06-23T20:53:53.833

3

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 |).

edited Jun 23 '22 at 20:53

answered Jun 23 '22 at 20:29

Fody

23,754
3
20
37

I forgot but you can combine the `.get()` with the `.contains()`. `cy.contains('element', regex)`. – jjhelguero Jun 23 '22 at 22:37
Yes, I think so. – Fody Jun 23 '22 at 22:38

jjhelguero · Answer 3 · 2022-06-23T20:12:17.240

2

You can check the text contains either text inside a .then() command and assert it.

const thisText = 'this'
const thatText = 'that'

cy.get('element')
  .then($el => {
    const text =  $el.text()
    const thisOrThat = text.includes(thisText) || text.includes(thatText)
    expect(thisOrThat, `text contains ${thisText} or ${thatText}`).to.be.true
    cy.wrap($el).click()
  })

edited Jun 23 '22 at 20:12

answered Jun 23 '22 at 18:44

jjhelguero

2,281
5
13

until the click it works. i think because the click is outside the method it gives the following error: `cy.click() failed because it requires a DOM element.` – pontilicious Jun 23 '22 at 19:02
Yeah, i see the mistake now. Fixing it. – jjhelguero Jun 23 '22 at 20:11

hc_dev · Answer 4 · 2022-06-24T09:39:16.520

To assert that an element contains alternative parts you can use a regular expression (RegExp) inside contains().

Assert `Contains` RegExp

To build a regex pattern from variables use the constructor new RegExp with a string expression.

const value1 = 'Hello'
const value2 = 'World'

// simple with plus operator
cy.get("element").contains(new RegExp(value1 + '|' + value2))

// short and expressive with ES6 template literals
cy.get("element").contains(new RegExp(`${value1}|${value2}`))

// for multiple elements use Array.join()
const elements = ['Fire', 'Air', 'Water'];
cy.get("element").contains(new RegExp(elements.join('|'))

See also the Cypress Assertions guide on Text Content:

// use cy.contains to find an element with its text
// matching the given regular expression
cy.contains('[data-testid="greeting"]', /^Hello/)

Configure browser language in your containerized Cypress

If you want to configure the language used for testing, you could:

set the LANG environment variable in your docker container, which can then be picked by the browser as system/default locale
set the browser preferences in Cypress's Browser Launch API, which will then be used in the accept-language request header

See Setting the browser language in Cypress

Cypress: contains().click() with or statement

4 Answers4

Assert Contains RegExp

Configure browser language in your containerized Cypress

Assert `Contains` RegExp