Missing image assets

[przemuh]

Hi,

Recently I observed that from time to time (random percy builds) there is a problem with missing image assets.

This is a fragment of screenshot taken in percy-build-dashboard:

I use cypress.io as my test-runner. In the test, I'm waiting for resources to be loaded accordingly to this example: (https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__wait-for-resource/cypress/support/index.js).

I serve static files (js, css, images etc.) via simple express server:

const fs = require("fs");

const express = require("express");
const https = require("https");
const port = 3003;

const privateKey = fs.readFileSync("./key.pem");
const certificate = fs.readFileSync("./cert.pem");
const credentials = { key: privateKey, cert: certificate };
const app = express(credentials);

app.use(express.static("dist/webroot"));
app.use(express.static("src/main/resources/webroot"));

https.createServer(credentials, app).listen(port, () => {
    // eslint-disable-next-line no-console
    console.log(
        `Static server listening on port ${port}! https://localhost:${port}`,
    );
});

How can I fix it? Or how can I debug it deeper?

[Robdel12]

Hey @przemuh! Seems like that asset sometimes isn't discovered when we're running asset discovery on the DOM snapshot we capture.

After capturing the DOM (when cy.percySnapshot is called) we put that DOM into a Puppeteer browser to listen to each network request the page makes. We stop asset discovery after the page has made a zero network requests after 50ms (by default).

It looks like these assets aren't requested before asset discovery is closed. You can increase that window by changing the network-idle-timeout:

# example .percy.yml
version: 1
agent:
  asset-discovery:
    network-idle-timeout: 250 # ms

Here's our config docs: https://docs.percy.io/docs/sdk-configuration#section-agent