Plugin cypress-iframe

https://www.npmjs.com/package/cypress-iframe

Install

import 'cypress-iframe'

frameLoaded

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

iframe

// This will verify that the iframe is loaded to any page other than 'about:blank'
cy.iframe().find('.some-button').should('be.visible').click()
cy.iframe().contains('Some hidden element').should('not.be.visible')
cy.find('#outside-iframe').click() // this will be executed outside the iframe
 
// You can also give it a selector to find elements inside of a specific iframe
cy.iframe('#my-frame').find('.some-button').should('be.visible').click()
cy.iframe('#my-second-frame').contains('Some hidden element').should('not.be.visible')

Issue You may have

When you encounter an automation test case that requires you to open two browser tabs to execute it.

Then you will find that Cypress says they will never support for multiple browser tabs, after checking the official documentation.

https://docs.cypress.io/guides/references/trade-offs#Permanent-trade-offs-1

browsertabs.png


Here is My Solution

create an iframe by using Element.append() to complete it.

  1. create an iframe
    https://stackoverflow.com/questions/8726455/creating-an-iframe-using-javascript
  2. Element.append()
    https://www.javascripttutorial.net/javascript-dom/javascript-append/
  3. An Example For You
    I can not show my code directly due to commercial reasons, so I wrote a demo using elements from ‘https://mochajs.org/‘.
    it('test', () => {
       cy.visit('https://mochajs.org/')
       cy.get('main#content a').contains('Node.js').then(($el) => {
           cy.get($el).click()
           var iframe = document.createElement('iframe');
           iframe.src = $el.href;
           iframe.id = 'test'
           iframe.width = 700
           Cypress.$($el).append(iframe)
           // cy.frameLoaded('#test')
           // You can go on your automation
       })
    })
    iframeExample.png