Selector playground doesn't correctly escape colon char in selector suggestion

[dgodongm]

Current behavior

Similar issue to #3902

1. Run script that visits https://joinmastodon.org/
2. Use selector playground, to get selector for the 'Stay in control of your own timeline' h2 element

Results:
Suggested selector is:
cy.get(':nth-child(1) > .full-width-bg__inner > .xl\:col-start-2 > .h4')

Screenshot:

Desired behavior

The colon should be double escaped to work:
cy.get(':nth-child(1) > .full-width-bg__inner > .xl\\:col-start-2 > .h4')

Test code to reproduce

describe('home page tests', () => {
  beforeEach(() => {
    cy.visit('/')
  })

 
  it('Stay in control', () => {
    cy.get(':nth-child(1) > .full-width-bg__inner > .xl\:col-start-2 > .h4').should('have.text', 'Stay in control of your own timeline')
  })
})

Cypress Version

12.16.0

Node version

v19.7.0

Operating System

macOS 13.3.1 (a)

Debug Logs

No response

Other

No response

[lmiller1990]

I reproduced it here: https://github.com/lmiller1990/cypress-test-tiny/compare/master...lmiller1990:cypress-test-tiny:issue-27258?expand=1

We do indeed need the double \\.

[lmiller1990]

I looked around and I think this needs to be patched in the cypress/unique-selector module. That's here.

Are you interested in making a PR?

[SangilYun]

It looks like the CSS.escape dependency might be causing this issue. mathiasbynens/CSS.escape#17

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.