javascript - How to use value of var which is set inside .then() outside of .then()? - Stack Overflow

admin管理员组

文章数量:1391947

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

Share Improve this question Follow edited Jun 27, 2021 at 8:41 user14783414 asked Mar 4, 2021 at 8:18 Raziel ZoharRaziel Zohar 14922 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

本文标签： javascriptHow to use value of var which is set inside then() outside of then()Stack Overflow