cy.wrap(element).should('contain', textWithBackslash) fails

[JamShady]

Current behavior

I have an email form input field which displays a (real-time) error message beneath if invalid input is detected, to the effect of:
"[value] is not a valid email"

I use Cypress to run a lot of simultaneous checks (i.e. make sure the form is disabled, there's an error indicator somewhere on the page, the text is red, etc, etc, etc). Somewhere along the way, Cypress also checks that the error message itself contains the input the user entered... and this is where it falls over.

I've provided the smallest sample code I could make which reproduced the problem consistently

The error stack trace is as follows:

Error: Timed out retrying after 15000ms: Syntax error, unrecognized expression: :contains('\"<OE_D]dQ\'), [type='submit'][value~='\"<OE_D]dQ\']
    at Function.Sizzle.error (http://localhost/__cypress/runner/cypress_runner.js:109207:8)
    at Sizzle.tokenize (http://localhost/__cypress/runner/cypress_runner.js:109859:11)
    at Sizzle.compile (http://localhost/__cypress/runner/cypress_runner.js:110253:12)
    at Sizzle.select (http://localhost/__cypress/runner/cypress_runner.js:110343:16)
    at Sizzle (http://localhost/__cypress/runner/cypress_runner.js:108511:9)
    at Function.Sizzle.matchesSelector (http://localhost/__cypress/runner/cypress_runner.js:109170:9)
    at tryFn (http://localhost/__cypress/runner/cypress_runner.js:149438:30)
    at tryCatchFinally (http://localhost/__cypress/runner/cypress_runner.js:149409:12)
    at Function.../driver/src/config/jquery.ts.jquery__WEBPACK_IMPORTED_MODULE_0___default.a.find.matchesSelector (http://localhost/__cypress/runner/cypress_runner.js:149436:10)
    at Function.jQuery.filter (http://localhost/__cypress/runner/cypress_runner.js:110515:22)
    at winnow (http://localhost/__cypress/runner/cypress_runner.js:110501:21)
    at jQuery.fn.init.is (http://localhost/__cypress/runner/cypress_runner.js:110554:12)
    at Proxy.<anonymous> (http://localhost/__cypress/runner/cypress_runner.js:150897:25)
    at Proxy.overwritingChainableMethodWrapper (http://localhost/__cypress/runner/cypress_runner.js:103745:34)
    at Proxy.chainableMethodWrapper (http://localhost/__cypress/runner/cypress_runner.js:102369:49)
    at applyChainer (http://localhost/__cypress/runner/cypress_runner.js:154696:24)
From previous event:
    at Context.shouldFn (http://localhost/__cypress/runner/cypress_runner.js:154756:63)
    at Context.should (http://localhost/__cypress/runner/cypress_runner.js:154774:23)
    at http://localhost/__cypress/runner/cypress_runner.js:150222:39
    at assertions (http://localhost/__cypress/runner/cypress_runner.js:150551:16)
From previous event:
    at $Cy.verifyUpcomingAssertions (http://localhost/__cypress/runner/cypress_runner.js:150566:62)
    at resolveWrap (http://localhost/__cypress/runner/cypress_runner.js:157060:21)
    at whenStable (http://localhost/__cypress/runner/cypress_runner.js:167461:63)
    at http://localhost/__cypress/runner/cypress_runner.js:166959:14
logError @ cypress_runner.js:193303
(anonymous) @ cypress_runner.js:191740
emit @ cypress_runner.js:69233
(anonymous) @ cypress_runner.js:188385
emit @ cypress_runner.js:69233
emit @ cypress_runner.js:188446
onPrint @ cypress_runner.js:187275
_onPrintClick @ cypress_runner.js:187280
(anonymous) @ cypress_runner.js:188617
executeAction @ cypress_runner.js:66991
n @ cypress_runner.js:66991
ca @ cypress_runner.js:77581
ja @ cypress_runner.js:77582
ka @ cypress_runner.js:77582
wa @ cypress_runner.js:77584
Aa @ cypress_runner.js:77585
ya @ cypress_runner.js:77585
Da @ cypress_runner.js:77588
Ad @ cypress_runner.js:77651
Gi @ cypress_runner.js:77817
Kb @ cypress_runner.js:77606
Dd @ cypress_runner.js:77653
(anonymous) @ cypress_runner.js:77818
../../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ cypress_runner.js:82406
Ii @ cypress_runner.js:77818
Cd @ cypress_runner.js:77652

NB: despite the appearance in the screenshot, there is definitely a backslash at the end of the problematic string. Cypress is also parsing error messages so this is why it's being hidden (see #18800 for how this affects other text formatting)

Desired behavior

Not encounter an error... and confirm whether the selected element contains the text or not

Test code to reproduce

const nastyString = '"<OE_D]dQ\\'
const tag = Cypress.$('<span />').text(nastyString).appendTo(document.body)
cy.wrap(tag).should('contain', nastyString) // fails here

// cy.wrap(v).should('contain', nastyString.replace('\\', '\\\\')) // this succeeds

Cypress Version

9.1.0

Other

Platform: Win 11
Node: 17.1 (nodeVersion: bundled - it'll crash otherwise, see #18914 )

[sainthkh]

Sorry for the late reply.

Confirmed that it doesn't work with the code below:

it('t', () => {
  const nastyString = '"<OE_D]dQ\\'
  const tag = Cypress.$('<span />').text(nastyString).appendTo(document.body)

  cy.wrap(tag).should('contain', nastyString) // fails here
})

[cypress-bot]

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

[cypress-bot]

Released in 9.6.1.

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