SDET Unicorns

Cypress Variables | How does it work?

Table of Content

In this tutorial, we will learn how to handle variables in Cypress. Dealing with variables in Cypress is not as straightforward as it seems due to the way Cypress work with promises. Let’s take a look at it –

Understanding the problem

  it("gets the text of the heading and assert the value", () => {
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      expect($heading.text()).to.eq("Think different. Make different.");
    })
  });

In the example above, we are trying to get the text of the element and then do an assertion on it. What if you want to use the heading text outside of the cy.get block, how can you do that? Simply, creating a variable like this would not work –

  it("gets the text of the heading and assert the value", () => {
    let headingText = '';
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      headingText = $heading.text()
      expect($heading.text()).to.eq("Think different. Make different.");
    })

    // X - would print just an empty string
    console.log(headingText); 
  });

The reason console.log would not print anything is because it will get printed even before the cy.get command gets executed as cy.get is an async command. So we need a way to wait for the cy.get command to be completed first and then print out our text.


Handling Variables in Cypress

There’s 2 ways you can handle variables within a test block in Cypress.

  • Accessing variable within the same block
  it("gets the text of the heading and assert the value", () => {
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      let headingText = $heading.text()
      expect($heading.text()).to.eq("Think different. Make different.");

      // Use the heading text value here
      console.log(headingText);   
    })
  });

This one is pretty straightforward as you can continue to created nested blocks within the same block as long as you need access to that context or variable.

  • Accessing variable outside the block
  it("gets the text of the heading and assert the value", () => {
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      let headingText = $heading.text();
      expect($heading.text()).to.eq("Think different. Make different.");
      
      // return the text so it can be used in .then as a parameter
      return headingText; 
    }).then(hText => {
      // hText param holds the value of the above returned text
      console.log(hText);
    })
  });

Using the .then block, you can access the previously returned value and then pass it as a parameter to the .then block. This way you can keep chaining multiple methods together if it’s within the same context.
Important thing to notice here is that it will only work with .then statement not .should.


To learn more, check out this video below –

Thanks for reading!

My Resources

Thrive Suite: The all-in-one WordPress theme I used to create my blog.
Jasper AI: My favorite AI writing tool.
Surfer SEO:  A tool to help you rank your content on the first page of Google.

Write Content Faster

5/5

Write blog posts that rank for affiliate terms!

Join our mailing list

Unlock the Secrets to Becoming a SDET Pro in the Industry!

Stay ahead of the curve! Join our mailing list for exclusive insights, tips, and the latest industry updates delivered straight to your inbox

Table of Content

Related Post

7 Principles of Software Testing

7 Principles of Software Testing with Examples

Software testing plays a crucial role in the software development life cycle as it helps ensure the quality, reliability, and performance of the final product. Software testing is not just about finding defects; it also provides valuable insights into the overall quality of the software. By conducting effective software testing, it shows how well the application behaves in different scenarios and whether it meets user expectations.

Read More »
Differences Between CI/CD and DevOps

Key Differences Between CI/CD and DevOps

Software development is far from a simple journey that involves merely executing code and launching applications. It often presents challenges, as it’s rare to get everything right from the start. Each time you implement new or frequent code changes, you inadvertently introduce potential issues that can be time-consuming to resolve. This complexity necessitates a structured approach to ensure smooth production.

Read More »