Skip to main content

Cypress.$

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

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​

Contents