Test hangs on returning domSnapshot

[andrzej-woof]

The problem

I deal with a bit bloated DOM, where result of PercyDOM.serialize(options) is over 6MB.
When I run testcafe with percySnapshot it hangs at

    let { domSnapshot, url } = await t.eval(() => ({
      /* eslint-disable-next-line no-undef */
      domSnapshot: PercyDOM.serialize(options),
      url: document.URL
    }), { boundTestRun: t, dependencies: { options } });

If I run PercyDOM.serialize in browser console it works blazing fast, and apparently testcafe has a problem with returning larger objects from client function. Not sure what would be the best way to address it, maybe using something like JSzip before returning serialized snapshot to compress it.

Environment

• Node version: v14.18.1
• @percy/cli version: 1.0.0-beta.76
• @percy/testcafe version: 1.0.1
• OS version: MacOS Monterey 12.2.1
• Type of shell command-line [interface]: zsh

[andrzej-woof]

FYI: patching package with a little naive hack to return 1MB chunks of serialized DOM solves it on my end

  try {
    // Inject the DOM serialization script
    /* eslint-disable-next-line no-new-func */
    await t.eval(new Function(await utils.fetchPercyDOM()), { boundTestRun: t });

    const maximumObjectSize = 1024 * 1024 * 1.0;
    let lastIndex = 0;
    let domSnapshot = '';
    for (let failSafe = 0; failSafe < 20; failSafe++) {
        let partialContent = await t.eval(() => {
            if (!PercyDOM.serialized) {
                PercyDOM.serialized = PercyDOM.serialize(options);
            }
            return PercyDOM.serialized.substring(lastIndex, lastIndex + maximumObjectSize);
        }, { boundTestRun: t, dependencies: { lastIndex, maximumObjectSize, options } });
        domSnapshot = `${domSnapshot}${partialContent}`;
        if (partialContent.length < maximumObjectSize) {
            break;
        }
        lastIndex = lastIndex + maximumObjectSize;
    }
    let url = await t.eval(() => document.URL, { boundTestRun: t });

    // Post the DOM to the snapshot endpoint with snapshot options and other info
    await utils.postSnapshot({
      ...options,
      environmentInfo: ENV_INFO,
      clientInfo: CLIENT_INFO,
      domSnapshot,
      url,
      name
    });
  } catch (error) {
    // Handle errors
    log.error(`Could not take DOM snapshot "${name}"`);
    log.error(error);
  }

[github-actions]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 28 days with no activity.

[andrzej-woof]

still happens 🤷‍♂️