Unrecognized expression

Current behavior

I have an Input field that can have a label with any characters. An example would be: This is a custom label ~!@#$%^&*()_+=-[]{}\|:",./? UID.

I'm trying to find this label by doing something like this:

const customLabel = 'This is a custom label ~!@#$%^&*()_+=-[]{}\|:",./? UID'
cy.contains('label', customLabel);

But this code is unable to locate the label giving me the following error:

What I'm trying to find: 'This is a custom label ~!@#$%^&*()+=-[]{}|:",./? UID' What Cypress is trying to find: 'This is a custom label ~!@#$%^&()+='-[']{}|:",./? UID'

They both different and I'm not sure why. Cypress is also throwing a weird error that says that it's a unrecognized expression and not that it didn't find the element on the screen.

Here's the input screenshoty:

Desired behavior

I want to be able to find the element on the screen

Test code to reproduce

Here's my forked repo with the failing test: https://github.com/SamuelPinho/component-testing-quickstart-apps

To test it, just do:

Go to react/my-awesome-app folder
Run yarn to install all dependencies
Run yarn cypress open and choose to run components tests
Click on the Stepper test

Cypress Version

11.2.0

Node version

18.12.1

Operating System

macOS 13.0.1

Debug Logs

The log was quite long, so I commited it to this file: https://github.com/SamuelPinho/component-testing-quickstart-apps/blob/main/react/cypress.log

Other

No response

Hey @SamuelPinho , thanks for letting us know about this!

For the first point (the strings being different) this is partially due to how JavaScript works - the backslash \ in your string is being evaluated as an escape sequence - you need to use a double backslash \\ to tell JS to actually use a backslash when defining a string in JS.

Unfortunately I've confirmed some of the string mismatch (the extra single quote) and the strange error you get is an issue with how we're searching for elements in the DOM conflicting with some of the special characters you have in your string (specifically the brackets []). I'll get this passed along to the team to get a fix in for properly escaping those characters when they're provided in a 'content' parameter.

As a workaround you can rely on partial string matching for your contains command - try stripping out the special characters and just search for "This is a custom label"

cypress-io / cypress