CLI

CLI Commands

Complete reference for all Frontguard CLI commands, flags, and options.

CLI Commands

Frontguard provides three commands: run, init, and update-baselines.

frontguard run

The default command. Runs the visual regression testing pipeline.

frontguard run [options]

Options

FlagDescriptionDefault
-u, --url <url>Base URL to testFrom config
-r, --routes <routes>Comma-separated routes to testAuto-discovered
-v, --viewports <widths>Comma-separated viewport widths375,768,1440
-b, --browsers <engines>Comma-separated browserschromium
-c, --config <path>Path to config fileAuto-detected
-o, --output <format>Output format: console, jsonconsole
-t, --threshold <n>Pixel diff threshold percentage (0-100)0.1
--verboseVerbose outputfalse
--debugDebug output with Playwright tracesfalse
--update-baselinesAccept current screenshots as baselinesfalse

Examples

Basic usage
frontguard run --url http://localhost:3000
Test specific routes
frontguard run --url http://localhost:3000 --routes /,/pricing,/checkout
Multi-browser testing
frontguard run --url http://localhost:3000 --browsers chromium,firefox,webkit
Custom viewports
frontguard run --url http://localhost:3000 --viewports 320,768,1920
JSON output for CI parsing
frontguard run --url http://localhost:3000 --output json
Stricter threshold
frontguard run --url http://localhost:3000 --threshold 0.01

The threshold value works as a percentage. Values over 1 are automatically converted: --threshold 5 becomes 0.05 (5%).

Exit Codes

CodeMeaning
0All tests passed (or only warnings/new pages)
1Regressions detected
2Pipeline errors (but no regressions)

frontguard init

Generates a starter frontguard.config.ts file. Auto-detects your framework and creates sensible defaults.

frontguard init

This creates a config file in your project root with:

  • Framework-appropriate settings (Next.js, Remix, SvelteKit, Nuxt, Astro)
  • Default viewports (mobile, tablet, desktop)
  • Route discovery configuration
  • Common ignore rules for dynamic content

frontguard update-baselines

Accepts the current screenshots as the new baselines. Run this after intentional visual changes.

frontguard update-baselines

This command:

  1. Renders all routes at all configured viewports
  2. Saves the screenshots as the new baseline set
  3. Updates the baseline manifest

This overwrites existing baselines. Make sure the current state of your app is correct before running this command.


Global Options

These options work with all commands:

FlagDescription
--versionPrint Frontguard version
--helpShow help for a command
frontguard --version
frontguard run --help

Environment Variables

VariableDescription
FRONTGUARD_OPENAI_KEYOpenAI API key for AI analysis
FRONTGUARD_ANTHROPIC_KEYAnthropic API key for AI analysis
GITHUB_TOKENGitHub token for PR comments
FRONTGUARD_DEBUGSet to 1 for full stack traces on errors
FRONTGUARD_UPDATESet to 1 to force baseline updates (used by Playwright plugin)

Output Formats

Console (default)

Human-readable output with color-coded statuses, ASCII tables, and AI analysis summaries.

JSON

Machine-readable JSON output for CI/CD integration. The JSON structure follows the RunResult type:

JSON output structure
{
  "summary": {
    "total": 36,
    "passed": 33,
    "regressions": 1,
    "warnings": 1,
    "newPages": 1,
    "errors": 0
  },
  "diffs": [...],
  "timing": {
    "discovery": 1200,
    "render": 8500,
    "compare": 300,
    "ai": 2100,
    "total": 12100
  }
}

HTML Report

An HTML report is automatically generated in the outputDir (default: ./frontguard-report/) regardless of the output format. It includes side-by-side screenshot comparisons, diff overlays, and AI analysis details.

On this page