Percy snapshots are not working correctly in app E2E tests

[rachelruderman]

Current behavior

DESCRIPTION & COMMENTS COPIED FROM https://cypress-io.atlassian.net/browse/UNIFY-1149

The way styles are loaded in Vue, these are not working.

Comments:
Brian Mann
March 14, 2022 at 6:46 AM

PR: fix: e2e percy snapshots by brian-mann · Pull Request #20604 · cypress-io/cypress

Brian Mann
March 10, 2022 at 9:09 AM
Yeah we need to whitelist CSS routes in the proxy here:

cypress/server-base.ts at 10.0-release · cypress-io/cypress

Right now percy works by spawning a headless browser and making the requests outside of the cypress browser - which is locked down and requires being launched through --proxy-server. Percy does not support this command line argument, so I see the easiest solution here to allow requests that match a specified glob pattern to pass through correctly and get served. Currently these are redirecting, which percy ignores.

Mark Noonan
February 16, 2022 at 9:52 AM
Adding some context to this from experimenting late yesterday, just to share what I learned.

Here’s a screenshot of Percy successfully showing CSS in an e2e test. But: it’s a hack, I used cy.request() to grab the stylesheet contents from any and concatenated them, then added them into the DOM before the snapshot is taken.

I think the problem we are seeing is because Percy skips redirected assets. That would explain why it can’t grab the browser images and CSS here, but it can grab them from an E2E test in the Launchpad, which doesn’t appear to do a redirect.

In the immediate term we could put that cy.request() loop into a command to get a screenshot that's at least recognizable. Longer term we'd have to stop doing the redirect for asset paths, or maybe Percy has some way to handle this that I'm not thinking of.

E2E tests from launchpad have normal Percy snapshots, and I get a 200 status code from curl:

curl -I http://localhost:4444/__launchpad/assets/index.7a374fbe.css
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Wed, 16 Feb 2022 14:15:06 GMT
ETag: W/"957a5-17f02e305b1"
Content-Type: text/css; charset=UTF-8
Content-Length: 612261
Date: Wed, 16 Feb 2022 14:20:15 GMT
Connection: keep-alive
Keep-Alive: timeout=5
E2E tests from the app are missing assets in Percy, and with curl I get a 302 redirect

curl -I http://localhost:4455/__cypress/assets/assets/Index.3b895fd9.css
HTTP/1.1 302 Found
Location: /__/
Vary: Accept
Content-Type: text/plain; charset=utf-8
Content-Length: 26
Date: Wed, 16 Feb 2022 14:25:12 GMT
Connection: keep-alive
Keep-Alive: timeout=5

Desired behavior

CSS loads correctly in Percy

Test code to reproduce

See any Percy snapshot for a cypress-in-cypress test

Cypress Version

10.6.0

Node version

n/a

Operating System

n/a

Debug Logs

No response

Other

Search for this issue number in the codebase to find the test(s) skipped until this issue is fixed

[jennifer-shehane]

Closing since this is likely stale