@percy/cli not converting canvas to img => nothing displaying #715
Replies: 6 comments 5 replies
-
|
Hey @emilgoldsmith! It's the same method (https://github.com/percy/cli/blob/master/packages/dom/src/serialize-canvas.js). Looking at a build, it looks like it's capturing an empty image:
Which suggests the drawingBuffer is still empty when |
Beta Was this translation helpful? Give feedback.
-
|
Hmmm... Well how does that explain that it works with |
Beta Was this translation helpful? Give feedback.
-
|
Implementation didn't change but what likely did change is timing in your suite when the snapshot is captured. You might need to use a wait to make sure the page/canvas element is in the right state before a snapshot is captured: https://docs.percy.io/docs/percy-snapshot#advanced If you need to run JS prior to the snapshot being captured to prepare the canvas element, that can also be done: https://docs.percy.io/docs/percy-snapshot#executing-javascript-after-events |
Beta Was this translation helpful? Give feedback.
-
|
That sounds very promising! Thanks Robert, I’ll give that a try :)
…On Tue, 11 Jan 2022 at 18.43, Robert DeLuca ***@***.***> wrote:
Implementation didn't change but what likely did change is timing in your
suite when the snapshot is captured. You might need to use a wait to make
sure the page is in the right state before a snapshot is captured:
https://docs.percy.io/docs/percy-snapshot#advanced
—
Reply to this email directly, view it on GitHub
<#715 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AEKO66S7DM34MXNGW4TJJ6TUVRT3BANCNFSM5LUI3AYQ>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Sadly that still didn't work @Robdel12 :(. Since I couldn't specify waitForTimeout with the |
Beta Was this translation helpful? Give feedback.
-
|
It might not need more time. Since it worked with agent, the thing that changed was timing (CLI will likely wait longer prior to snapshot, it's controlled by the asset discovery timeout now). Whatever it might be, the canvas elements drawing buffer is wiped by the time the snapshot is captured. I'm pretty sure if you checked the canvas element prior to the snapshot being captured, |
Beta Was this translation helpful? Give feedback.
-
|
@Robdel12, thanks for sticking with me and keeping up suggestions Robert! I of course can't say for sure that I can rule that out but I think it's pretty likely as I just tried opening the html file in my browser and then doing I would say this is pretty decent proof that given enough time that should also work? Of course I can't say for sure, but I feel like it's pretty strong evidence. For now I'll just keep using |
Beta Was this translation helpful? Give feedback.
-
|
No problem!
That doesn't mean it's not an empty transparent png though. If you put that into an img tag, what renders? If you look at the first snapshot I debugged with blank canvas elements, there's a full base64 encoded string in the img tag, but it's a blank transparent PNG (because that's what is present in the drawing buffer at the time |
Beta Was this translation helpful? Give feedback.
-
|
Sorry I should’ve mentioned more specifically that it was the png not just
the string that was empty, checked it properly, it displays the intended
image
…On Sun, 16 Jan 2022 at 16.54, Robert DeLuca ***@***.***> wrote:
No problem!
and I got something non-empty
That doesn't mean it's not an empty transparent png though. If you put
that into an image tag, what renders?
—
Reply to this email directly, view it on GitHub
<#715 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AEKO66U4XPZY2QONEDPGFLTUWLSZ5ANCNFSM5LUI3AYQ>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
After some digging, it looks like with this page it only will capture the canvas in an image if the browser is headed. This is what it took for me to get it to work: # .percy.yml
version: 2
discovery:
launch-options:
headless: false |
Beta Was this translation helpful? Give feedback.
-
|
How peculiar, but thank you so much for digging into it for me Robert! I
hope you have a good day!
…On Wed, 19 Jan 2022 at 19.58, Robert DeLuca ***@***.***> wrote:
After some digging, it looks like with this page it only will capture the
canvas in an image if the browser is headed. This is what it took for me to
get it to work:
# .percy.ymlversion: 2discovery:
launch-options:
headless: false
—
Reply to this email directly, view it on GitHub
<#715 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AEKO66XAZOS56QKBDRGDTLTUW4CTRANCNFSM5LUI3AYQ>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
Have you read the "Debugging SDKs" doc yet?
Yes
The problem
With @percy/agent my WebGL canvases are now successfully working with the help from your debugging SDKs resource, but when I upgraded to @percy/cli it broke sadly. When I do the "download source" option I can see that the main difference is that with @percy/agent the canvases have been converted to images as you also describe in the debugging SDKs document that is the intention. With @percy/cli however they are still canvases... empty canvases sadly. It could of course be you changed methods so you no longer need to convert to an image but in that case that seems broken.
By the way I am using the cli command
percy snapshotdirectly with the@percy/clipackage, no intermediariesEnvironment
@percy/cliversion: 1.0.0-beta.71Details
If necessary, describe the problem you have been experiencing in more detail.
Debug logs
Code to reproduce issue
This is the html document I am snapshotting using
percy snapshothttps://pastebin.com/TQBZ0F96Beta Was this translation helpful? Give feedback.
All reactions