This content originally appeared on DEV Community and was authored by DEV Community
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'));
});
});
});
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');
Links
The Github repository
Cypress.io
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-28T14:29:44+00:00) Cypress đź’š Iframes. Retrieved from https://www.scien.cx/2022/02/28/cypress-%f0%9f%92%9a-iframes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.