Cypress iframe
Adds iframe support to Cypress.
Installation
npm install -D cypress-iframe
In your cypress/support/commands.js
file, add the following:
import 'cypress-iframe';
require('cypress-iframe');
If you're using typescript with cypress, and have not overridden the types
or typeRoots
in your tsc compiler options, then everything should work.
If you have overridden them, or if it otherwise doesn't work out-of-the-box, you will also either want to:
- Add
///<reference types="cypress-iframe" />
to the top of your cypress - Add a
globals.d.ts
in the root of your cypress
directory and add ///<reference types="cypress-iframe" />
to it
Usage
You can now use the three included commands.
frameLoaded
This command checks that an iframe has loaded onto the page
Example:
cy.frameLoaded()
cy.frameLoaded({ url: 'https://google.com' })
cy.frameLoaded({ url: '/join' })
cy.frameLoaded({ url: '?some=query' })
cy.frameLoaded({ url: '#/hash/path' })
cy.frameLoaded('#my-frame')
cy.frameLoaded('#my-frame', { url: '/join' })
iframe
This will cause subsequent commands to be executed inside of the given iframe
Example:
cy.iframe().find('.some-button').should('be.visible').click()
cy.iframe().contains('Some hidden element').should('not.be.visible')
cy.find('#outside-iframe').click()
cy.iframe('#my-frame').find('.some-button').should('be.visible').click()
cy.iframe('#my-second-frame').contains('Some hidden element').should('not.be.visible')
enter
This can be used to execute a group of commands within an iframe
Example:
cy.enter().then(getBody => {
getBody().find('.some-button').should('be.visible').click()
getBody().contains('Some hidden element').should('not.be.visible')
})
cy.enter('#my-iframe').then(getBody => {
getBody().find('.some-button').should('be.visible').click()
getBody().contains('Some hidden element').should('not.be.visible')
})