cypresse2e

cypress contains element display order


I'm writting e2e test with cypress: I would like to test the display of 2 modal popup: A and B in the IHM. But due to the network or the server latency, A may be displayed before B or B may be displayed before A. How write this kind of test with cypress ?

Actually I'm stuck because if I write

cy.get("[data-cy='dialog-confirm-content']").contains(data.notifA, {timeout: 20000});
cy.get("[data-cy='dialog-confirm-content']").contains(data.notifB, {timeout: 20000});

it doesn't work if B appear before A...

Thanks, Olivier


Solution

  • Assuming this is the flow. First pop up is displayed and then it goes away and then again second pop-up comes, You can do something like this:

    cy.get("[data-cy='dialog-confirm-content']").then((text) => {
      expect($ele.text().trim()).to.be.oneOf([data.notifA, data.notifB])
    }) //Checks Notification 1 Msg either A or B
    
    cy.get("[data-cy='dialog-confirm-content']").should('not.exist') //Notification goes away
    
    cy.get("[data-cy='dialog-confirm-content']")
      .should('be.visible')
      .then((text) => {
        expect($ele.text().trim()).to.be.oneOf([data.notifA, data.notifB])
      }) //Checks Notification 2 Msg either A or B