Cypress: Introduce non case sensitive matching for cy.contains()

[James-E-Adams]

Current behavior:

cy.contains('Capital Sentence') does not match

<span class="capitalize"> capital sentence </span>

where:

.capitalize {
   text-transform: capitalize;
}

Is this expected?

Desired behavior:

I assumed it would match because that's what the user sees. However the underlying text in the DOM is indeed capital sentence.

Steps to reproduce:

Versions

Cypress: 3.0.1
Chrome, Mac OS Mojave

[brian-mann]

It would be the same problem in regards to things like uppercase or truncate for that matter.

If you know of any DOM methods that return the text with this kind of CSS styling factored in, let us know.

[James-E-Adams]

Yeah it's a tough one.

A possible algorithm for case-sensitivity using text-transform (wouldn't fix truncate using text-overflow) could be:

• check if the provided string to cy.contains() has a direct match in the DOM
• otherwise check if the string.toLowerCase()/string.toUpperCase() has a match in the DOM, compute the match with its text-transform property applied and see if it matches the original string

But it's less efficient because it requires multiple traversals of the DOM so it could potentially be opt-in?

[jennifer-shehane]

Introducing this into the default cy.contains() would also make it impossible to then test actually capitalization within an application. If my team wanted our content to move from Capitalized to Sentence Case, for example, there wouldn't be a way to test that those changes were put in correctly.

If this were even implemented, I would recommend it as a separate argument to be passed like in 'search' in your IDE - to matchCase or noMatchCase.

[jennifer-shehane]

I actually might prefer to have matchCase as the arg and no match case as the default because I get pretty annoyed myself having to update my tests when I only changed capitalization in my app.

[vedmant]

I'd also need case insensitive contains method, maybe add some options to it?

[Bahaa-Addin]

I solved it using a regex with i flag for case insensitive :
cy.contains(/capital sentence/i)

[vesper8]

please add an argument to make cy.contains optionally work in a non case-sensitive way

using the regex works but when combined with variables requires you to add a lot of extra code.. it would be much better to have it built-in

[vesper8]

my solution is to create a helpers class and then import it inside my tests like this:

helpers.js

export default class Helpers {
  static caseInsensitive(str) {
    // escape special characters
    this.input = str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    return new RegExp(`${this.input}`, 'i');
  }
}

spec.js

import helpers from '../support/helpers';
...
cy.get('[data-cy="form-errors"]').contains(helpers.caseInsensitive(variables.strings.en.general.oops));

[cypress-bot[bot]]

The code for this is done in cypress-io/cypress#5653, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[jennifer-shehane]

Released in 4.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.0.0, please open a new issue.