Skip to main content
Cypress App

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.$ runs immediately and does not wait for cy commands​

Cypress.$ queries the application under test's DOM synchronously, at the moment the line of code runs. Unlike cy.get(), it is not a queued command and does not wait for previous cy commands to finish.

cy.visit('/page-with-list')
// runs immediately, before cy.visit() has navigated, so it queries the
// previous (blank) page and returns an empty jQuery object: [jQuery{0}]
const $items = Cypress.$('li')

To query the DOM after prior commands have run, move the query into a .then() callback, which Cypress defers until the preceding commands finish, or query off an element yielded by cy:

cy.visit('/page-with-list')
cy.get('body').then(($body) => {
  // runs after cy.visit() has finished and the page has rendered
  const $items = $body.find('li')
})

If you reached for Cypress.$ to conditionally do something based on whether an element exists, read the Conditional Testing guide first. The DOM must be in a known, stable state for this to be reliable.

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