DEV Community 👩‍💻👨‍💻

Cover image for Cypress 💚 Iframes

Posted on

Cypress 💚 Iframes


If you've ever used Cypress, you probably know that testing Iframes isn't always easy. Especially when you want to test a child iframe contained in a parent iframe.

That's why I created an example on one of the ways it could be used in this context 🌌

⚙️ An example of how to use Cypress to target nested elements within iframes.

With limited iframe support from Cypress [Issue #136], the following workaround in this repo allowed to target elements and interact with iframes during tests.


The solution is to create an iframe command that returns a promise upon iframe loading completion. These commands, aliased as iframe(), can be chained together to deal with nested iframes.

// support/commands.js

Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe => {
  return new Cypress.Promise(resolve => {
      $iframe.ready(function() {
Enter fullscreen mode Exit fullscreen mode

Here is an example of usage:

// One iframe
cy.get("#iframe").iframe().find("#target").type("HELLO WORLD");

// Nested iframes
cy.get("#firstFrame").iframe().find("#secondFrame").iframe().find('#target').type('HELLO WORLD');
Enter fullscreen mode Exit fullscreen mode


The Github repository

Top comments (1)

gyurielf profile image


Only one advice: Make a typescript version as well.

🤔 Did you know?

🌚 Dark mode is available in Settings.