Cypress iframe
This packages adds iframe support to Cypress.
This repository is a fork of cypress-iframe
, originally created
by Kevin Groat (kgroat).
Installation
npm install -D @deepsquare/cypress-iframe
yarn add -D @deepsquare/cypress-iframe
pnpm install -D @deepsquare/cypress-iframe
In your cypress/support/commands.js
file, add the following:
import '@deepsquare/cypress-iframe';
require('@deepsquare/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 tests in which you use the commands - 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');
});
Caveat
Cypress does not take snapshots of dom state inside of iframes. Therefore, even if you are using this library, in your
tests, when you hover over commands executed within an iframe, a placeholder will be displayed rather than the actual
contents of the iframe when the command was executed.