Percy Snapshot Not Applying CSS correctly resulting in Screenshots that do not look as intended about percy-cypress HOT 8 CLOSED

I'm facing exactly the same problem. Please advise

from percy-cypress.

@antonyfuentes You're probably running the build with Gatsby develop. Percy does not support injecting CSS, you'd need to build the project and run cypress on the built server. Hope this helps!

from percy-cypress.

I am having the same Issue Percy seems not to load CSS, when running in a CI-Environment. Have you found a solution or a workaround?

from percy-cypress.

I am having the same Issue Percy seems not to load CSS, when running in a CI-Environment. Have you found a solution or a workaround?

Are you running Percy with a built version of your app?

from percy-cypress.

Are you running Percy with a built version of your app?

Our CI (Azure DevOps) builds the app, deploys it to a feature environment, run a parallel execution of cypress / percy tests against the feature environment. So yes but build is in a previous job (different job runner) and deployed too. Cypress is working fine but percy has issues. If I build it locally and execute percy against localhost, everything is fine...

from percy-cypress.

Facing same issues in the Screenshot comparison. Please see below for the details:

1. Run the cypress code First time to get the original screenshot.
2. Now re run the Cypress code with a different image comparison.
3. The functionality works fine and it thus gives the error that "Snapshot does not match"
4. Now when I click on the button

from percy-cypress.

@StapleMink did you find a solution? Im running into the same issue. Interestingly enough cy.screenshot(); which i have running after cy.percySnapshot(); produces the correct image. In the percy screenshot, however, im missing fonts and some inputs are misaligned.

Edit: Im running this on localhost

from percy-cypress.

Hey everyone! This can happen due to a number of reasons. Percy captures a snapshot of your applications DOM tree and then puts that into a browser to listen to the network requests it makes to save assets. From there those assets are sent off to the API to capture screenshots concurrently across browsers/widths.

Quick thoughts:

• If your app requires auth to access the assets, you will need to provide that (so asset discovery can request & save the assets) https://docs.percy.io/docs/capturing-assets-protected-with-authentication-cli
• If your app blocks based on UA/headless browsers
• Assets might be missed in the default timeout window (https://docs.percy.io/docs/cli-configuration#discovery network-idle-timeout). Anything above 600ms is a different issue
• By default asset discovery only saves assets that have the same hostname as the app (for ex if you snapshot: http://example.com and have assets on cdn.example.com, they won't be captured. Only example.com by default). https://docs.percy.io/docs/capturing-multiple-asset-hosts-cli

Or it could be a general issue with networking. Setting the --verbose flag with @percy/cli will log all asset discovery logs, look for errors/rejects in there.

Anything else, your best bet is to reach out to support to debug snapshots ([email protected]). 😃

from percy-cypress.