I want to use a value of a var that is set inside of .then() in the outer scope

I tried

let numOfDropdownFields = 0;
cy.get("dropdown")
  .find("button")
  .its("length")
  .as("len")
  .then(($len) => {
    cy.log("No. of buttons:" + $len);
    numOfDropdownFields = $len;
    cy.get("@len").should("eq", numOfDropdownFields);
    cy.log(numOfDropdownFields);
  });
cy.log(numOfDropdownFields);

The first log prints: No. of elements: 14

The second log: 14

And the third log: 0

How can I see the value 14 outside the .then() callback?

I want to use a value of a var that is set inside of .then() in the outer scope

I tried

let numOfDropdownFields = 0;
cy.get("dropdown")
  .find("button")
  .its("length")
  .as("len")
  .then(($len) => {
    cy.log("No. of buttons:" + $len);
    numOfDropdownFields = $len;
    cy.get("@len").should("eq", numOfDropdownFields);
    cy.log(numOfDropdownFields);
  });
cy.log(numOfDropdownFields);

The first log prints: No. of elements: 14

The second log: 14

And the third log: 0

How can I see the value 14 outside the .then() callback?

• javascript
• testing
• cypress

2 Answers 2

What you are trying to achieve is considered an antipattern in cypress. Generally you should do everything you want to do with that Variable inside the .then(). Make sure to use Syntax like: .then() => {all your code in here}.

Look here for Reference: https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Aliases

Also you can Use Aliases like you already did with .as('len').

Each cy.something() function call is setting up a mand in the Cypress queue.

Commands that access the DOM like cy.get() and cy.find() take time to process, so you can think of them in the same way as promises, running asynchronously from the javascript in the test code.

The cy.log(numOfDropdownFields) line is actually executed before .its("length") happens, and at that time it grabs the current value of numOfDropdownFields which is 0.

But Cypress executes the mands in the queue in the order they were added, so the log appears to happen after the length code is run.

Just change cy.log() for console.log() and you will see the proper order of events.

This is the whole reason for the alias mechanism - it provides an alternate way to "wait" for the mand queue to catch up.

let numOfDropdownFields = 0;
cy.get("dropdown")
  .find("button")
  .its("length")
  .as("len")
  .then(($len) => {
    cy.log("No. of buttons:" + $len);                   // > 0
    console.log('I log second', $len);                  // > 0
    numOfDropdownFields = $len;
  cy.get("@len").should("eq", numOfDropdownFields);
  cy.log(numOfDropdownFields);                          // > 0
});
cy.log(numOfDropdownFields)                             // === 0
console.log('I log first', numOfDropdownFields);        // === 0
cy.get('@len').then(() => cy.log(numOfDropdownFields))  // > 0