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 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
block not .should
.
To learn more, check out this video below –
👩🏻💻 It's time to begin your SDET journey by joining the SDET-U Academy today 👇🏻
Join Academy
📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.
👍 You can follow my content here as well -
...
Thanks for reading!
Top comments (0)