DEV Community 👩‍💻👨‍💻

Cover image for Cypress 💚 Iframes
Kubdev
Kubdev

Posted on

Cypress 💚 Iframes

Hello,

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.

Explanation

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() {
        resolve($iframe.contents().find('body'));
      });
  });
});
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

Links

The Github repository
Cypress.io

Top comments (1)

Collapse
gyurielf profile image
gyurielf

Great!

Only one advice: Make a typescript version as well.

🤔 Did you know?

 
🌚 Dark mode is available in Settings.