Awesome Reviewers

Verification · Testing · Visual regression testing

Component snapshots

Screenshot each component state in isolation.

How to build it

  1. Render each component state in isolation, such as one story per variant.
  2. Take a screenshot of each state in a pinned browser and font environment.
  3. Store baselines per component and review diffs in the pull request.

Signals in a repository

  • Storybook stories or BackstopJS scenarios that list component states.
  • toHaveScreenshot assertions in component test files, or a lost-pixel.config.ts file.

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