Introduction

Frontguard is an AI-powered visual regression testing tool for frontend teams. It renders every page in your app, compares it against approved baselines, and uses AI vision to classify each diff as a regression, an intentional change, or a content update — then explains why and suggests a verified fix.

The goal is simple: a red run should mean something. Pixel-diff tools fire on non-bugs so often that teams stop trusting them — so Frontguard's job is to tell a real regression apart from noise, not just count changed pixels.

It's CLI-first, MIT licensed, and fully self-hostable. No per-screenshot pricing, no dashboard lock-in. Bring your own AI key.

DETECT

Pixel diff + DOM and computed-style diff across every viewport and browser. Anti-flake multi-render kills false positives.

UNDERSTAND

AI vision classifies each diff, maps it to the exact code change, and explains the root cause in plain language.

Prerequisites

Node.js 20+ and npm 9+. AI analysis is optional — pixel and DOM diff run locally without any key.

The pipeline

Frontguard runs a six-stage pipeline. Each stage is independent with error boundaries — one page failing doesn't kill the run. A fast pixel gate means ~90% of pages never reach the AI.

01DiscoverCrawl, filesystem scan, or config — finds every route automatically.

02FilterDependency graph renders only pages affected by your changed files.

03RenderPlaywright captures each route × viewport × browser, anti-flake.

04Diffpixelmatch fast gate, then DOM + computed-style comparison.

05AnalyzeAI vision classifies, explains the root cause, scores confidence.

06ReportConsole, JSON, HTML, and a GitHub PR comment with visual diffs.