Awesome Reviewers

Verification · Intent and spec conformance · Design conformance

Design-to-render comparison

Diff a screenshot against the exported design frame.

How to build it

  1. Export the design frame at the same width and scale the test renders.
  2. Take a screenshot of the same view in the test run.
  3. Compare the two images with a pixel tolerance and mask dynamic regions such as dates.

Signals in a repository

  • Exported design frames stored in the repository, such as PNG files under a designs directory.
  • Visual comparison assertions in the test suite, such as toHaveScreenshot, or a pixelmatch step.

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