How to work on random pop ups in cypress?

Question

I have an application, where feedback pop up comes in a page randomly; like pop up may or may not come in the page after loading it for nearly 3000ms. How to handle this pop up in cypress.

I tried below code:

        cy.get("div.QSIFeedbackButton").then(($body)=> {

        if($body.find('.QSIWebResponsiveDialog-Layout1-SI_0rEzRx2V9yqm1Yq_close-btn > img')){

          cy.get('.QSIWebResponsiveDialog-Layout1-SI_0rEzRx2V9yqm1Yq_content').contains('Help us improve our portal!')        
          cy.get('.QSIWebResponsiveDialog-Layout1-SI_0rEzRx2V9yqm1Yq_close-btn > img').click()
         } 

          else {
            cy.log('feed back pop up not found')
          }
        })

But this one always fails in IF block, when the pop up doesn't appear. I want to run the test gracefully, so that even if the pop up doesn't appear test should not fail & it should go to the else block. How can i do this in my test?

Is there any way for you to programmatically set when the popup appears? Maybe with a cookie or localStorage value? It would be a better solution to only have to worry about it appearing when you want it to appear. — agoff, May 12 '22 at 13:25
Does `div.QSIFeedbackButton` exist when popup doesn't appear? — James, May 12 '22 at 14:39
@James yes..div.QSIFeedbackButton exists even when there is no pop up..but '.QSIWebResponsiveDialog-Layout1-SI_0rEzRx2V9yqm1Yq_close-btn > img' doesn't. — ss333iiii, May 12 '22 at 16:32
@agoff ideally this pop up should come every time. But due to some reason, its not appearing sometimes. So in that case we wanted to provide automation logs with " pop up doesn't appear msg" — ss333iiii, May 12 '22 at 16:34
***ideally this pop up should come every time*** - just isolate the popup checking in it's own test and let it fail. Why do you need to do all that work just to substitute a different log message? — TesterDick, May 12 '22 at 19:50

score 0 · Answer 1 · answered May 16 '22 at 12:29

0

If the popup disappears after some time, use this:

cy.get('random popup id').should('not.exist')

works great, because it checks if that popup exist in the DOM tree, even better if you can add testid to the popup

answered May 16 '22 at 12:29

Bogdan Pehlivanov

11
1

score 0 · Answer 2 · answered Mar 21 '23 at 16:08

You can use 'MutationObserver' which is an event listener that gets triggered when a node is/nodes are added or removed from the DOM. You can then check whether the modal shows up (or simply the close modal button):

cy.document().then((document) => {
      new MutationObserver(function () {
        const closeModelBtn = Cypress.$('button');
        if (closeModelBtn.length) {
          closeModelBtn.trigger('click');
        }
      }).observe(document.body, { childList: true, subtree: true });
});

Note: this is asynchronous and independent from cypress (your cypress code is not gonna wait for this to execute so you might face some issue with the actions that are occurring at the same time as this).

How to work on random pop ups in cypress?

2 Answers2