Skip to content

Add Playwright visual regression testing#868

Draft
anth-volk wants to merge 4 commits intomainfrom
feat/visual-testing
Draft

Add Playwright visual regression testing#868
anth-volk wants to merge 4 commits intomainfrom
feat/visual-testing

Conversation

@anth-volk
Copy link
Copy Markdown
Collaborator

Fixes #867

Summary

  • Add self-hosted Playwright visual regression testing for full-page E2E screenshots, complementing existing Chromatic/Storybook component-level snapshots
  • Uses Docker run-server pattern — browser runs in a Docker container for pixel-consistent rendering, test code runs on the host via WebSocket (port 3200)
  • Homepage smoke test as the initial visual spec, tagged @visual
  • CSS injection freezes animations/transitions for deterministic screenshots
  • Makefile targets: pw-test (compare), pw-update (regenerate baselines), pw-report (HTML viewer)
  • CI visual-tests job added to both PR and push workflows

Test plan

  • Run make pw-test locally — should pass against committed baseline
  • Run make pw-update — should regenerate baseline screenshot
  • Run make pw-report — should open HTML report in browser
  • CI visual-tests job passes on this PR

🤖 Generated with Claude Code

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
policyengine-app-v2 Ready Ready Preview, Comment Mar 26, 2026 10:11pm
policyengine-calculator Ready Ready Preview, Comment Mar 26, 2026 10:11pm
policyengine-website Ready Ready Preview, Comment Mar 26, 2026 10:11pm

Request Review

Self-hosted full-page E2E visual testing alongside existing Chromatic/Storybook
component tests. Uses Docker run-server pattern for consistent Linux rendering
locally and in CI, with zero cost on public repos.

- Add @playwright/test with Docker browser server config
- Add homepage visual smoke test with baseline screenshot
- Add visual-tests job to PR and push CI workflows
- Add pw-test, pw-update, pw-report Makefile targets

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The Playwright Docker image lacks unzip, which setup-bun requires.
Since the image already has Node/npm, use npm directly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The Playwright Docker image lacks unzip, which setup-bun needs.
Install unzip first, then use bun consistently with the other CI jobs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Supports two trigger mechanisms:
- PR comment: type "/update-snapshots" on a PR
- Manual dispatch: run from Actions tab on any branch

Regenerates Playwright baselines in the same Docker container
as CI, commits updated PNGs back to the branch.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Playwright visual regression testing for full-page E2E screenshots

1 participant