Open In App

How to set attribute value in Cypress ?

Last Updated : 23 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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 commands such as invoke().

Example to set attribute value in Cypress

Example 1: Setting the disabled Attribute on a Button

In this example, we will set the disabled attribute to true on a button element.

HTML Code

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Attribute Example</title>
</head>
<body>
    <button id="submit-btn">Submit</button>
</body>
</html>

Cypress Test Code

JavaScript 
describe('Set Attribute on Button', () => {
  it('should set the disabled attribute on the button', () => {
    // Visit the page
    cy.visit('http://localhost:3000/button-example.html');
    
    // Set the "disabled" attribute to true
    cy.get('#submit-btn').invoke('attr', 'disabled', 'true');
    
    // Assert that the button is disabled
    cy.get('#submit-btn').should('be.disabled');
  });
});

Explanation

  • cy.get('#submit-btn'): Selects the button element with the ID submit-btn.
  • invoke('attr', 'disabled', 'true'): Uses invoke() to call the jQuery .attr() method to set the disabled attribute to true.
  • Assertion: Verifies that the button is disabled using .should('be.disabled').

Output

The button's disabled attribute is set to true, and the test confirms that the button is disabled.

output
Output

Example 2: Setting a Custom Data Attribute (data-test)

In this example, we will set a custom data-test attribute on a <div> element.

HTML Code

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Attribute Example</title>
</head>
<body>
    <div id="test-div">Test Div</div>
</body>
</html>

Cypress Test Code

JavaScript 
describe('Set Custom Data Attribute', () => {
  it('should set a custom data-test attribute on the div', () => {
    // Visit the page
    cy.visit('http://localhost:3000/div-example.html');
    
    // Set the "data-test" attribute
    cy.get('#test-div').invoke('attr', 'data-test', 'active');
    
    // Assert that the attribute has been set
    cy.get('#test-div').should('have.attr', 'data-test', 'active');
  });
});

Explanation

  • cy.get('#test-div'): Selects the <div> element with the ID test-div.
  • invoke('attr', 'data-test', 'active'): Uses invoke() to set the data-test attribute to active.
  • Assertion: Verifies that the data-test attribute has been set to active using .should('have.attr', 'data-test', 'active').

Output

The custom data-test attribute is set on the <div> element, and the test confirms that the attribute has the expected value.

output
Output

Conclusion

Setting an attribute value in Cypress is straightforward using the invoke() command combined with jQuery’s .attr() method. This allows you to manipulate the DOM dynamically during tests, making it easy to simulate different scenarios and verify element states.


Next Article
How to Change Class Attributes in Python
author
sachinyadavshiv8
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox