Visual Test Suite
URL-based visual regression testing with Playwright. Configure tests via UI, run screenshots, manage baselines.
The Problem
Visual regression testing tools assume you have access to the source code. If you want to test a deployed URL, a staging environment, or a third-party site, most tools can’t help. You need something that takes a URL, captures what it looks like, and tells you when it changes.
What I Built
Visual Test Suite is a web app for URL-based visual regression testing. Point it at any URL, configure viewport sizes and test scenarios through the UI, and it captures baseline screenshots with Playwright. On subsequent runs, Pixelmatch compares current screenshots against baselines and highlights differences.
The UI handles test configuration: add URLs, set viewport dimensions, define scroll positions, and schedule automated runs. Results display as side-by-side comparisons with pixel-level diff overlays. You can accept changes as new baselines or flag them as regressions.
Evolution into Interface Built Right
This project was the foundation for Interface Built Right. The URL-based approach worked well for testing deployed sites, but I needed something that integrated directly into the development workflow with Claude Code. That led to the npm package version with CLI integration, prompt hooks, and the preference memory system. The core Playwright + Pixelmatch comparison logic carried over, but the architecture shifted from a standalone web app to an embeddable plugin.
Technical Details
Built with Next.js 16 and Prisma for test session storage. Playwright handles browser automation across Chrome, Firefox, and Safari viewports. The visual reports directory stores baseline and comparison screenshots organized by session. Layout detection identifies page structure (header, sidebar, main content, footer) to provide targeted diff analysis rather than whole-page comparisons.