How to Wait for element Attribute to Change in Cypress? Last Updated : 24 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Cypress is a popular end-to-end testing framework that allows you to write fast, easy, and reliable tests for your web applications. One common scenario in web testing is waiting for an element's attribute to change before performing an action. In this article, we will explore how to wait for an element attribute to change in Cypress.ExampleLet's consider a simple example where we have a button with a disabled attribute that changes to enabled after a certain condition is met. We want to wait for the button's disabled attribute to change to false before clicking on it. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wait for Attribute Change</title> </head> <body> <button id="myButton" disabled>Click me</button> <script> setTimeout(() => { document.getElementById('myButton').disabled = false; }, 2000); </script> </body> </html> In our Cypress test, we can use the should() command to wait for the button's disabled attribute to change to false.Cypress Test Code JavaScript // cypress/integration/wait-for-attribute-change.spec.js describe('Wait for attribute change', () => { it('waits for button to be enabled', () => { cy.visit('index.html') cy.get('#myButton').should('not.have.attr', 'disabled') .click() .should('have.text', 'Click me') }) }) In the above code, cy.get('#myButton') retrieves the button element, and should('not.have.attr', 'disabled') waits for the button's disabled attribute to change to false.Terminal OutputWhen we run the test, Cypress will wait for the button's disabled attribute to change to false before clicking on it. The terminal output will look like this:OutputConclusionWaiting for an element attribute to change is a common scenario in web testing. Cypress provides a simple and intuitive way to achieve this using the should() command. By using should('not.have.attr', 'attributeName'), we can wait for an element's attribute to change to a specific value before performing an action. This makes our tests more reliable and efficient. Comment More infoAdvertise with us Next Article How to Wait for all Requests to Finish in Cypress? C chotumishraq3v1 Follow Improve Article Tags : Software Testing Testing Tools Cypress Similar Reads How to set attribute value in Cypress ? In Cypress, you may need to modify or set the value of an element's attribute during a test. This can be useful for dynamically updating the state of an element or manipulating the DOM to simulate different scenarios. You can set attribute values using jQuery methods like .attr() or Cypress's native 2 min read How to wait for a page to load in Cypress? In Cypress, waiting for a page to fully load is essential to ensure that the necessary DOM elements are available for interaction and that any asynchronous content (such as API responses or resources) has been fetched. While Cypress automatically waits for the page to load when using commands like c 4 min read How to get text from an element and store in a variable in Cypress? In Cypress, it's common to retrieve the text content from an element and use it for further actions or assertions. To store the extracted text in a variable for later use, Cypress provides commands like .then() or .invoke(), allowing you to handle the value outside of the usual Cypress chain.In this 3 min read How to Wait for all Requests to Finish in Cypress? Cypress is a powerful testing tool designed for end-to-end testing of web applications. It enables developers and testers to write tests that simulate user interactions, ensuring that applications work as expected across different browsers and environments. With its syntax and built-in tools, Cypres 4 min read How to Access element whose Parent is Hidden in Cypress? Cypress is a powerful tool for testing web applications. It ensures that user interactions occur as if the real user is using the application. As such, Cypress does not allow interactions with the elements that are hidden or non-visible. However, in certain cases, you may need to bypass this behavio 3 min read Wait for API after button click in Cypress When writing end-to-end tests, it's common to trigger API requests through user actions such as button clicks. Cypress provides a powerful way to wait for these requests and their responses using cy.intercept() and cy.wait(). By doing this, you ensure that your test doesn’t proceed until the API req 2 min read Like