How to wait until iframe will be loaded with Cypress

Question

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 ?

Fody · Answer 1 · 2022-06-09T02:39:21.997

There are a couple of things that can stop <iframe> code working, including cypress-iframe.

lazy-loading
```
<iframe src="https://example.com"
        loading="lazy"                  
        width="600"
        height="400"></iframe>
```
Standardized lazy-loading of iframes defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage.

default loading content message e.g "Page is loading", falsely passes the .should('not.be.empty') check

<body> element is changed when proper page is available, negating .its('body').should('be.visible') check

These are the additional steps I use

// when iframe has attribute loading="lazy" 
cy.get(iframeLocator).scrollIntoView()   // start loading

cy.get(iframeLocator)
  .its('0.contentDocument').should('not.be.empty')
  .its('body')
  .as('body')           // alias this command chain

cy.get('@body')         // repeats above chain when <body> detached from DOM (replaced)
  .should('be.visible')
  .should('not.be.empty')
  .then(cy.wrap)
  .find('div#some-content', {timeout:10000})

Thank you, tested with cy v 10. – WPPlumber Oct 09 '22 at 21:35 — WPPlumber, Oct 09 '22 at 21:35

score 1 · Answer 2 · answered Jun 09 '22 at 01:07

An iframe may have "iframe is loading" default, so not.be.empty or be.visible are false checks.

Try content check and make sure <body> query is retried

Cypress.Commands.add('getIframe', (iframeLocator: string): void => {
cy.get(iframeLocator)
    .its('0.contentDocument').should('not.be.empty')
    .its('body h1').should('contain', 'IFrame title')    // retry body
    .then(cy.wrap)
})

score 0 · Accepted Answer · answered Jun 08 '22 at 16:07

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' })

Decided to try this library. With such code: `cy.frameLoaded(iframeLocator); cy .iframe(iframeLocator) .find(element) .click()` — Igor Vlasuyk, Jun 09 '22 at 07:08

How to wait until iframe will be loaded with Cypress

3 Answers3