Have .contains() strip new lines of targets.

[jennifer-shehane]

Description
Sometimes when I issue .contains() commands with text I expect to be found, it doesn't match my element as expected due to extra whitespace/new lines in my element.

Code

HTML

<h1>hello
world</h1>

Test

cy.contains("hello world") 
// CypressError: Timed out retrying: Expected to find content: 'hello world' but never did.

Web Page

Additional Info

Checking jQuery's .text() in console, I see there is whitespace leading/trailing the actual text.

> $("h1").text()
> "hello
world"

Could it be possible to remove whitespace/new lines of el's when trying to match with .contains?

[tejasbubane]

Should it also strip newlines/whitespaces between words or just beginning and trailing of the entire string?

[hlb-schmidt]

hmm, the title is "Have .contains() strip new lines of targets". but reading the description, shouldn't the title be "Have .contains() replace new lines with space"?

and for the record, as the documentation for .contains() sais "DOM elements can contain more than the desired text and still match", so doing a .contains("hello world") will also match an element <p>what hello world ever</p>.

ps. i dont think automatically replacing anything other than leading/trailing whitespace in a string is a good idea. (removing would be catastrophic: hello\nworld -> helloworld)

[plehnen]

I also would like to have it ignoring whitespace.
May be an alternative solution would be to include chai-string. e.g. "equalIgnoreSpaces"

[jennifer-shehane]

@plehnen Interesting, I didn't know this existed. You could include chai-string in Cypress and use this assertion if it's a blocker for anything. See this example on how to extend chai.

[plehnen]

@jennifer-shehane I do include chai-string. But it doesn't work as easy as in the example.
I do something like this in my spec file for a workaround:

import chai from 'chai';
import chaiString from 'chai-string';

chai.use(chaiString);

// this is a hack, because it seems that cypress does not really support 3rd party chai plugins yet
const { expect } = chai;

const hasTextIgnoreSpaces = (selector, text) => {
  cy.get(selector).invoke('text')
    .should(t => expect(t).to.equalIgnoreSpaces(text));
};

[RhinocerosUnicornis]

A simple workaround for now is to use regex. For example, I have a span with "50 widgets" in HTML template like this:

<span id="my-quantity-of-widgets-a8bc90dd">50
widgets</span>

I can match it with contains still by shipping it a regex.

cy.get('span[id^="my-quantity-of-widgets-a8bc90dd"]').contains(/50(\s)*widgets/);

Relevant code chunk in the driver:

cypress/packages/driver/src/cy/commands/querying.coffee

Line 291 in e5c33fe

when _.isRegExp(text)

[cypress-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.