cy.get()

To query for the button, use the cy.get() command.

// Get DOM elements by id
cy.get('#query-btn').should('contain', 'Button')

// Get DOM elements by class
cy.get('.query-btn').should('contain', 'Button')

cy.get('#querying .well>button:first').should('contain', 'Button')
//              ↲
// Use CSS selectors just like jQuery

cy.contains()

We can find elements by their content using cy.contains()

cy.get('.query-list')
  .contains('bananas').should('have.class', 'third')

// we can even pass a regexp to `cy.contains()`
cy.get('.query-list')
  .contains(/^b\w+/).should('have.class', 'third')

// `cy.contains()` will return the first matched element
cy.get('.query-list')
  .contains('apples').should('have.class', 'first')

// passing a selector to contains will return the parent
// selector containing the text
cy.get('#querying')
  .contains('ul', 'oranges').should('have.class', 'query-list')

cy.get('.query-button')
  .contains('Save Form').should('have.class', 'btn')
  • apples
  • oranges
  • bananas
  • more apples

.within()

We can find elements within a specific DOM element .within()

cy.get('.query-form').within(function(){
  cy.get('input:first').should('have.attr', 'placeholder', 'Email')
  cy.get('input:last').should('have.attr', 'placeholder', 'Password')
})
Form

cy.root()

We can find the root DOM elementcy.root()

cy.root().should('match', 'html')

cy.get('.query-ul').within(function(){
  // In this within, the root is now the ul DOM element
  cy.root().should('have.class', 'query-ul')
})
  • One
  • Two
  • Buckle my shoe