Installation
Install Frontguard CLI and Playwright plugin in your project.
Installation
Frontguard has two packages — install what you need:
| Package | Use Case |
|---|---|
frontguard | CLI for standalone visual regression testing |
@frontguard/playwright | Plugin for visual assertions inside Playwright tests |
CLI
npm install -D frontguardpnpm add -D frontguardyarn add -D frontguardbun add -D frontguardOr run directly with npx:
npx frontguard run --url http://localhost:3000Playwright Plugin
npm install -D @frontguard/playwrightpnpm add -D @frontguard/playwrightyarn add -D @frontguard/playwrightbun add -D @frontguard/playwrightThe Playwright plugin requires @playwright/test as a peer dependency. If you don't have it installed yet:
npm install -D @playwright/test
npx playwright installPrerequisites
- Node.js 18 or later
- Playwright browsers — installed via
npx playwright install - A running dev server — Frontguard needs a URL to render against
Playwright Browsers
Frontguard uses Playwright under the hood. Install the browsers you want to test with:
# Install all browsers
npx playwright install
# Install specific browsers
npx playwright install chromium
npx playwright install chromium firefox webkitFor CI environments, include system dependencies:
npx playwright install --with-deps chromiumEnvironment Variables
Set these optional environment variables for AI analysis and GitHub integration:
# AI Analysis (BYOK — pick one)
FRONTGUARD_OPENAI_KEY=sk-...
FRONTGUARD_ANTHROPIC_KEY=...
# GitHub PR comments
GITHUB_TOKEN=ghp_...Never commit API keys to source control. Use environment variables or a secrets manager.
Verify Installation
npx frontguard --versionYou should see output like:
frontguard v0.1.0Next Steps
- Quick Start — Run your first visual regression test
- CLI Configuration — Configure
frontguard.config.ts