javascript - Wait for async method in for loop in Cypress - Stack Overflow

admin管理员组

文章数量:1290997

Edit: Why this is not a duplicate: because Cypress, just read instead of tagging everything as duplicate.

Edit 2: Also, see answer for better understanding of the differences between usual async for loops problems and this question.

---

I am writing cypress tests and I want to create a cypress mand that populates my database with a list of users. I want the creation loop to wait for each user to be created before it moves on to the next one (because I want that done in a specific order).

For now, my loop looks like this:

Cypress.Commands.add("populateDb", (users) => {
  var createdItems = []

  for (const user of users) {
    cy.createUser(user, 'passe').then(response => {
      createdUsers.unshift(response.body.user)
    })
  }
  return createdItems
})

Of course, this loop does not wait for each user to be created before moving onto the next one (I want 'sequential treatment', NOT 'parallel and then wait for all promise to resolve')

I have read the answers about async for-loop here:

• JavaScript ES6 promise for loop
• Using async/await with a forEach loop
• How do I return the response from an asynchronous call?

But I can't seem to find what I want, mainly because cypress wont allow me to declare my function as async as follow :

Cypress.Commands.add("populateDb", async (users) => {
    //Some code
})

And If I don't declare it async I am not able to use await.

Isn't there some king of get() method that just synchronously wait for a Promise to resolve?

Edit: Why this is not a duplicate: because Cypress, just read instead of tagging everything as duplicate.

Edit 2: Also, see answer for better understanding of the differences between usual async for loops problems and this question.

---

I am writing cypress tests and I want to create a cypress mand that populates my database with a list of users. I want the creation loop to wait for each user to be created before it moves on to the next one (because I want that done in a specific order).

For now, my loop looks like this:

Cypress.Commands.add("populateDb", (users) => {
  var createdItems = []

  for (const user of users) {
    cy.createUser(user, 'passe').then(response => {
      createdUsers.unshift(response.body.user)
    })
  }
  return createdItems
})

Of course, this loop does not wait for each user to be created before moving onto the next one (I want 'sequential treatment', NOT 'parallel and then wait for all promise to resolve')

I have read the answers about async for-loop here:

• JavaScript ES6 promise for loop
• Using async/await with a forEach loop
• How do I return the response from an asynchronous call?

But I can't seem to find what I want, mainly because cypress wont allow me to declare my function as async as follow :

Cypress.Commands.add("populateDb", async (users) => {
    //Some code
})

And If I don't declare it async I am not able to use await.

Isn't there some king of get() method that just synchronously wait for a Promise to resolve?

• javascript
• asynchronous
• cypress

Share Improve this question Follow edited Oct 12, 2018 at 9:29 Tom asked Oct 10, 2018 at 14:56 TomTom 1,45722 gold badges1616 silver badges3535 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Using a bination of wrap and each cypress mand I was able to achieve a loop that waits for each iteration and can return the full results without needing a global variable.

The only reason I use the wrap mand is because the cypress mand each requires it to be chained off a previous cypress mand. The each mand will evaluate each iteration and finally call the then where you can return the plete results array. I am using this to upload multiple files and return the list of keys, but you can modify this for your own need.

Cypress.Commands.add("uploadMultipleFiles", (files) => {
    var uploadedS3Keys = []
    cy.wrap(files).each((file, index, list) => {
        cy.uploadFileToOrdersApi(file)
            .then(s3Key => uploadedS3Keys.push(s3Key))
    }).then(() => uploadedS3Keys)
})

Turns out there is a reason why cypress is so restrictive about what you can do about waiting for async method to resolve: it always automatically runs all the async mands in sequential order, as they are called, not in parallel, so this will execute in the right order even if createUser is Async :

Cypress.Commands.add("populateDb", (users) => {
  for (const user in users) {
    cy.createUser(user).then(response => {
      console.log(response)
    })
  }
})

If you want to get the value of what is returned (in my case, I need the user ID to delete them later), you can just store them in a var at file root level and add a cypress mand that returns that var.

var createdItems = []

Cypress.Commands.add("getCreatedItems", () => {
  return createdItems
})

Cypress.Commands.add("populateDb", (users) => {
  for (const user in users) {
    cy.createUser(user).then(response => {
      createdItems.unshift(response) // I unshift() because I need to delete them in FILO order later
    })
  }
})

Then in the cypress test file you can just call them in the order you need them to execute :

cy.populateDb(users)
cy.getCreatedItems().then(response => {
  //response is my createdItems Array, and cy.getCreatedItems() will run only when cy.populateDb() is resolved
})

You could do it also like:

Cypress.Commands.add("populateDb", (users) => {
  for (const user in users) {
    cy.createUser(user).then(response => {
      createdItems.unshift(response) // I unshift() because I need to delete them in FILO order later
    })
  }

  return createdItems;
})

cy.populateDb(users).then(response => {
  // ... runs after populate ...
})

But the other answer is also right. Each cy.xxxxx mand is actually added to mand queue and ran one after each other. If during queue execution new cy.xxxxx2 mands are called, they will be added to front of the queue.

Here is simple example to explain the execution order of cypress mand queue and synchronous code:

const a = 1; // a == 1

cy.cmd1().then(() => {
  cy.cmd2().then(() => {
    a += 1; // a == 5
  });

  a += 1; // a == 3

  cy.cmd3()
  a += 1; // a == 4
});

cy.cmd4().then(() => {
  a += 1; // a == 6
});

a += 1; // a == 2

// at this point cypress mand queue starts running the queue that is cmd1, cmd4

// 1. cmd1 runs and adds cmd2 and cmd3 to front of mand queue also adds +2 to a
// 2. cmd2 runs and adds +1 to a
// 3. cmd3 runs
// 4. cmd4 runs and adds +1 to a
// ... all done ...

So from this example you can see that in your case you loop will be executed serially, because each cy.createUser is added to cypress mand queue and executed then sequentially.

本文标签： javascriptWait for async method in for loop in CypressStack Overflow