Open source · MIT Licensed · Get started free · Why visual testing? · About the author

Your CSS broke the checkout page. Frontguard caught it.

Frontguard is a free, open-source visual regression testing tool for Playwright. It captures screenshots of every page in your web application, compares them against baselines, and uses AI to explain exactly what changed, why it broke, and how to fix it. No per-screenshot fees. No SaaS dashboard. Just screenshot testing that runs in your existing CI/CD testing pipeline and posts results directly to your pull request.

Install in 30 Seconds View on GitHub

Last updated: May 2026

Why visual regression testing matters

Frontend teams ship CSS changes every day — new components, design system updates, responsive tweaks, dark mode adjustments. Every one of those changes can silently break layouts on pages you never thought to check. According to industry research, CSS and styling bugs account for roughly 30% of all frontend issues reported by end users, yet most CI pipelines only run unit tests and integration tests that verify logic, not appearance. The average time to detect a visual regression without automation is 4.7 hours — measured from deploy to the first customer complaint. In that window, your broken checkout page, misaligned pricing table, or overlapping navigation is live in production, costing conversions and eroding trust.

Visual QA automation eliminates that gap. By capturing screenshots at every pull request and comparing them pixel-by-pixel against known-good baselines, you catch visual regressions before they reach production. But traditional screenshot diffing has its own problems: it floods teams with false positives from font rendering differences, animation timing, and sub-pixel anti-aliasing. Frontguard solves both problems — it catches real CSS bug detection failures while filtering out the noise that makes other visual testing tools unusable at scale.

CSS changes break layouts silently

A padding change in your shared button component breaks the checkout flow on mobile. Your functional tests pass because the button still exists and is clickable. You find out three hours later from a customer screenshot posted in Slack. This is the reality for teams without visual regression testing in their pipeline.

Screenshot diffs are 90% noise without intelligence

Your team approved 47 baseline updates last sprint without reviewing them. When every sub-pixel font rendering difference is flagged as a regression, engineers stop paying attention. Signal drowns in noise. Real regressions slip through because the tool that was supposed to catch them has become the tool everyone ignores.

Manual QA doesn't scale

Every deploy needs eyes on 30 pages across 3 breakpoints. That is 90 manual checks. Every single time. At two deploys per day, that is 180 manual visual inspections daily — a full-time job just to verify that CSS did not break anything. Visual QA automation reclaims that time and makes it repeatable.

How Frontguard works: 4 steps to automated visual testing

Frontguard integrates directly with Playwright's test runner to add visual regression testing to your existing test suite. No separate tools, no additional browser installations, no configuration files to maintain. Here is how the process works end to end:

Step 1 — Install the Playwright plugin

Run a single command to add Frontguard to your project. The @frontguard/playwright package is available on npm and installs in seconds. There are no native dependencies, no browser downloads beyond what Playwright already provides, and no account signup required. It works immediately with your existing Playwright configuration.

npm install @frontguard/playwright

Step 2 — Add visual checkpoints to your tests

Import the visualTest function and call it at any point in your Playwright testing flow. Each call captures a screenshot, assigns it a name, and stores the baseline. You can add visual checkpoints to existing tests — there is no need to rewrite your test suite.

import { test } from '@playwright/test';
import { visualTest } from '@frontguard/playwright';

test('checkout page', async ({ page }) => {
  await page.goto('https://myapp.com/checkout');
  const result = await visualTest(page, 'checkout');
  expect(result.passed).toBe(true);
});

Step 3 — Run in CI with your existing pipeline

Frontguard runs wherever Playwright runs — GitHub Actions, GitLab CI, CircleCI, Jenkins, or any other CI/CD testing environment. No special containers or services needed. Just run your normal test command.

npx playwright test

Step 4 — Review AI-powered analysis in your PR

When a visual regression is detected, Frontguard posts a comment directly on your pull request with side-by-side diffs and an AI-generated explanation. Instead of staring at a pixel diff trying to figure out what happened, you get a plain-English summary like: "The submit button overflows its container on mobile because the new padding-left value of 24px exceeds the available space in the flex layout." The CSS bug detection engine pinpoints the root cause and suggests a fix.

Features built for the problems pixel diffs can't solve

Frontguard is not just another screenshot testing tool. Every feature addresses a specific pain point that makes existing visual testing tools impractical for real-world development teams. Here is what sets Frontguard apart from tools like Percy, Chromatic, and native Playwright screenshot assertions.

Frontguard vs Percy vs Chromatic vs Playwright screenshots

Choosing a visual regression testing tool means weighing cost, accuracy, integration depth, and maintenance burden. Here is how Frontguard compares to the most common alternatives in the visual testing space:

• AI analysis: Frontguard ✔ — Percy ✗ — Chromatic ✗ — Playwright snapshots ✗
• Open source: Frontguard ✔ (MIT) — Playwright ✔ — Chromatic partial — Percy ✗
• No per-screenshot fees: Frontguard ✔ — Playwright ✔ — Percy ✗ ($$$) — Chromatic ✗ ($$$)
• Anti-flake consensus: Frontguard ✔ — all others ✗
• Playwright native integration: Frontguard ✔ — Playwright ✔ — Percy ✗ — Chromatic ✗
• Works without Storybook: Frontguard ✔ — Percy ✔ — Playwright ✔ — Chromatic ✗ (requires Storybook)
• Auto-fix CSS suggestions: Frontguard ✔ — all others ✗
• Smart route discovery: Frontguard ✔ — all others ✗

