Cypress - Iterate over each element and perform some action before moving to next iteration / element

user_1829500 0
Viewed 3514

I have below issue in cypress:

  1. Get all table cells of a particular column containing a button.
  2. Iterate over each cell --> locate button within that cell.
  3. click on that button.
  4. wait for modal dialog to appear
  5. accept on modal and wait for it to disappear.
  6. wait for a notification to appear and then disappear.
  7. move to next cell element / iteration

Code that I have so far:

cy.get("tr[some attribute]").each(($element, $index, $list) => {
cy.wrap($element).find("button").click();
cy.get(".modal-dialog").should('be.visible');
cy.get(".modal-dialog button[type='submit']").should('be.visible').click();
cy.get("toast").should('be.visible').as('@toast')
cy.get('@toast').should('not.be.visible')
})

Issues Here:

  1. The cypress doesn't waits for the first iteration to finish and runs all iteration. I can see multiple modal-dialogs opened up.
  2. Cypress asynchronously clicks on all the buttons without waiting for previous iteration to finish.
  3. cypress fails on step where it expects toast to disappear although i can see the toast message is not there.

Thanks in advance!

cypress
2 Answers

I ran a simple app with modal and toast. If you fix the toast part of the test it's possible to iterate the rows with .each()

To fix the toast you need to drop the alias and cy.get('toast') a 2nd time.

The alias value is stored internally and will not change when should() executes a retry. Remember, toast will stay on screen for some seconds so you must use retry to test it has gone. (You may need to increase timeout depending on toast duration).

Minimal changes to fix:

cy.get("tr[some attribute]").each(($row) => {
  cy.wrap($row).find("button").click();
  
  cy.get(".modal-dialog").should('be.visible');
  cy.get(".modal-dialog button[type='submit']").should('be.visible').click();

  cy.get("toast").should('be.visible')
  // timeout must exceed toast auto-close period
  // if you run the test in background or in CI, allow a few seconds extra
  cy.get('toast', {timeout:10000}).should('not.be.visible') 

})

I only get one toast on the screen at a time and the iteration waits for cy.get('toast', {timeout:10000}).should('not.be.visible') to complete.

user_169977070

1/2. By the looks of it, it seems you are fetching all the rows and then iterating through each row. If a button html element only exists in the column you stating than you move the .find() command just above the .each().

  1. The alias seems a bit unnecessary if you are only using it for a command immediately after the alias set. Also since v6.0.0, the assertion should be not.exist.

Here is what your update code should look like.

cy.get("tr[some attribute]")
  .each( $row => {
     cy.wrap($row)
       .find("button[type=submit") // get only cell with button type submit
       .should('be.visible') // may want to play around with command timeouts based on your button appearing
       .click()
     cy.get(".modal-dialog")
       .should('be.visible') // modal appears
       .find(button[type='submit']")
       .should('be.visible') // button appears in modal
       .click();
     cy.get("toast").should('be.visible') 
     cy.get("toast").should('not.exist') // no exist in DOM
})
user_179178090
Related