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'));
      });
  });
});

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

• 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'));
    });
  });
});

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

Links

The Github repository
Cypress.io

Comments

[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.

[gyurielf]

Great!

Only one advice: Make a typescript version as well.

[Maxime Kubik]

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

[Milan Nicic]

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

[Maxime Kubik]

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