diff --git a/source/api/utilities/$.md b/source/api/utilities/$.md index ab30799990..fa3a27ddc3 100644 --- a/source/api/utilities/$.md +++ b/source/api/utilities/$.md @@ -50,3 +50,31 @@ cy.wrap($li) .click() .should('have.class', 'active') ``` + +# Notes + +## Cypress.$ vs. cy.$$ + +You can also query DOM elements with `cy.$$`. But `Cypress.$` and `cy.$$` are different. + +`Cypress.$` refers to the `jQuery` function itself. You can do anything with `Cypress.$` if you can do it with the `jQuery` function. So, both of the examples below work. + +```js +Cypress.$.each([1, 2, 3], (index, value) => { + expect(index).to.eq(value) +}) // works +``` + +```js +$.each([1, 2, 3], (index, value) => { + expect(index).to.eq(value) +}) // also works +``` + +But `cy.$$` is a wrapper of the `jQuery.fn.init` function. In other words, you can only query DOM elements with `cy.$$`. Because of that, the jQuery utility functions like `jQuery.each`, `jQuery.grep` don't work with `cy.$$`. + +```js +cy.$$.each([1, 2, 3], (index, value) => { + expect(index).to.eq(value) +}) // fails +``` diff --git a/source/faq/questions/using-cypress-faq.md b/source/faq/questions/using-cypress-faq.md index 0bb655b4fa..7c6babd8db 100644 --- a/source/faq/questions/using-cypress-faq.md +++ b/source/faq/questions/using-cypress-faq.md @@ -600,3 +600,30 @@ cy.get('@consoleLog').should('be.calledWith', 'Hello World!') ``` Also, check out our {% url 'Stubbing `console` Receipe' recipes#Stubbing-and-spying %}. + +## {% fa fa-angle-right %} How do I use special characters with cy.get? + +{% url "According to the CSS spec" https://www.w3.org/TR/html50/dom.html#the-id-attribute %}, special characters like `/`, `.` are valid characters for ids. + +To test elements with those characters in ids, they need to be escaped with {% url "`CSS.escape`" https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape %} or {% url "`Cypress.$.escapeSelector`" https://api.jquery.com/jQuery.escapeSelector/ %}. + +Example: + +```html + + + +
Hello World
+ + +``` + +```js +it('test', () => { + cy.visit('index.html') + cy.get(`#${CSS.escape('Configuration/Setup/TextField.id')}`).contains('Hello World') + cy.get(`#${Cypress.$.escapeSelector('Configuration/Setup/TextField.id')}`).contains('Hello World') +}) +``` + +Note that `cy.$$.escapeSelector()` doesn't work. `cy.$$` doesn't refer to `jQuery`. It only queries DOM. {% url "Learn more about why" $#Notes %}