Last updated on Mar 5, 2023 by Suraj Sharma
In this tutorial, you will learn how you can check if an element is clickable in Cypress.
First, we will use the .should('be.visible')
method to check if an element is visible on the page, which is a good indicator that it is clickable.
Then, we will use the .should('be.enabled')
command to check if an element is enabled, which means it can receive click events.
Here's an example of how to check if an element is clickable in Cypress:
cy.get('.btn')
.should('be.visible')
.should('be.enabled')
.click(); // click the element if it is clickable
In this example, we're selecting an element with the class name .btn
and chaining the .should('be.visible')
and .should('be.enabled')
methods to check if it is clickable.
If the element is clickable, we're then using the .click()
method to trigger a click event on it.
We can also use the .should('have.attr', 'href')
command to check if an element has a href
attribute, which is a common attribute of clickable elements such as links and buttons.
Here's an example to use .should()
method in Cypress:
cy.get('.my-link')
.should('have.attr', 'href')
.and('include', 'example.com'); // check that the href includes a specific URL
In this example, we're selecting a link element with the class name .my-link
and using the .should('have.attr', 'href')
command to check if it has a href
attribute.
We're then using the .and('include', 'example.com')
command to check that the href
attribute includes the URL "example.com".
Related Solutions
Rate this post
Suraj Sharma is the founder of Future Gen AI Services. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.