Page snapshots

How to build it

1. Set a fixed list of viewport sizes and URLs for each page under test.
2. Mask dynamic regions such as dates, ads and avatars before the comparison.
3. Run the page snapshot job in CI and keep the diff images as run artifacts.

Signals in a repository

• toHaveScreenshot calls with viewports set in playwright.config, or a mask option in the test.
• A backstop_data directory or __screenshots__ folders uploaded as CI artifacts.

In practice

55 repositories run a tool for this check in the scanned set.

• playwright · 55 repos

Examples

• freeCodeCamp/freeCodeCamp · playwright

  playwright test --ui-port=0

• nousresearch/hermes-agent · playwright

  playwright test -c e2e/core/playwright.config.ts local-gateway-attach.spec.ts

• microsoft/vscode · playwright

  playwright test

• n8n-io/n8n · playwright

  playwright test --project=e2e tests/e2e/building-blocks/ --workers=1 --retries=2 --reporter=list

• langflow-ai/langflow · playwright

  playwright test $SCAN_SPECS --project=chromium --shard=$EXPR/$EXPR --workers=2 --retries=1