Quick start

Run your first visual check in two minutes. The first run captures baselines; every subsequent run diffs against them.

First run

Initialize

Auto-detect your framework and scaffold a config (plus a GitHub Action with --ci).

$ npx frontguard init --ci

Check your environment

Verify Node, Playwright, browsers and git are ready.

$ npx frontguard doctor

Run

First run captures baselines; subsequent runs diff against them.

$ npx frontguard run --url http://localhost:3000

Accept changes

After an intentional redesign, accept the current screenshots as new baselines.

$ npx frontguard update-baselines

Reading the output

Every route × viewport gets a status. Regressions exit non-zero, so the run fails CI.

frontguard run

  ✓ /           375 768 1440  PASS
  ✓ /pricing    375 768 1440  PASS
  ⚠ /checkout   375 768 1440  WARNING
  ✘ /dashboard  375 768 1440  REGRESSION
  ★ /settings   375 768 1440  NEW

1 regression · 1 warning · 9 passed · 1 new

Status legend

PASS — within threshold

WARNING — minor diff

REGRESSION — exceeds threshold

NEW — no baseline yet