cypress contains element display order

Question

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

score 0 · Accepted Answer · answered Nov 22 '21 at 11:42

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

Thanks, your solution fix my problem. – Oliv' G. Nov 23 '21 at 15:10 — Oliv' G., Nov 23 '21 at 15:10

cypress contains element display order

1 Answers1