[SOLVED] How to wait until iframe will be loaded with Cypress

How to wait until iframe will be loaded with Cypress

I have dynamically loading iframe in a application.

I'm catching a frame through this code:

Cypress.Commands.add('getIframe', (iframeLocator: string): void => {
cy.wait(10000)
cy.get(iframeLocator)
    .its('0.contentDocument').should('not.be.empty')
    .its('body').should('be.visible')
    .then(cy.wrap)
})

The problem is that - without explicit timeout cy.wait(10000) conditions not.be.empty and be.visible are passing fine, while there is no content of iframe on the page yet.

How to catch iframe without explicit wait ?

Solution

You can use the cypress-iframe plugin for this. After installing you can use the frameLoaded method.

// This will verify that the iframe is loaded to any page other than 'about:blank'
cy.frameLoaded()
 
// This will verify that the iframe is loaded to any url containing the given path part
cy.frameLoaded({ url: 'https://google.com' })
cy.frameLoaded({ url: '/join' })
cy.frameLoaded({ url: '?some=query' })
cy.frameLoaded({ url: '#/hash/path' })
 
// You can also give it a selector to check that a specific iframe has loaded
cy.frameLoaded('#my-frame')
cy.frameLoaded('#my-frame', { url: '/join' })