Skip to content

Explore: self-hosted visual regression testing with review UI #373

Description

@ryanmagoon

Context

We currently use Chromatic for visual regression testing of our Storybook components. It works well — builds Storybook, runs interaction tests, does pixel-diffing, and provides a review UI for accepting/rejecting visual changes. But it's slow and paid.

The open source alternatives (Lost Pixel OSS, raw Playwright VRT) are fast and free but lack the review UI — baseline acceptance is done by committing updated screenshot files via PR, with no side-by-side diff viewer or per-story accept/reject flow.

There's a real gap in the market for a self-hosted, open source visual regression review UI that sits on top of any screenshot diffing engine.

Idea

A tool that:

  • Takes baseline + current + diff images from CI (generated by Playwright toHaveScreenshot(), Lost Pixel, or any diffing engine)
  • Provides a web UI for reviewing visual changes: side-by-side, overlay, slider diffs per story/component
  • Accept/reject per-change, writes approvals back to git (updates baseline images)
  • Deployable as a static app on Vercel (or any hosting)
  • Free and open source

Why this matters for GameLord

  • Could replace Chromatic with a faster, free, self-hosted alternative
  • We already have Storybook with comprehensive stories for all UI states
  • We already have Vercel for hosting
  • Playwright is already a dev dependency

Prior art

  • Chromatic — best-in-class review UI, but paid SaaS, slow builds
  • Lost Pixel Platform — similar review UI, $100/mo, not self-hostable
  • Lost Pixel OSS — no review UI, baseline updates via auto-PR
  • Percy (BrowserStack) — paid SaaS, more page-level than component-level
  • Playwright VRT — free, fast, no review UI at all

Status

Exploration / future work. Not blocking anything — Chromatic works fine for now.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions