To query for the button, use the cy.get()
command.
// We can get DOM elements by id
cy.get('#query-btn').should('contain', 'Button')
// We can get DOM elements by class
cy.get('.query-btn').should('contain', 'Button')
cy.get('#querying .well>button:first').should('contain', 'Button')
// ↲
// we can CSS selectors just like jQuery
We can find elements by their content using cy.contains()
cy
.get('.query-list')
.contains('bananas').should('have.class', 'third')
.get('.query-list')
.contains(/^b\w+/).should('have.class', 'third')
.get('.query-list')
.contains('apples').should('have.class', 'first')
.get('.query-button')
.contains('Save Form').should('have.class', 'btn')
We can find elements within a specific DOM element cy.within()
cy.get('.query-form').within(function(){
cy
.get('input:first').should('have.attr', 'placeholder', 'Email')
.get('input:last').should('have.attr', 'placeholder', 'Password')
})
We can find the root DOM elementcy.root()
// By default, root is the document
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')
})