Cypress.$

Cypress automatically includes jQuery and exposes it as Cypress.$.

Calling Cypress.$('button') will automatically query for elements in your remote window. In other words, Cypress automatically sets the document to be whatever you've currently navigated to via cy.visit().

This is a great way to synchronously query for elements when debugging from Developer Tools.

Syntax

Cypress.$(selector)

// other proxied jQuery methods
Cypress.$.Event
Cypress.$.Deferred
Cypress.$.ajax
Cypress.$.get
Cypress.$.getJSON
Cypress.$.getScript
Cypress.$.post

Usage

Correct Usage

Cypress.$('p')

Incorrect Usage

cy.$('p') // Errors, cannot be chained off 'cy'

Examples

Selector

const $li = Cypress.$('ul li:first')

cy.wrap($li)
  .should('not.have.class', 'active')
  .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.

Cypress.$.each([1, 2, 3], (index, value) => {
  expect(index).to.eq(value)
}) // works

$.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.$$.

cy.$$.each([1, 2, 3], (index, value) => {
  expect(index).to.eq(value)
}) // fails

See also

• Bundled Tools