{"pageProps":{"post":{"title":"How to check if an element is clickable in Cypress","excerpt":"Learn how you can check if an element is clickable in Cypress","date":"2023-03-05T01:00:00.000Z","slug":"cypress-check-if-element-is-clickable","author":{"name":"Suraj Sharma","picture":""},"content":"\n<br>\n\nIn this tutorial, you will learn how you can check if an element is clickable in Cypress.\n\n<br>\n\nFirst, 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. \nThen, we will use the `.should('be.enabled')` command to check if an element is enabled, which means it can receive click events.\n\nHere's an example of how to check if an element is clickable in Cypress:\n\n<br>\n```javascript\n  cy.get('.btn')\n  .should('be.visible')\n  .should('be.enabled')\n  .click(); // click the element if it is clickable\n```\n\n<br>\n<br>\n\nIn 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.\nIf the element is clickable, we're then using the `.click()` method to trigger a click event on it.\n\n<br>\n\nWe 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.\n\nHere's an example to use `.should()` method in Cypress:\n\n<br>\n```javascript\n  cy.get('.my-link')\n    .should('have.attr', 'href')\n    .and('include', 'example.com'); // check that the href includes a specific URL\n```\n\n<br>\n<br>\n\nIn 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. \nWe're then using the `.and('include', 'example.com')` command to check that the `href` attribute includes the URL \"example.com\".\n\n<br>\n<br>\n\n**Related Solutions**\n\n- [How to generate random uuid in Node and Express](/blog/express-generate-uuid)\n\n- [How to convert ASCII code to a character in JavaScript](/blog/javascript-ascii-code)\n\n- [How to sort an array of strings and numbers in JavaScript](/blog/javascript-array-sort-alphanumeric)\n\n- [How to check if a value exists in an Array of Objects in JavaScript](/blog/check-object-in-javascript-array)\n\n<br>\n","coverImage":{"url":"/images/cover-image.png"},"url":"cypress-check-if-element-is-clickable","hashtags":"#javascript #cypress"}},"__N_SSG":true}