Support snapshotting iframes

[xfumihiro]

Will be useful for cases like running storybook tests with cypress

[jennifer-shehane]

Thanks for opening this. I wanted to add some context from our original decision to not snapshot iframes here for those curious:

Current implementation since Cypress v 0.17.5

Currently, iframes are removed from snapshots, which is necessary because we don't want any requests made when restoring a snapshot.

When creating a snapshot, we iterate through any iframes on the page and grab their box model properties and url. In their place, we put a div with the same box model properties and labeled with the url and then style it saying <iframe> placeholder

Example of iframe when viewing snapshot

[imaneok]

Did you found any solution for that issue?

[techieshark]

@jennifer-shehane I am curious what the suggested practice is for dealing with something like the following:

Using Stripe Checkout.js, a widget pops up in an iframe. If an invalid credit card is provided, the widget highlights (in red) the card number. To test this case, I can currently check that the iframe body is visible. However, were that to fail, it seems like a snapshot of the iframe would be useful to see what had happened instead.

Futhermore, best practices suggest not waiting an arbitrary time, but I'm inclined to wait for at least a second so human observers can see what is happening, since they cannot go back and see the snapshot (since Cypress won't snapshot iframes).

[parostatkiem-zz]

We would also love to see iframe snapshots. Our app is based on one main <iframe> where all the magic happens and sometimes it's impossible to identify errors via Cypress :(

If it was a big problem for you to make iframe snapshot working, a temporary workaround with saving iframe content to an image and displaying it instead of <iframe> placeholder for... would be useful too :)

[KyorCode]

For those who strand here concerning storybook testing:

Storybook can be tested without the iframe hocus pocus. In the top right corner there should be a button to 'Open canvas in new tab'. This will render your story and only your story in a new tab.

Instead of visiting the main storybook pages, you can direct cypress to visit those pages instead.

For example.

If you have http://localhost:6006/?path=/story/form-controls--numericinput and want to test it with cypress visit: http://localhost:6006/iframe.html?id=form-controls--numericinput instead. No awkwardness to press buttons/links in the menu to render the iframe. Just you, cypress and your story of components.

[lots0logs]

@jennifer-shehane We desperately need this. Our app runs primarily inside of an iframe so currently when tests fails we can't see anything due to how iframes are handled currently. I think @parostatkiem's idea would make for a quick and easy improvement on the status quo. I think a more complete solution worth exploring would be doing snapshots of iframes just like you do them for the app's top window (traversing the tree and getting the data needed for the snapshot).

[VGBenjamin]

Hello,

I also need it in fact in most CMS I know the magic happens in iframe so it makes it unusable for cypress :-/ Don't you have a workaround for this?

[froodian]

Is there really no way around this? The iframe in question for me does not use the src attribute, so there should be no request activity associated with snapshotting it.

[jennifer-shehane]

We are currently planning out work for iframe support. Showing the snapshot of iframes is planned as part of that work.

'Snapshotting' (or time travel) requires that we capture the entire DOM and restore that entire DOM when the previous commands are hovered over. With iframes, we will have to capture the entire DOM of each iframe AND also the main application under test and restore all of the DOMs together - with the iframe's DOM in the correct positioning. This can be further complicated if they are cross-domain iframes.

It's a challenge but, this is what we intend to do as we move forward with iframe and multi-domain support.

[LegendForHire]

Has any work been done on this? If it’s not already in progress, we’re having discussions at my company about contributing to at least this feature. I think I have a grasp on the source code well enough from attempting a work around to make this possible for at least snapshots, but before attempting wanted to see if this was already in progress or planned to be by someone.

[karthikajayaseelan]

I was able to load the iframe with cypress v6 cy.visitWithAuth('') .then(() => { cy.get('iframe'); cy.wait(2000); cy.get('[class="test"]').matchImageSnapshot(); });

[jaapvanblaaderen]

@jennifer-shehane Would it be possible to give an update on this issue? Thanks!

[eleni-salamani]

any news on this one?

[BillCarterNet]

Hi This has been open since 2018, is this ever likely to be worked on? Cheers

[carms-ng]

Hello there~

Gonna give this a bump, as this feature could be immensely useful for us as well! Is this being worked on?

[repomadness]

@jennifer-shehane hey there! Would you be able to provide an update regarding when Cypress expects to have iframe snapshot support in place?

For context, this is presenting a challenge for folks trying to capture snapshots with Chromatic using E2E with Cypress, as we're capturing based on the DOM captured during Cypress tests. Because of this, we aren't able to capture iframe content since it isn't included in the test archive that gets created.

[euronics-io]

Bump... rly wanted function <3 iframes and popups ;)

@jennifer-shehane any timeline?