Frontguard

AI-powered frontend visual regression testing. Detect, understand, and fix visual bugs before production.

Backend has Datadog, Sentry, PagerDuty — a $20B+ monitoring ecosystem. Frontend gets manual QA and hoping for the best. Frontguard changes that.

What It Does

Developer pushes code → Frontguard renders every page → Compares to baselines →
AI explains what changed and why → Suggests fixes → Posts PR comment

• Detect — Pixel diff + DOM diff catches what humans miss
• Understand — AI explains why something broke, not just "pixels differ"
• Fix — Verified code fixes, re-rendered to confirm they work

Quick Start

# Initialize config (auto-detects your framework)
npx frontguard init

# Run visual regression tests
npx frontguard run --url http://localhost:3000

# Accept current screenshots as new baselines
npx frontguard update-baselines

How It Works

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│  ROUTE DISCOVERY │───▶│  RENDER PAGES    │───▶│  PIXEL DIFF     │
│  Crawl / Config  │    │  Playwright ×    │    │  pixelmatch     │
│  / Filesystem    │    │  viewports ×     │    │  fast gate      │
│                  │    │  browsers        │    │  (90% pass here)│
└─────────────────┘    └──────────────────┘    └────────┬────────┘
                                                        │ changed
                                                        ▼
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│  PR COMMENT     │◀───│  AI ANALYSIS     │◀───│  DOM DIFF       │
│  Visual diffs   │    │  GPT-4V / Claude │    │  Structural +   │
│  Explanation    │    │  Classify +      │    │  computed styles │
│  Fix suggestion │    │  explain + fix   │    │                 │
└─────────────────┘    └──────────────────┘    └─────────────────┘

The pipeline runs in stages: discover → filter → render → diff → analyze → report. Each stage is independent with error boundaries — one page failing doesn't kill the run.

Features

• Zero-config route discovery — Auto-crawls your app to find all pages
• Multi-browser — Chromium, Firefox, WebKit via Playwright
• AI-powered analysis — BYOK (OpenAI/Anthropic) classifies regressions vs intentional changes
• Smart rendering — Dependency graph renders only pages affected by your changes
• Preview deployments — Auto-detects Vercel/Netlify preview URLs
• Git-native baselines — Stored in orphan branch, zero main branch bloat
• Framework detection — Next.js, Remix, SvelteKit, Nuxt, Astro out of the box
• Security hardened — Shell injection prevention, path traversal guards, API key redaction
• Memory managed — Streaming buffers, temp file cleanup, bounded concurrency

Packages

Next Steps

• Installation — Install Frontguard in your project
• Quick Start — Run your first visual regression test
• CLI Reference — Full CLI command documentation
• Playwright Plugin — Use visual testing inside Playwright tests