How to get text from an element and store in a variable in Cypress?

Last Updated : 24 Oct, 2024

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 example, we will demonstrate how to extract text from an element and store it in a variable for further use within Cypress tests.

Example to get a text from an element and store it in a variable in Cypress

HTML Code (Element with Text)

Here’s a simple example where we retrieve and store the text from a <div> element:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Extraction Example</title>
</head>
<body>
    <div id="greeting">Hello, World!</div>
</body>
</html>

Cypress Test Code

Below is a Cypress test that retrieves the text from the <div> with id="greeting" and stores it in a variable:

JavaScript

describe('Get text from an element and store in a variable', () => {
  it('should retrieve and store the text from the div element', () => {
    // Visit the page
    cy.visit('index.html');

    // Declare a variable to store the text
    let textFromDiv;

    // Get the text from the element and store it in the variable
    cy.get('#greeting').then(($div) => {
      textFromDiv = $div.text(); // Extract the text
    });

    // Further actions can be done using the variable textFromDiv
    cy.then(() => {
      // Log the stored text
      cy.log(textFromDiv);

      // Example: Perform assertions using the stored text
      expect(textFromDiv).to.equal('Hello, World!');
    });
  });
});

Explanation

Visit the page: cy.visit('index.html') loads the page containing the element with the text we want to extract.
Declare a variable: let textFromDiv; is used to declare an empty variable where we will store the extracted text.
Get and store the text:
- cy.get('#greeting') selects the <div> element with the id="greeting"
- Inside .then(($div) => { ... }), we extract the text using $div.text(), and store it in the textFromDiv variable.
Further actions with the stored text: Inside another Cypress command block (cy.then()), we can log the stored text using cy.log(textFromDiv) and perform assertions using the variable (e.g., expect(textFromDiv).to.equal('Hello, World!')).

Output

When you run this test, Cypress will:

Extract the text "Hello, World!" from the <div> element.
Store the text in the variable textFromDiv.
Log the text in the Cypress output and verify that it matches the expected value.

Conclusion

Storing text from an element in a variable in Cypress is achieved by combining .then() with standard JavaScript variable assignment. This approach allows you to use the extracted text in subsequent assertions or actions, ensuring that you can flexibly handle the values you retrieve during your tests.

How do I get Cypress just to process the visible element?

codersaksyevt

Improve

Article Tags :

How to get text from an element and store in a variable in Cypress?

Example to get a text from an element and store it in a variable in Cypress

Explanation

Output

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?