Selector playground doesn't correctly escape period in id

Current behavior:

When using the selector playground on an element (select or input in my case). The selected element it has a name attribute and an id attribute. Both attributes have a periods in them, like id="form.name.last". The code shown and copied to clipboard from the selector playground is incorrect.

This is what gets shown and copied to the clipboard:

cy.get('#form\.name\.last')

JavaScript is treating this as if the period is being escaping and not passing the slash (\) through to Cypress. Thus the above is equivalent to this:

cy.get('#form.name.last')

When the test runs, the selector doesn’t work:

CypressError: Timed out retrying: Expected to find element: '#form.name.last', but never found it.

Desired behavior:

To get the slash (\) passed through to Cypress, then the slash itself needs escaped:

cy.get('#form\\.name\\.last')

Note the two slashes (\\). The tests work correctly with the slash being properly escaped.

However typing that into the selector playground shows an red error and the “Print to console” button is grayed out, so fixing that that would be part of what needs fixed:

Versions

Cypress 3.2.0 Chrome 72

[vladtheimpala]

Do we have general issues about id selector shorthand and some special chars ?

Template : <button id="product-add">

Not working :

.get('button#product-add')
.get('button#product\-add')

Working :

.get('button[id=product-add]')

Using an underscore char works perfectly with shorthand.

Cypress version : 5.0.0 Electron 83 / Chrome 84

[Schrank]

Same for [] as in id="group[6][15]"

IS: cy.get('#group\[7\]\[18\]') SHOULD BE: cy.get('#group\\[7\\]\\[18\\]')

But I understand the argument, that it is normal JS behaviour. But as long as I should be able to just copy from the selector, the selector should be copy pasteable and work.

I’m very thankful for cypress and it is an awesome tool! But I don’t have any doubt, this is a bug and should be fixed for better developer experience 😃