Cypress: `cy.get` does not work with IDs that use characters other than [0-9a-zA-Z\-]+

[aeneasr]

Current behavior:

Running something like cy.get('#Configuration/Setup/TextField.id') yields an error despite being a valid HTML5 ID. Per spec, HTML5 IDs

• must contain at least one character
• must not contain any space characters

Instead, when using an ID with characters like / or ., an error gets thrown:

Error: Syntax error, unrecognized expression: #Configuration/Setup/TextField.id

Desired behavior:

IDs with valid characters such as / or . should work.

Steps to reproduce:

Write a spec that accesses an ID formatted as described above, for example: cy.get('#Configuration/Setup/TextField.id').

Versions

Cypress 3.0.1
Chrome Version 67.0.3396.87 (Official Build) (64-bit)
Windows 10 64bit

[jennifer-shehane]

Yes, this is a bug. The ID above is fine as defined in spec: https://www.w3.org/TR/html50/dom.html#the-id-attribute

This error is being thrown from Sizzle, and likely was fixed in a later version of jQuery, but we are on an earlier version - version 2.2.4. Pull request to update jQuery: https://github.com/cypress-io/cypress/pull/1229

[joshpzero]

Can we get an update on the progress of this. It's been parked for a while

[jennifer-shehane]

No work has been done for this - jQuery PR is open if anyone wants to help contribute. It's a big update.

[aepplerplangrid]

Hey there! haven't seen any updates in this in a while, mind if I ask what's the status of the fix?

[ravikiranr26]

Hi All,

Also have the error in this case .get([aria-label=Jun 2, 2019])

Error: Error: Syntax error, unrecognized expression: [aria-label=Jun 2, 2019]

Any workaround to continue as of now ?

Regards,
Ravi

[bahmutov]

Can you put the selector in quotes?

Sent from my iPhone

On May 28, 2019, at 13:12, Ravi Kiran R [e-mail] wrote:

Hi All,

Also have the error in this case .get([aria-label=Jun 2, 2019])

Error: Error: Syntax error, unrecognized expression: [aria-label=Jun 2, 2019]

Regards,
Ravi

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[ravikiranr26]

Can you put the selector in quotes?
…

Its like this, what I'm trying..

.get(`[aria-label=${getDateVar}]`)

and ${getDateVar} is Jun 2, 2019

[bahmutov]

I think it should be quoted like a JavaScript string and then as an
attribute selector because it has spaces

.get([aria-label="${dateVar}"])

On Tue, May 28, 2019 at 2:16 PM Ravi Kiran R [e-mail]
wrote:

Can you put the selector in quotes?
… <#m_-7156384978626998545_>

Its like this, what I'm trying..

.get([aria-label=${dateVar}])

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/cypress-io/cypress/issues/2027?email_source=notifications&email_token=AAQ4BJUN4RWP4KG2RARSO6DPXUPALA5CNFSM4FG2O47KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWL5X5A#issuecomment-496491508,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAQ4BJQMANUXN2PSLYC73W3PXUPALANCNFSM4FG2O47A
.

--
Dr. Gleb Bahmutov, PhD

Schedule video chat / phone call / meeting with me via
https://calendly.com/bahmutov
gleb.[email protected] @bahmutov https://twitter.com/@bahmutov
https://glebbahmutov.com/ https://glebbahmutov.com/blog
https://github.com/bahmutov

[ravikiranr26]

I think it should be quoted like a JavaScript string and then as an attribute selector because it has spaces .get([aria-label="${dateVar}"])
…

Ok sure, would give a try with quotes. And it works, thanks a lot for the reply.

[lsgng]

Same problem here with using the # character:

cy.get('[data-testid=color-palette_#000000]')

Does anyone have an idea how to maybe work around this until the issue is fixed? Removing the # from the testid would in this case require a lot of refactoring.

[luckyshrma]

I also face the same issue with the following code.
cy.get('[data-org-ta=navigation.news]')

Getting error message that "Error: Syntax error, unrecognized expression: [data-org-ta=navigation.news]"

[sprocket99]

Also @ symbol does not work. I have a need to identify a specific element and the only thing I have is an email address, I do not want to have to do extra processing in my app to strip out the @ symbol. So I want something like this to work:

cy.get('[[email protected]]').click();

I am using Vue.js to bind in my app like:

<b-button :data-cy="btn-details-${row.item.username}" ...

[ozzstrich]

Any updates on this?

[mikkelwf]

Also failing here.. :(

[aleixdeve]

I had the same issue using a dot .:

cy.get('[data-e2e=adv.view]').click();

Seems to be working when double escaped:

cy.get('[data-e2e=adv\\.view]').click();

[sainthkh]

I opened an issue at jquery/sizzle#465. It's not solved in [email protected] yet.

[mgol]

This is not a bug. When used in a selector, IDs, classes etc. need to be escaped when they contain some special characters. There's a standard CSS.escape API for that; if you need something that will work in IE & the legacy Edge as well, jQuery selector engine - Sizzle - has an equivalent Sizzle.escape method. This is exposed in jQuery via jQuery.escapeSelector.

[sainthkh]

The code should be written in this way:

<!doctype html>
<html lang="en">
<body>
  <div id="Configuration/Setup/TextField.id">Hello World</div>
</body>
</html>

it('test', () => {
  cy.visit('fixtures/issue-2027.html')
  cy.get(`#${CSS.escape('Configuration/Setup/TextField.id')}`)
  .contains('Hello World')
})

@bahmutov

This issue is solved thanks to @mgol. But we have a few things to decide/do.

1. We should add this to FAQ of the doc. Right?
2. Should I leave the code above as '2027_spec.js' under packages/driver tests? CSS.escape is currently in Working Draft stage. So, things can change.
3. We need update the type of cy.$$ in index.d.ts. Because it is not jQuery object. It's a wrapper of jQuery.fn.init. So, the code below fails. But VS Code intellisense recommends escapeSelector. It's misleading.

cy.get(`#${cy.$$.escapeSelector('Configuration/Setup/TextField.id')}`)
.contains('Hello World')

Maybe we need a new API page for cy.$$ and explain the difference between Cypress.$ and cy.$$.

[mgol]

@sainthkh

Should I leave the code above as '2027_spec.js' under packages/driver tests? CSS.escape is currently in Working Draft stage. So, things can change.

Things cannot change just because a spec is a Working Draft. This particular API has been implemented by all still developed browser engines for a long time (Edge was an exception but the old engine is dead now) so changing it right now in a meaningful way is very likely not Web-compatible.

[cypress-bot[bot]]

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

[cypress-bot[bot]]

Released in 4.1.0.

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