Escape Selector

Imagine the element's ID has a character that has a special meaning, like :. How do you select this element?

<div id="person:age">42</div>

You need to escape the : character. You add a single backslash \ character, but it JavaScript the backslash needs to be escaped too 😃 Thus you use double backslash \\ before the colon (or some other special characters).

cy.get('#person\\:age').should('have.text', '42')

Tip: jQuery has the .escapeSelector()open in new window method to do the heavy lifting for you.

cy.get('#' + Cypress.$.escapeSelector('person:age')).should(

Watch this example recipe in the video Escape The Selectoropen in new window.