Percy/Puppeteer - snapshot script runs fine, but takes no snapshots

Question

I'm trying to take some screenshots with Percy/Puppeteer. It's not taking screenshots, and not giving me any error message.

I'm following the docs here: https://www.browserstack.com/docs/percy/integrate/puppeteer

I'm running the below on my local Mac in a node:18-alpine docker image.

Contents of package.json:

{
  "devDependencies": {
    "@percy/cli": "^1.28.1",
    "@percy/puppeteer": "^2.0.2",
    "puppeteer": "^21.11.0"
  }
}

Contents of percy.yml:

version: 2
snapshot:
  widths:
    - 375
    - 1280
  minHeight: 1024
  percyCSS: ""
  enableJavaScript: false
  cliEnableJavaScript: true
  disableShadowDOM: false
discovery:
  allowedHostnames: []
  disallowedHostnames: []
  networkIdleTimeout: 100
  captureMockedServiceWorker: false

Contents of percy-local.js:

const percySnapshot = require('@percy/puppeteer')

(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage() 
    await page.goto('https://www.my-site.com')
    await percySnapshot(page, 'Homepage')
})();

Commands I'm running:

npm install
export PERCY_BRANCH="Integration"
export PERCY_TOKEN="*******"
export LOG_LEVEL="debug"
export PERCY_DEBUG="*"
node_modules/.bin/percy exec --config .percy.yml -- node percy-local.js

Output from percy command:

[percy:config] Found config file: .percy.yml (0ms)
[percy:config] Using config:
{
  version: 2,
  snapshot: {
    widths: [
      375,
      1280
    ],
    minHeight: 1024,
    percyCSS: '',
    enableJavaScript: false,
    cliEnableJavaScript: true,
    disableShadowDOM: false
  },
  discovery: {
    networkIdleTimeout: 100,
    captureMockedServiceWorker: false
  }
} (11ms)
[percy:client] Creating a new build... (16ms)
[percy:env] Detected ci as null (1ms)
[percy:env] Detected commit as null (0ms)
[percy:env] Detected branch as "Integration" (0ms)
[percy:env] Detected git as {"sha":null,"branch":"Integration","message":null,"authorName":null,"authorEmail":null,"committedAt":null,"committerName":null,"committerEmail":null} (2ms)
[percy:env] Detected target as {"commit":null,"branch":null} (0ms)
[percy:env] Detected pullRequest as null (0ms)
[percy:env] Detected parallel as {"total":null,"nonce":null} (0ms)
[percy:env] Detected partial as false (0ms)
[percy:env] Detected info as null (1ms)
[percy:core:install] Successfully downloaded Chromium 929511 (27085ms)
[percy:core:browser] Launching browser (8ms)
[percy:core:queue] Clearing discovery queue, queued state: 0, pending state: 0 (26ms)
[percy:core:browser] Closing browser (0ms)

I can visit my project dashboard on https://percy.io/ and see it's creating new builds, but they're hung at "Receiving build" with no snapshots ever arriving.

The URL I'm trying to snapshot is accessible from my local machine and otherwise loads fine.

What am I missing?

Answer 1

I think the root cause here was that Puppeteer/Chromium wasn't correctly starting within a docker container, although I'm not sure why I wasn't getting error messages stating as such. Following Puppeteer's notes here: https://pptr.dev/troubleshooting#running-puppeteer-in-docker I was able to create a docker image that started Puppeteer/Chromium correctly.