Frontguard vs Percy

Percy (acquired by BrowserStack) is one of the most established hosted visual testing platforms — a strong review dashboard, a cross-browser rendering grid, and deep CI integrations. Frontguard is a newer, CLI-first, MIT-licensed tool whose differentiator is AI vision analysis (it explains why a diff happened) and a free-forever local workflow.

Quick Comparison

When to Choose Percy

Be honest with yourself — Percy is the better choice when:

• You need a mature hosted review dashboard today. Multiple reviewers approving snapshots with comments, history, and role-based access. Frontguard doesn't have this yet.
• You want a managed cross-browser/-device rendering grid without running browsers yourself.
• You're already in the BrowserStack ecosystem and want unified billing/SSO.
• You don't want to manage AI keys or care about diff explanations — you just want a snapshot diff service that "just works" with enterprise support.

When to Choose Frontguard

• You want to understand why a diff happened, not just see red pixels. AI classification cuts false-positive triage.
• You want predictable/zero cost at scale. No $399/mo cliff at 50K screenshots.
• You want to keep rendering in your own CI (no uploading every snapshot to a third-party cloud).
• You value open source + self-hosting (MIT license).
• You're Playwright-native and want anti-flake multi-render consensus built in.

Feature-by-Feature Deep Dive

Rendering & CI model

Percy uploads your DOM/snapshots to its cloud, which renders and diffs server-side. This means snapshots leave your infrastructure and counts meter your bill. Frontguard renders with Playwright inside your CI and stores baselines on a git orphan branch — nothing has to leave your pipeline (the optional LLM call only fires on pages that actually diffed, and only if you opted in).

False positives

This is the core philosophical difference. Percy relies on a human reviewing the dashboard to dismiss noise (anti-aliasing, dynamic content, intentional changes). Frontguard adds an AI classification layer: each diff is labeled regression, intentional, or content_update with a confidence score, so you triage far fewer images by hand. Frontguard also has anti-flake multi-render consensus to suppress flaky pixel noise before it ever becomes a diff.

AI analysis

Percy ships a proprietary computer-vision diff (the "Percy Visual Engine") that suppresses anti-aliasing and dynamic-content noise, but it does not classify diffs (regression vs intentional vs content update) and does not explain why something changed. Frontguard sends baseline + current images to OpenAI or Anthropic (BYOK) and returns a plain-English explanation plus an optional suggested CSS fix. See AI Analysis.

Review & approval

Percy wins here today: a polished, collaborative web dashboard. Frontguard's review is CLI/report-based (frontguard accept-fix <id> for individual AI fixes, frontguard update-baselines to promote current screenshots in bulk). A hosted dashboard is on the roadmap but not shipped yet.

Pricing Comparison

• Percy: generous free tier, then a notable cliff to ~$399/mo for higher volume / enterprise features.
• Frontguard: CLI is free forever (MIT). Optional $29/mo Pro and an optional cloud add team features. AI analysis cost = your own OpenAI/Anthropic usage (BYOK), and AI only runs on pages that actually diffed.

Migration Steps (Percy → Frontguard)

1. Install Frontguard.

   npm install -D @frontguard/cli
   npx -p @frontguard/cli frontguard init

2. Translate your Percy snapshots to routes. Percy percySnapshot(name) calls / story URLs become entries in routes.

   export default {
     baseUrl: 'http://localhost:3000',
     routes: ['/', '/pricing', '/checkout'],
     viewports: [375, 768, 1440], // Percy `widths` → viewports
     threshold: 0.1,
     smartRender: true,
     ai: { provider: 'openai', model: 'gpt-4o' },
   };

3. Map Percy widths → viewports (direct).
4. Move Percy CSS hides / percyCSS for dynamic content to ignore: [{ selector }].
5. For interaction flows, use the Playwright plugin instead of Percy SDK calls.
6. Capture baselines and run.

   npx -p @frontguard/cli frontguard baseline
   npx -p @frontguard/cli frontguard run

7. Update CI — replace the percy exec wrapper with frontguard run. Remove PERCY_TOKEN.

Next Steps

• AI Analysis
• Configuration reference
• GitHub Actions