DEV Community

Cover image for Cypress 💚 Iframes
Maxime Kubik
Maxime Kubik

Posted on • Updated 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.

  • Javascript:
// 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
  • Typescript:
// support/commands.ts

declare namespace Cypress {
  interface Chainable {
    iframe(): Chainable<Element>;
  }
}

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe: JQuery<Element>) => {
  return new Cypress.Promise<Element>(resolve => {
    $iframe.ready(() => {
      resolve($iframe.contents().find('body'));
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

Here is an example of usage (same as javascript):

// 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 (5)

Collapse
 
paulharshit profile image
Harshit Paul

Fantastic insight! For those interested, I stumbled upon a related piece online which offers an in-depth look at handling iFrames in Cypress. I believe this could be immensely beneficial for all of us.

Collapse
 
gyurielf profile image
gyurielf

Great!

Only one advice: Make a typescript version as well.

Collapse
 
mkubdev profile image
Maxime Kubik

Hey ! Thanks a lot. Ok nice idea, i will update the article to add a TypeScript version.

Collapse
 
milan_nicic profile image
Milan Nicic

Hi, great blog, did you update this for TypeScript too?

Collapse
 
mkubdev profile image
Maxime Kubik

Hi, i should update this for TypeScript, i will ping here if i update!