Percy and Chromatic are excellent SaaS products, but their per-screenshot pricing models make them expensive at scale. Playwright's built-in snapshot testing provides basic pixel diffs but offers no analysis, no flake protection, and no PR integration beyond pass/fail. Frontguard combines the best of all approaches: the reliability and browser coverage of Playwright, the workflow integration of Percy, and AI-powered analysis that none of them offer — all at zero cost under the MIT License.

Frequently Asked Questions

What is Frontguard?

Frontguard is a free, open-source visual regression testing tool built for Playwright. It captures screenshots of your web pages during CI runs, compares them against stored baselines, and uses AI to explain what changed and why. It is licensed under MIT with no per-screenshot fees or usage limits.

How does Frontguard detect visual regressions?

Frontguard uses Playwright's browser engines to capture pixel-accurate screenshots at specified viewport sizes. It compares each screenshot against a stored baseline using a pixel-diff algorithm, then applies its anti-flake consensus system — capturing three images and keeping the majority result. When a genuine difference is detected, the flagged screenshot is analyzed by GPT-4o vision, which reads the visual context and produces a plain-English explanation of the root cause. This CSS bug detection pipeline distinguishes real regressions from rendering noise.

Which frameworks does Frontguard support?

Frontguard works with any web framework that Playwright can test. This includes React, Vue, Angular, Svelte, Next.js, Nuxt, SvelteKit, Astro, Remix, Gatsby, and plain HTML/CSS sites. Because Frontguard operates at the browser level through Playwright, it is completely framework-agnostic. If your application renders in a browser, Frontguard can capture and test it.

Is Frontguard free?

Yes. Frontguard is completely free and open source under the MIT License. There are no per-screenshot fees, no monthly snapshot limits, and no paid tiers. You run it in your own CI environment. The only optional cost is the OpenAI API usage for AI-powered analysis, which is entirely opt-in.

How do I set up Frontguard in my CI pipeline?

Setting up Frontguard in your CI/CD testing pipeline takes three steps. First, install the package: npm install @frontguard/playwright. Second, add visualTest() calls to your Playwright tests. Third, run npx playwright test in your CI workflow — GitHub Actions, GitLab CI, CircleCI, or Jenkins. Frontguard automatically detects the CI environment and posts PR comments with visual diffs.

How does Frontguard compare to Percy and Chromatic?

Percy and Chromatic are SaaS visual testing platforms with per-screenshot pricing that can cost hundreds of dollars per month at scale. Frontguard is fully open source and free. It also includes AI-powered analysis that explains why regressions happened — not just where pixels differ — plus an anti-flake consensus algorithm and auto-fix CSS suggestions that neither Percy nor Chromatic offer. The trade-off is that Frontguard requires you to run it in your own CI infrastructure rather than a managed cloud service.

Does Frontguard work with React, Vue, and Angular?

Frontguard works with React, Vue, Angular, and every other web framework. It operates through Playwright's browser automation layer, which means it tests the rendered output of your application regardless of the framework that produced it. No framework-specific plugins, adapters, or configuration are required. Write your Playwright testing code as you normally would, and add visual checkpoints with a single function call.

What viewport sizes does Frontguard test?

By default, Frontguard tests three viewport sizes that cover the most common device categories: 1280×800 pixels for desktop, 768×1024 pixels for tablet, and 375×812 pixels for mobile (matching iPhone dimensions). You can customize these viewports in your frontguard.config.ts file or override them with CLI flags like --viewports 1440x900,768x1024,390x844. Custom viewport configurations are useful for testing specific device targets or responsive breakpoints unique to your design system.

Get started with Frontguard in 30 seconds

Frontguard offers two integration paths: a standalone CLI for quick audits and a Playwright testing plugin for ongoing visual regression testing in your CI pipeline. Both are available on npm.

CLI Quick Start

The CLI lets you run visual tests against any URL without writing test code. Install globally, initialize a project, and run your first scan:

npm install -g frontguard
frontguard init
frontguard run --url http://localhost:3000

The init command creates a frontguard.config.ts file with sensible defaults: three viewport sizes, Chromium browser, and a .frontguard/ directory for baselines. The run command crawls the URL, captures screenshots at each viewport, and outputs a report to your terminal. Refer to the CLI documentation for the full list of options and flags.

Playwright Plugin

For teams already using Playwright, the plugin approach integrates directly into your test suite:

npm install @frontguard/playwright

import { test, expect } from '@playwright/test';
import { visualTest } from '@frontguard/playwright';

test('homepage visual', async ({ page }) => {
  await page.goto('http://localhost:3000');
  const result = await visualTest(page, 'homepage');
  expect(result.passed).toBe(true);
});

Read the full Playwright plugin guide for advanced configuration, custom thresholds, and viewport overrides.

Built by Ravindra Kumar

Ravindra Kumar is an open-source developer and author of Android Mining and NiceHash tools. He has been building developer tools for over 10 years. Frontguard is his latest project focused on making visual regression testing accessible to every frontend team.

GitHub · Twitter

Never find out about CSS bugs from your users again

Install Frontguard in 30 seconds. Catch the visual regression testing failures that pixel diffs miss. Get AI-powered explanations and CSS fix suggestions directly in your pull requests.

Install Frontguard Free

No credit card required. Free forever under the MIT License. Open source on GitHub.