percy / percy-puppeteer

Visual testing with Puppeteer and Percy
https://percy.io
MIT License
49 stars 16 forks source link

Local fonts not loaded on percy rendering environment #189

Closed frixatrix closed 4 years ago

frixatrix commented 4 years ago

Hi,

Faced an issue with local fonts failing to be rendered on percy rendering environment. It works fine locally, it was verified by additional listener for this font loading.

Example of expected appearance:

expected

Example of received screenshot from percy:

received

Tried:

Issue is tricky for me and is not reproducible for 100%.

Please advise how to fix or workaround it on my side, or will it be fixed on percy side(if so, when?).

Thank you in advance.

Unfortunately, spent around 15% of monthly screenshots trying to fix this issue until realised it cannot be fixed on my side.

Robdel12 commented 4 years ago

Hey @frixatrix would you be able to share a Percy build link where this is happening?

frixatrix commented 4 years ago

Hey @frixatrix would you be able to share a Percy build link where this is happening?

Hey @Robdel12 could you please share your e-mail for this? Thank you in advance.

Robdel12 commented 4 years ago

No problem! You can send the build link over to support@percy.io

frixatrix commented 4 years ago

Hi @Robdel12 thank you. Sent email with details.

Robdel12 commented 4 years ago

Thanks for sending that over! This one is interesting -- it looks like the SDK isn't capturing the font in the default asset discovery timeout window. By default our SDKs will wait 125ms for zero network requests to be made by the DOM snapshot we've captured. Sometimes assets aren't requested in that timeout (I think that's what's going on here). You can increase this timeout by either passing a CLI flag (percy exec -t 250 -- [test command]) or by creating a Percy config file. For example, as a .percy.yml file:

version: 1
agent:
  asset-discovery:
    network-idle-timeout: 250 # ms

This should clear this up. It's safe to take that timeout up to ~500ms (anything higher means there's probably something else going on).

frixatrix commented 4 years ago

Hi @Robdel12 thank you for investigating and possible solution. Will try it out, but as it's not a persistent issue I will be able to confirm it in some time in future (as not going to spend another 15% of screenshots for this 😄 )