Comments (5)
Hey @mitar! I debugged this and it seems related to some nested iframes that are accessible for serialization, but don't actually contain expected document elements. Essentially, iframe.contentDocument
exists, but document.documentElement
does not for one of the iframes on some of your pages. From my brief research, this can only be possible if the document is accessed before the HTML element for the document have been rendered, or if the document is purposefully empty.
After I figure out how to test this one properly, I'll add a fix which will skip serializing iframes that do not have document elements. This will suppress that error, but might result in unexpected or flakey snapshots when re-rendering in Percy's infrastructure without serialized frames (for example, if they aren't intended to be empty and are not publicly accessible from within Percy's rendering environment).
In the meantime, you might be able to work around the issue either by waiting longer for the page to settle before taking the snapshot, or by finding and removing troublesome frames before the DOM is serialized. I see you're using the snapshot command on a static directory, so it may take a bit of work to convert to a page listing file to be able to pass in wait or execute options. We are going to be adding better documentation and a few more features to this command soon that will make these options easier to use with static directories.
Another quick option you might try is the --network-idle-timeout
flag (which defaults to 100
ms). This is meant to signal to asset discovery how long to wait after network activity has stopped before the page is considered to be idle. This might have the effect of waiting long enough for those iframes to be settled, but the the other wait options would be more reliable. Of course, if the iframes purposefully have empty documents, neither this nor the wait options will work and you'll need to wait for the fix to ship or to remove the iframes before they get serialized.
from cli.
This might have the effect of waiting long enough for those iframes to be settled, but the the other wait options would be more reliable.
The CI above already included 1000 ms as the timeout value. Are you sure that network timeout captures the networking in iframes, too? Because it does not feel to me like it really influences anything for iframes.
Of course, if the iframes purposefully have empty documents
No, none is empty on purpose. And on all pages they are the same iframes (twitter and disqus).
In my case I think simply removing all iframes would probably work. Maybe an option to CLI which would do that would be best? I already hide some iframes.
from cli.
Ah, I missed the timeout option in the CI run. "Purposefully empty" could be that Twitter or Disqus have nested iframes and one of the intermediary iframes or maybe even a main iframe could have some protection in place to prevent reading the DOM. I'll be working on a simple reproduction for tests shortly, but it may be as simple as the script they run unsets the document element property.
I'll start working on a test now for ignoring iframes that are missing document elements. If you don't see a mention in a PR in the next hour or so, I'll have it finished up tomorrow. As for more options for the snapshot CLI command, that work will probably happen over the next couple of weeks alongside better documentation.
If you want to work around this right away, you'll need to convert to using a page listing file in order to provide pages an execute
option to run before the snapshot is serialized. That unfortunately would involve you starting up your own server and iterating over the pages like the command does internally.
Based on the example JS page listing in the linked doc and the page iteration in the command source, you could map over the filenames and return the local URL, name, and then the execute function. To use the page listing, start your server and run the snapshot command with the page listing file. Here's what that might look like (untested):
// percy-snapshots.js
const globby = require('globby');
const SERVER_ADDR = 'http://localhost:8008/';
const PUBLIC_DIR = './public';
const SNAPSHOT_FILES = ['*.html'];
const IGNORE_FILES = [];
module.exports = async () => {
let paths = await globby(SNAPSHOT_FILES, {
cwd: PUBLIC_DIR,
ignore: IGNORE_FILES
});
return paths.map(path => ({
name: path,
url: `${SERVER_ADDR}${path}`,
// this function runs in the browser before the snapshot is taken
execute() {
document.querySelector('.problem-iframe').remove();
}
}));
}
# start your server first, then run
$ percy snapshot percy-snapshots.js
from cli.
Fixed in v1.0.0-beta.50
from cli.
Awesome! I also made #343 as a followup.
from cli.
Related Issues (20)
- v.1.26.3 breaks storybook config HOT 1
- Error: Navigation failed: Timed out waiting for the page load event - breaks our tests HOT 9
- 500 Internal Server Error - GET https://registry.npmjs.org/@percy%2fcli-config - KV GET failed: 401 Unauthorized HOT 2
- Please allow longer network idle timeouts HOT 2
- Cannot read properties of undefined (reading 'id') HOT 1
- Set browser prefers-color-scheme to test apps in dark mode HOT 1
- H
- [percy:core] Error : Timed out waiting for network requests to idle HOT 1
- Percy is not running, disabling snapshot HOT 4
- Browserstack: Build not created, Error: connect ECONNREFUSED HOT 3
- Bumping to different versions [Dependabot] HOT 1
- Reference Error: Excessive alias count indicates a resource exhaustion attack in percy url yaml with 360 url items HOT 2
- [percy] ParseError: Unexpected argument 'storybook'
- Percy exec fails binding to ipv6 HOT 2
- 413 Payload Too Large
- static.ignore option doesn't work
- Using PERCY_ENABLE can lead to NPE HOT 4
- V1.28.2 introduces a bug causing our CI to fail due to bad requests HOT 3
- Base64 encoded SVGs cause error when capturing HOT 2
- Add `percy exec` flag to avoid failure for Percy-related issues HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cli.