cy.get() uncaught exception: Syntax error, unrecognized expression: attribute that contains double quotes

[eshadboltadr]

Current behavior

Inside a cy.origin() block, when I call cy.get() to get an element that has an attribute that contains double quotes, it shows this error message but the runner continues executing the next couple of cy statements.

The following error originated from your application code, not from Cypress.
(uncaught exception)Error: Syntax error, unrecognized expression: INPUT[type="text"][data-val="true"][required=""][data-val-required="Value is required."][data-val-regex="Please enter a valid value, for example "XX XX" or "+XX-XX""]

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.

Stack Trace

    at Sizzle.error (https://localhost:44300/__cypress/runner/cypress_runner.js:8465:8)
    at Sizzle.tokenize (https://localhost:44300/__cypress/runner/cypress_runner.js:9121:11)
    at Sizzle.select (https://localhost:44300/__cypress/runner/cypress_runner.js:9548:20)
    at jQuery.Sizzle [as find] (https://localhost:44300/__cypress/runner/cypress_runner.js:7769:9)
    at jQuery.fn.init.find (https://localhost:44300/__cypress/runner/cypress_runner.js:9801:11)
    at new jQuery.fn.init (https://localhost:44300/__cypress/runner/cypress_runner.js:9916:40)
    at Object.query (https://localhost:44300/__cypress/runner/cypress_runner.js:35133:10)
    at $Cy.$$ (https://localhost:44300/__cypress/runner/cypress_runner.js:139920:57)
    at $Cypress.jqueryProxyFn (https://localhost:44300/__cypress/runner/cypress_runner.js:41076:21)
    at props.reifyElement (https://localhost:44300/__cypress/runner/cypress_runner.js:169129:36)
    at get 0 (https://localhost:44300/__cypress/runner/cypress_runner.js:169014:24)
    at Object.get (https://localhost:44300/__cypress/runner/cypress_runner.js:169031:22)
    at Proxy.map (<anonymous>)
    at reifyLogFromSerialization (https://localhost:44300/__cypress/runner/cypress_runner.js:169256:41)
    at PrimaryOriginCommunicator.onMessage (https://localhost:44300/__cypress/runner/cypress_runner.js:168588:103)
    at crossOriginOnMessageRef (https://localhost:44300/__/assets/index-BdCmY7-e.js:109382:72)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (https://localhost:44300/__cypress/runner/cypress_runner.js:3509:19)
    at Promise._then (https://localhost:44300/__cypress/runner/cypress_runner.js:1262:17)
    at Promise._passThrough (https://localhost:44300/__cypress/runner/cypress_runner.js:4133:17)
    at Promise.lastly.Promise.finally (https://localhost:44300/__cypress/runner/cypress_runner.js:4142:17)
    at Object.onRunnableRun (https://localhost:44300/__cypress/runner/cypress_runner.js:162742:53)
    at $Cypress.action (https://localhost:44300/__cypress/runner/cypress_runner.js:41484:28)
    at Runnable.run (https://localhost:44300/__cypress/runner/cypress_runner.js:145330:13)
    at next (https://localhost:44300/__cypress/runner/cypress_runner.js:155115:10)
    at https://localhost:44300/__cypress/runner/cypress_runner.js:155159:5
    at timeslice (https://localhost:44300/__cypress/runner/cypress_runner.js:145670:27)

Desired behavior

In cypress_runner.js, I think the function reifyLogLikeFromSerialization doesn't properly css-encode attribute values for jQuery selector syntax:

        if (matchElementsAgainstSnapshotDOM) {
          const attributes = Object.keys(props.attributes).map(attribute => {
            return `[${attribute}="${props.attributes[attribute]}"]`;
          }).join('');
          const selector = `${props.tagName}${attributes}`;
          reifiedElement = Cypress.$(selector);
          if (reifiedElement.length) {
            return reifiedElement.length > 1 ? reifiedElement : reifiedElement[0];
          }
        }

I do not expect to see the message "The following error originated from your application code, not from Cypress." or I do not expect my next statements to execute despite the error.

Test code to reproduce

<input id="MyInputId" type="text" data-val="true" required="" data-val-required="Value is required." data-val-regex="Please enter a valid value, for example &quot;XX XX&quot; or &quot;&#x2B;XX-XX&quot;"/>

Note: The html was generated from a cshtml (razor) file that uses jQuery unobtrusive validation.

it("works", function () {
  cy.visit("https://localhost:44300/Dashboard");
  cy.origin("https://localhost:44300", { args: { x: "" } }, ({ x }) => {
    cy.get('#MyInputId')
  })
})

Cypress Version

13.16.0

Node version

v20.18.0

Operating System

Windows 11

Debug Logs

Other

No response

[eshadboltadr]

Also adding Cypress.on('uncaught:exception', ...) inside the cy.origin() block does nothing, it never gets called.