Percy-Cypress v3 does not load fonts
See original GitHub issueWe are trying to migrate one of our projects to the new Percy-Cypress v3, and we have problems with custom fonts not being rendered on the Percy screenshots.
Sample, with differences highlighted:
Sample, with no highlights:
From debug logs, I see that font files (woff
and ttf
) are being loaded -
[percy:core:discovery] Handling request for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (42ms)
...
[percy:core:discovery] Handling request for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (17ms)
...
[percy:core:discovery] Processing resource - http://localhost:8080/fonts/CustomSansTTRegular.woff2 (4ms)
[percy:core:discovery] Making local copy of response - http://localhost:8080/fonts/CustomSansTTRegular.woff2 (5ms)
[percy:core:discovery] -> url: http://localhost:8080/fonts/CustomSansTTRegular.woff2 (1ms)
[percy:core:discovery] -> sha: b0bacf06b2e7a3e3fc672625c9aaff825ed79d754a174c0f352d68d10daf7397 (0ms)
[percy:core:discovery] -> filepath: /tmp/percy/b0bacf06b2e7a3e3fc672625c9aaff825ed79d754a174c0f352d68d10daf7397 (1ms)
[percy:core:discovery] -> mimetype: font/woff2 (0ms)
...
(in the following tests)
[percy:core:discovery] Handling request for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (1ms)
[percy:core:discovery] Response cache hit for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (1ms)
All that looks pretty legit, besides the duplicate “handling request” line. Yet, the screenshots are rendered with the default font.
Any idea what went wrong here? Are we missing any pieces in the migration process?
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:18 (8 by maintainers)
Top Results From Across the Web
Woff fonts missing (corrupt on asset discovery capture) #222
Hi, I was trying to integrate Percy with our product but I faced two issues. so, to reproduce the ... Second: local assets...
Read more >Cypress - Percy Docs
This will start a Percy agent to receive snapshots from your Cypress tests and upload rendered screenshots to your Percy dashboard. Before you...
Read more >How to deal with font loading and screenshots in Cypress
It works, but the problem is that fonts sometimes doesn't load in time for the screenshot so we end up with a very...
Read more >Visual Testing - Cypress Documentation
Cypress does NOT see how the page actually looks though. ... then there has been some change to the DOM layout, fonts, colors...
Read more >cypress-io/cypress - Gitter
@RBO21000 nope, no idea why fonts would take so long to respond ... hmm, don't have the github issue.. but afaik it was...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
We were able to isolate the issue to a combination of
webpack-dev-server
andfile-loader
. Our solution was to useurl-loader
instead of thefile-loader
withwebpack-dev-server
- that is, locally and in PR builds in CI. You can add one more recipe to your collection of the workarounds. Thank you for helping us to solve this mystery!@Robdel12 Build 9750416, snapshot 549314950 (or any other from that build). Thank you so much!