DEV Community

Cover image for Cypress 💚 Iframes
Maxime Kubik
Maxime Kubik

Posted on • Edited on

Cypress 💚 Iframes

#cypress #javascript #todayilearned #beginners

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!