percySnapshot sometimes captures part of the page and sometimes full page #184
Comments
|
Hi @frixatrix! This can potentially happen for a number of reasons depending on your styles and layout. Percy captures the DOM as-is during a snapshot and sends that off to our servers for re-rendering. - So if the sizing of that element is determined by JS setting explicit widths and heights, it's size will remain the same when re-rendering. In this example, it could be that sometimes your testing browser has inconsistent viewport heights. - If sizing is determined by CSS only, then this might be a result of how we must scroll the page to capture full-height screenshots. Depending on your styles, this could be a bug we need to address, or it could be some extra styles you might need to set. In either case, if you can share a link to the Percy build, I can debug further! If you can't or don't wish to share it publicly, feel free to send me an email! |
|
Hi @wwilsman ! Sent you an email. |
|
Thanks @frixatrix! I took a look, and will post what I found here in case others come across this issue via search. What seems to be happening when your page is being cut off, is the That style causes the Looking further into your other builds, it looks like this specific scenario might only occur when that cookie banner is visible. I suspect that to be the culprit here, but if you wish to work around the issue in Percy, you can use Percy specific CSS to force the |
|
Hi Wil,
Thank you very much.
It helped a lot.
Is it possible to add few styles into percy-css in config.json like:
"percy-css": "body { position: relative !important; },
.c-cookie-message__container { display: none; }"
Or should it be somehow different with syntax for percy-css?
Thank you in advance,
Artem
…On Mon, 13 Jul 2020 at 18:48, Wil Wilsman ***@***.***> wrote:
Thanks @frixatrix <https://github.com/frixatrix>! I took a look, and will
post what I found here in case others come across this issue via search.
What seems to be happening when your page is being cut off, is the <body>
element has an inline style - position: fixed.
That style causes the <html> element to have a 0px height and not be
scrollable. So when Percy takes the screenshot, the page is not scrollable
and only the visible portion within the browser window is screenshotted.
Looking further into your other builds, it looks like this specific
scenario might only occur when that cookie banner is visible. I suspect
that to be the culprit here, but if you wish to work around the issue in
Percy, you can use Percy specific CSS
<https://docs.percy.io/docs/percy-specific-css> to force the <body>
element to be relatively or absolutely positioned so the <html> element's
height will be accurate.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#184 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF7KU7SYSXKABPKIWQNNE23R3M3FFANCNFSM4OWTL2RQ>
.
|
|
If you're referring to a Percy config file, then yes! You can add Percy CSS to that file to apply to all of your snapshots. The Here's what that would look like for a {
"version": 1,
"snapshot": {
"percy-css": "body { position: relative !important; } .c-cookie-message__container { display: none; }"
}
}If you use a version: 1
snapshot:
percy-css: |
body {
position: relative !important;
}
.c-cookie-message__container {
display: none;
} |
|
Hey @wwilsman thank you a lot. It works now as expected. Issue could be closed, thanks to you. |
Using Percy with Puppeteer, for example with simple script:
await page.goto(url); await percySnapshot(page, 'name');I receive sometimes a screenshot of the full page and sometimes only part of it.
It happens pretty often and was not able to find a consistent solution.
Not sure is it a Percy's issue or Puppeteer itself.
The text was updated successfully, but these errors were encountered: