Add docs related to cy.$$ (#2465)

* Add docs related to cy.$$ * Fix
cypress-io · Feb 19, 2020 · 3f90f2d · 3f90f2d
1 parent 5a789b1
commit 3f90f2d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git 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
@@ -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
+<!doctype html>
+<html lang="en">
+<body>
+  <div id="Configuration/Setup/TextField.id">Hello World</div>
+</body>
+</html>
+```
+
+```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 %}