How to set attribute value in Cypress ?

How to Wait for element Attribute to Change in Cypress?

Last Updated : 24 Oct, 2024

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.

Example

Let'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 Output

When 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:

allcookies2 — Output

Conclusion

Waiting 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.

How to set attribute value in Cypress ?

C

chotumishraq3v1

Improve

Article Tags :

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

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

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 thi

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

How to Conditionally Add an Attribute for an Element in VueJS?

In VueJS, it's common to add attributes dynamically to HTML elements based on certain conditions. This allows for greater flexibility and control when rendering elements. Vue.js provides several ways to conditionally add or remove attributes depending on data, logic, or component state. we will expl

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

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

How to change style/class of an element using JavaScript ?

In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com

How to access a DOM element in React ?

React manages the rendering of components and updates the DOM automatically. However, there are situations where you may need to access a specific DOM element directly. We will use the Refs to access a DOM element in React. Refs provide a way to access DOM nodes or React elements created in the rend

How to Fire an Event When v-model Changes ?

v-model is the two-way binding directive that mainly creates the connection between the input element and the data property. In this article, we will see how we can fire an event when the v-model directive is changed. We will see the two different approaches with the practical implementation in term