Cypress - Get Attribute value and store in Variable

Last Updated : 23 Oct, 2024

In Cypress, you can retrieve an attribute value of an element using the .invoke() method. This is helpful when you need to store an attribute value for further use in your test. For instance, you might want to grab the value of a href, id, or src attribute from an element and then perform assertions or reuse the value in other steps.

In this example, we will demonstrate how to get the value of an element’s attribute, store it in a variable, and then use that variable in subsequent test steps.

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>Attribute Value Example</title>
</head>
<body>
    <h1>Get Attribute Example</h1>
    <a id="myLink" href="https://example.com" target="_blank">Visit Example.com</a>
</body>
</html>

In this HTML code, we have a simple anchor (<a>) tag with the href attribute pointing to an external website and the id attribute for easy access in Cypress.

Cypress Test Code

JavaScript

describe('Get and Store Attribute Value', () => {
    it('should retrieve the href attribute and store it in a variable', () => {
        // Visit the page
        cy.visit('http://localhost:3000');

        // Declare a variable to store the attribute value
        let hrefValue;

        // Get the href attribute from the anchor tag and store it
        cy.get('#myLink')
            .invoke('attr', 'href')
            .then((href) => {
                hrefValue = href;

                // Log the value to verify
                cy.log('The href value is: ' + hrefValue);

                // Use the href value in an assertion or other steps
                expect(hrefValue).to.equal('https://example.com');
            });

        // Additional actions using the hrefValue
        cy.log('Using hrefValue for another step');
    });
});

Explanation

Visit the Page:
- We use cy.visit('http://localhost:3000') to navigate to the page containing the anchor tag.
Retrieve the Attribute Value:
- Cypress retrieves the href attribute of the anchor tag using cy.get('#myLink').invoke('attr', 'href').
- We use .then() to store the attribute value in the hrefValue variable.
Logging the Value:
- We log the attribute value using cy.log() to ensure it’s captured correctly.
Assertion:
- The expect(hrefValue).to.equal('https://example.com') statement checks that the value of the href attribute is as expected.
Further Actions:
- After retrieving the value, you can use it in further test steps. For example, you could use it in navigation, additional assertions, or to interact with other elements.

Output:

After running the test, Cypress will log the following output:

The href value is: https://example.com

The test will also pass if the href value matches 'https://example.com'.

Conclusion

Using .invoke('attr', ...) in Cypress allows you to retrieve and store the value of any attribute from an element. This can be particularly useful when working with dynamic elements, links, or other attributes that need to be accessed throughout the test. By storing the attribute value in a variable, you can use it in assertions or further steps in your test. This provides flexibility and control over how you interact with and validate elements during test execution.

What's the difference between element value and data attribute ?

codersaksyevt

Improve

Article Tags :

Cypress - Get Attribute value and store in Variable

Explanation

Output:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?