serializeDOM should capture resources when running without local percy server

[yjaaidi]

The problem

serializeDOM doesn't capture resources (images/styles).

Environment

• Node version: 18.12.1
• @percy/cli version: 1.16.0
• Version of Percy SDK you’re using: 1.16.0
• If needed, a build or snapshot ID: 23596652

Details

I am trying SDK utils' serializeDOM in Cypress in order to capture the DOM snapshots and store them locally and upload them later. The problem I am encountering is that this only works if I use @percy/cypress. When using @percy/sdk-utils with ES6 import, it is not capturing the resources (images/styles)... and using @percy/sdk-utils like @percy/cypress`, it requires a local Percy server which kind of defeats the purpose as it creates a new build on Percy, but still doesn't capture the resources.

The main thing I am trying to achieve here is that by using tools like Nx, we can speed up the CI by caching tasks output and only run Cypress tests when needed. While this is possible for branches/PRs because we can run them in partial mode. The main branch needs all snapshots. This would mean running all tests which would be easily avoided if we could separate the "snapshot" and the "upload" phase.

Code to reproduce issue

Cf. https://github.com/marmicode/marmicode/blob/spike/split-percy-snapshot-and-upload/libs/testing/src/cypress-commands.ts
You can reproduce by running yarn && yarn nx e2e marmicode-e2e

[itsjwala]

Hey @yjaaidi 👋

have you checked this?

import { createRequire } from 'module';

export const PERCY_DOM = createRequire(import.meta.url).resolve('@percy/dom');

we do something similar here

cli/packages/core/src/api.js

Line 9 in 5f86910

export const PERCY_DOM = createRequire(import.meta.url).resolve('@percy/dom');

This way you'll only require @percy/dom package to be present and you can pass the file content to eval here
https://github.com/marmicode/marmicode/blob/spike/split-percy-snapshot-and-upload/libs/testing/src/cypress-commands.ts#L40

[yjaaidi]

Hi @itsjwala, thank you for the quick response.
Actually, this doesn't really solve the problem. My calls to Percy utils were superfluous and I just forgot to remove them.
The current call to serializeDOM() works but it just doesn't capture the resources. The domSnapshot.resources array is empty while it should capture some styles and pictures.
https://github.com/marmicode/marmicode/blob/e6a72e5228cdffcff87612a8a79e4c375c24c368/libs/testing/src/cypress-commands.ts#L35

[itsjwala]

Okay there seems to be some misunderstanding here, serializeDOM only serializes certain elements for assets we have something called asset discovery phase.

you can learn more here https://docs.percy.io/docs/debugging-sdks#how-percy-works

[yjaaidi]

Oh, I am so sorry for opening the issue.
In fact, I missed that part of the docs... which is very clear by the way 😅.
I wonder though how I can perform the asset discovery without sending the snapshot to percy.io.
I would like to perform the discovery and keep the output in a file that I upload later.

[itsjwala]

no worries 😄

this is undocumented and hacky.
what you may do is use @percy/client and upload those assets yourself to Percy API.
you can intercept the requests as we do in our asset discovery phase.