Cypress: 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]

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?