feat: iframe serialization #468
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Robdel12
approved these changes
Feb 21, 2020
| `) | ||
|
|
||
| const $frameInput = document.getElementById('frame-input') as HTMLIFrameElement | ||
| await when(() => !!$frameInput.contentWindow!.performance.timing.loadEventEnd) |
There was a problem hiding this comment.
❤️ Love this for handling async
Robdel12
reviewed
Feb 21, 2020
| if (!elem.getAttribute('data-percy-element-id')) { | ||
| createUID(elem) | ||
| elem.setAttribute('data-percy-element-id', createUID()) |
There was a problem hiding this comment.
Also, thanks for cleaning up my ugly code 🧹
djones
pushed a commit
that referenced
this pull request
Feb 21, 2020
# [0.22.0](v0.21.0...v0.22.0) (2020-02-21) ### Features * iframe serialization ([#468](#468)) ([0bf23af](0bf23af))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose
Currently, we only capture iframes during the asset discovery process. In which we only capture the response of the
srcattribute. If an iframe has been interacted with, navigated within, or built with JavaScript, we cannot properly capture that iframe.This PR aims to solve those limitations
Approach
During DOM serialization, we can retrieve the DOM of an iframe using
iframe.contentDocument. We can then recursively serialize that DOM, and once serialized set the content as asrcdocattribute. Thesrcattribute is then removed since it is no longer needed and might cause other issues.While dealing with iframes, we can also remove iframes from the
<head>. These iframes typically have no visual presentation and when they do, they often break pages since rerendering causes the browser to "fix" the<head>and pushes everything from the iframe down into an implicit<body>(and ignore the explicit<body>).The
contentDocumentproperty returnsnullfor iframes with security restrictions (CORS), so we have no way to serialize those iframes. We also do not want to serialize iframes that have not finished loading (even with CORS, you can access the DOM before it loads and incorrectly serialize an empty DOM). Firefox does not trigger load-related properties for iframes built with JS, so those iframes are always serialized (as long as JS is not enabled).There are simple tests included here, but as a complex example I manually tested this on a live site where the iframe has internal navigation on form submission. Results here.