how to wait for a popup which takes long to load in cypress

Question

I am testing a web application form that has popups and it takes a lot of time to load another popup form that needs to be filled

currently, I am using a wait of 20 sec which mainly works but sometimes popups take more than 20 seconds to load which makes my test script fail

the popup is triggered using a button, when the button is clicked ajax request is made and when the response comes the popup is loaded (rendered)

the popup usually takes this much time because Ajax requests take a long so I wanted to create a dynamic function that will wait for that popup to render

so I want to make a dynamic wait function which will wait for popup to render (note: its a popup not another page)

code:

    cy.get("div[class='question-btn'] a[class='btn btn-primary btn-lg cat-new-question-sortable']").click() 
    // button which triggers the popup

    cy.wait(9000)

    //multiple input, types get filled in the poup

    cy.get("input[value='Submit']").click()    // button which closes or submits the popup
    cy.wait(9500)



    cy.get("div[class='question-btn'] a[class='btn btn-primary btn-lg cat-new-question-sortable']").click() 
    // button which triggers the next popup and cycle repeats

Answer 1

There are a couple of options

Timeout on element instead of wait()

Add a timeout on an element on the popup that is much longer than the wait you currently have

A timeout is better than a wait() because you can make it really long (for this case maybe 60 seconds), but it only ever waits until the element appears.

cy.get('button').contains('Open my popup form').click()

// Now wait for an element
cy.get('input#element-on-the-popup-form', {timeout: 60_000})

Intercept

Add an intercept for the ajax request and wait on that.

cy.intercept('url-of-ajax-request').as('popup')

cy.get('button').contains('Open my popup form').click()

// Now wait for the intercept alias to fire - use same timeout strategy
cy.wait('@popup', {responseTimeout: 40_000})

cy.get('input#element-on-the-popup-form')

Mocking the response

Use a mock response for the intercept to eliminate the waiting period

cy.intercept('url-of-ajax-request', {some-mock-body-for-response})
  .as('popup')

cy.get('button').contains('Open my popup form').click()

cy.wait('@popup')

cy.get('input#element-on-the-popup-form')