cypress-iframe

What is cypress-iframe?

The cypress-iframe npm package provides custom commands for handling iframes in Cypress tests. It simplifies the process of interacting with elements within iframes, which can be challenging with standard Cypress commands.

What are cypress-iframe's main functionalities?

Loading an iframe

This command checks if the iframe with the specified selector has loaded. It ensures that the iframe content is fully loaded before proceeding with further actions.

cy.frameLoaded('#my-iframe')

Switching to an iframe

This command switches the context to the specified iframe and allows you to interact with elements inside it. In this example, it finds a button inside the iframe and clicks it.

cy.iframe('#my-iframe').find('button').click()

Custom iframe selector

This command allows you to specify an iframe by its URL and then interact with elements inside it. In this example, it finds an h1 element inside the iframe and checks if it contains the text 'Example Domain'.

cy.iframe({ url: 'https://example.com' }).find('h1').should('contain', 'Example Domain')

Other packages similar to cypress-iframe

cypress-plugin-tab

The cypress-plugin-tab package provides custom commands for tabbing through elements in Cypress tests. While it does not specifically handle iframes, it offers similar functionality in terms of extending Cypress commands to interact with elements in a more intuitive way.

cypress-file-upload

The cypress-file-upload package provides custom commands for handling file uploads in Cypress tests. Like cypress-iframe, it extends Cypress's capabilities to handle specific scenarios that are not straightforward with the default commands.

README

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';
// or
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:

1. Add ///<reference types="cypress-iframe" /> to the top of your cypress
2. 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:

// 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 cause subsequent commands to be executed inside of the given iframe

Example:

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

enter

This can be used to execute a group of commands within an iframe

Example:

// This will verify that the iframe is loaded to any page other than 'about:blank'
cy.enter().then(getBody => {
  getBody().find('.some-button').should('be.visible').click()
  getBody().contains('Some hidden element').should('not.be.visible')
})

// You can also give it a selector to find elements inside of a specific iframe
cy.enter('#my-iframe').then(getBody => {
  getBody().find('.some-button').should('be.visible').click()
  getBody().contains('Some hidden element').should('not.be.visible')
})