How to set attribute value in Cypress ?

Last Updated : 23 Sep, 2024

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.

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.

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.

Cypress - Get Attribute value and store in Variable

sachinyadavshiv8

Improve

Article Tags :

How to set attribute value in Cypress ?

Example to set attribute value in Cypress

Example 1: Setting the disabled Attribute on a Button

Explanation

Output

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

Explanation

Output

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?