# Element Is Visible
In every example, the button appears on the page only after 1.5 seconds. How would the test confirm the button becomes visible?
📺 Watch this recipe explained in the video Three Ways Of Checking If Element Becomes Visible (opens new window).
# Assertion be.visible
You can use the built-in Chai-jQuery assertion (opens new window) be.visible
cy.get('#a-button').should('be.visible')
# Assertion callback
You can use should(callback)
and call the Cypress.dom.isVisible
utility function to check the element's visibility.
cy.get('#a-button').should(($el) => {
// note that the Command Log does not show much information
// for thrown errors while it retries
if (!Cypress.dom.isVisible($el)) {
throw new Error('Element is hidden')
}
})
# Should satisfy assertion
A better variant is to use the Cypress.dom.isVisible
predicate function with Chai assertion satisfy
cy.get('#a-button').should('satisfy', Cypress.dom.isVisible)
# Click waits for the element to become visible
Commands like cy.click
automatically wait for the element to become visible, no assertions necessary.
cy.get('#a-button').click()