Best Free Alternatives to Percy for Website Screenshot Testing

Short answer: If your project already uses Playwright, start with Playwright Test’s built-in screenshot comparison: it has no additional service fee, and keeps references alongside your tests. Choose BackstopJS if you want a self-managed scenario-based workflow. For hosted review with a published free allowance, compare Argos and Chromatic. Argos fits teams that want screenshots captured in their Playwright or Cypress test browser and reviewed in CI; Chromatic is a natural candidate for Storybook-centered projects. These tools do different jobs, so compare workflow, counted usage, baseline ownership, browser coverage, and review needs before switching.

ScreenshotNeo is an alternative to try first for screenshot capture: it is a screenshot API and MCP server, not a visual regression review service. It can capture clean website screenshots, remove known consent banners, newsletter popups, and chat widgets before capture, and bills only clean shots. Use it to create screenshots or automate capture; pair it with a comparison tool if you need approved baselines and pull request diff review. See ScreenshotNeo.

1. What “free Percy alternative” can mean

Visual regression testing compares a current rendering with an approved reference image so a team can inspect unintended visual changes. A free option may mean no hosted service fee, a limited monthly hosted allowance, or open-source software that your team runs and maintains. Those are not equivalent.

Free and self-managed: Playwright Test and BackstopJS avoid a hosted snapshot allowance, but your team manages browser execution, reference images, CI, and review.
Hosted free tier: Argos and Chromatic publish monthly free allowances. Check each service’s current terms and its unit: “screenshots” and “billed snapshots” may be counted differently.
Capture API: ScreenshotNeo returns screenshots or PDFs from a URL. It does not, by itself, provide visual baseline comparison or PR approval workflow.

Make a rough volume estimate before choosing: pages or components × states × viewports × browsers × CI runs. The result is a planning estimate, not a guaranteed billable count; vendor counting rules differ.

2. Alternatives at a glance

Option	Best fit	Free model and workflow	Main work or limit
ScreenshotNeo	Clean screenshot capture by API or AI agent	1,000 shots/month free; API and MCP server	Capture service, not visual diff approval; pair with a testing workflow when needed
Playwright Test	Teams already using Playwright	Built-in `toHaveScreenshot()` comparison; references stored with tests	Team owns baselines, environment consistency, and review process
BackstopJS	Self-managed scenario-based browser captures	Open-source, local workflow with visual reports	Team operates the capture and review process and maintains scenarios
Argos	Hosted CI and pull request review with Playwright or Cypress	Argos says its Hobby tier includes 5,000 screenshots/month	Local test matrix determines browser and viewport coverage; verify current terms
Chromatic	Storybook-centered visual testing	Chromatic says its free plan includes 5,000 billed snapshots/month	Count is vendor-specific; map expected stories and runs to the plan allowance

For a hosted allowance, do not compare “5,000 screenshots” directly with “5,000 billed snapshots” as if they were interchangeable. Both Argos’s allowance and Chromatic’s free snapshot figure are vendor-published claims, and plan terms can change. Recheck the linked pages before committing to a plan.

3. Playwright Test: the simplest free starting point

Playwright Test provides `toHaveScreenshot()`. On the first run, it generates a reference image; later runs compare against that reference. The test runner reports visual differences as test failures. References are normally kept with the test file and checked into version control so a code review can include intentional image changes.

Install and create a runnable visual test

npm init -y
npm install --save-dev @playwright/test
npx playwright install chromium

Create tests/homepage.spec.ts:

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

test('homepage visual baseline', async ({ page }) => {
  await page.goto('http://127.0.0.1:3000', { waitUntil: 'networkidle' });
  await expect(page).toHaveScreenshot('homepage.png', {
    fullPage: true,
    animations: 'disabled',
  });
});

Start the application at that address in a separate terminal, then run:

npx playwright test

The first run creates the reference and may report that the snapshot is new. Inspect and commit the generated file. Run the test again to compare against the reference. To deliberately accept a reviewed visual change, regenerate snapshots with:

npx playwright test --update-snapshots

Review updated images before committing. Do not make snapshot update mode the normal CI behavior: that would replace the reference instead of detecting an unexpected change.

Configure a repeatable project

A minimal playwright.config.ts can set the base URL, retries, and a consistent viewport:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://127.0.0.1:3000',
    browserName: 'chromium',
    viewport: { width: 1365, height: 900 },
    colorScheme: 'light',
    reducedMotion: 'reduce',
  },
  expect: {
    toHaveScreenshot: {
      animations: 'disabled',
      caret: 'hide',
      // Set a tolerance only after inspecting expected rendering noise.
      // maxDiffPixelRatio: 0.01,
    },
  },
});

Relevant assertion options include full-page capture, a named image path, animation handling, caret visibility, CSS to stabilize or hide dynamic content, and pixel or ratio tolerances. Keep tolerance small and intentional: a permissive threshold can hide real regressions. Playwright also supports locator screenshot assertions for a component or region rather than the whole page. See the Playwright visual comparisons documentation for the full options and snapshot path rules.

Make browser and baseline updates deliberate

Playwright warns that browser rendering can differ with host operating system, browser version, settings, hardware, power state, headless mode, and other factors. Generate and compare references in the same environment—commonly the same CI image and pinned browser version. If you intentionally change that environment, expect to review and regenerate affected baselines. Avoid comparing a developer laptop baseline to a different CI operating system without first checking for rendering variation.

For multiple browsers or viewports, define Playwright projects or parameterized tests and create a separate expected image for each configuration. Each extra viewport or browser multiplies captures and reference maintenance. Begin with the combinations that represent real user layouts, then expand when the extra coverage justifies its CI time and baseline upkeep.

4. BackstopJS: a self-managed scenario workflow

BackstopJS is an open-source visual regression tool. Its project README describes configuring scenarios and viewports, generating reference bitmaps, running comparisons, and reviewing an HTML report. It supports browser rendering and CI reports. Because your team operates the test workflow and stores the assets, account for scenario maintenance, browser consistency, and how reviewers will approve changes. See the BackstopJS project README.

A typical workflow is:

npx backstop init
# Edit backstop.json to define scenarios and viewports
npx backstop reference
npx backstop test
# Inspect the report; accept only intentional changes
npx backstop approve

Pin the tool and browser environment in the project’s normal dependency and CI setup. Use scenarios for stable routes and states; add setup scripts or interaction steps for pages that require authentication or navigation. Keep reference approval separate from ordinary test execution, and retain reports as CI artifacts if reviewers need to inspect failures after the job ends.

5. Argos: hosted pull request review

Argos describes capturing screenshots in the Playwright or Cypress browser used by the test and reviewing the result through CI and pull request workflows. This can suit teams that want hosted collaboration while keeping their own test browser and viewport matrix. Its July 28, 2026 article states that the Hobby tier includes 5,000 screenshots per month and describes Pro as $100/month for 35,000 screenshots. These are Argos-published plan details; verify current pricing and counting rules before selecting it. See Argos’s Percy alternatives article.

Since capture happens in your test browser, write the browser and viewport coverage you actually want into your Playwright or Cypress projects. A single test run does not automatically imply broad cross-browser or cross-device coverage. The hosted review workflow is useful when the team needs a shared place to inspect and discuss diffs; it still depends on reliable tests and intentionally maintained baselines.

6. Chromatic: a Storybook-centered option

Chromatic maps Storybook stories to visual tests and also describes integrations with Playwright and Cypress. That makes it worth considering when components and states are already represented as stories and the team wants hosted visual review. Chromatic’s documentation says its free plan includes 5,000 snapshots per month; after the included free snapshots are used, testing and review pause until the next month unless the plan is upgraded. See the Chromatic free-plan limit FAQ and Chromatic’s comparison page.

Estimate volume from the stories you publish and how often you run builds, then confirm how the service counts snapshots. A component library with many stories or frequent commits can use an allowance differently from a small set of page-level checks. Do not treat “snapshot” as a universal unit across vendors.

7. How to choose

Already on Playwright, want no extra service? Start with `toHaveScreenshot()`. Keep the browser environment stable and use version control for reference review.
Want to own the whole workflow locally? Evaluate Playwright or BackstopJS. Choose based on whether test code or scenario configuration fits your project better, and account for report and approval needs.
Need hosted pull request review for existing browser tests? Compare Argos’s capture and CI workflow with the test matrix your team can maintain.
Build a component library in Storybook? Put Chromatic on the shortlist, then estimate story volume and verify how the free snapshot allowance applies.
Need screenshots from URLs, clean captures, or AI-agent access? Try ScreenshotNeo as a capture API/MCP service. It complements a visual comparison system; it does not replace its baseline review features.

When comparing Percy or any alternative, use the same representative test set: pages or components, UI states, browsers, viewports, CI frequency, and who must review and approve changes. Ask how dynamic content is handled, where baselines live, what happens when a free allowance is reached, and whether the counted unit is a screenshot, snapshot, build, or something else. Percy’s own allowance and pricing were not independently verified for this article; the cited comparison is Chromatic’s vendor-published account, so check current Percy terms directly before migrating.

8. Or skip the browser setup

If your task is to capture a website image rather than compare it with an approved visual baseline, ScreenshotNeo can return the screenshot with one GET request. The parameter names used by other screenshot APIs also work. Full options and response details are in the ScreenshotNeo API documentation.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

With Node.js versions that do not provide Bun.write, use your runtime’s file-writing API to save the response body. Treat the access key as a secret; do not expose it in a public browser page or commit it to source control.

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers report the page verdict and billing status.
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.
The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

9. Troubleshooting visual test failures

Symptom	Likely cause	Fix
Many diffs appear on every run	Different OS, browser, fonts, rendering settings, or machine	Run baseline generation and comparison in the same pinned environment. Regenerate baselines only after reviewing intentional environment changes.
Only timestamps, ads, or personalized content differ	Dynamic page content is captured	Use deterministic test data, freeze time where possible, or mask/hide the changing region using the tool’s documented mechanism.
Screenshot is blank or incomplete	Capture happened before navigation, hydration, fonts, or images completed	Wait for the relevant selector or app-ready condition; verify the route and server are reachable. Avoid relying on arbitrary long sleeps where an explicit readiness signal is available.
Lazy-loaded content is missing	It only loads after scrolling or entering the viewport	Scroll through the page or trigger the content before capture, then wait for image loading. Confirm whether the selected capture mode includes the entire page.
Failure is noisy around animation or caret	Animated transitions or blinking insertion caret vary by capture moment	Disable animations for test capture and hide the caret. Keep animation behavior covered in functional tests if it matters.
Reference image is not found	Snapshot name, test identity, browser project, or checked-in snapshot path differs	Inspect the generated path and project name, restore the expected reference file, and update intentionally with the snapshot update command only after reviewing it.
CI allowance unexpectedly runs out	Runs, states, viewports, and browsers multiply captures; vendor units differ	Estimate actual monthly usage, check the provider’s counting rules and alerts, and limit redundant matrix combinations.
Hosted diffs do not cover a viewport you care about	Local browser testing captures only configured projects/viewports	Add the missing viewport/browser to your test matrix and account for the added run time and snapshots.

10. Performance, reliability, and cost

Runtime: Every additional page, state, viewport, or browser requires more capture work. Keep the suite focused on high-value screens and component states. Parallel execution can reduce wall-clock time but still uses CI capacity and may increase a hosted service’s counted volume. Capture stable local or staging builds rather than relying on a changing third-party site as a baseline target.

Reliability: Screenshot equality depends on rendering conditions as well as application code. Stabilize test data, authentication, fonts, viewport, browser version, motion, and timing. Use explicit readiness conditions, inspect diffs, and distinguish a real UI regression from environmental noise before approving references. Avoid broad tolerance thresholds as a substitute for stability.

Cost: Playwright and BackstopJS have no hosted screenshot allowance in the described self-managed workflow, but consume engineering, CI, storage, and review time. Hosted services trade some of that operations work for usage limits or paid plans. As of the cited 2026 vendor pages, Argos states 5,000 screenshots/month free and $100/month for 35,000 on Pro; Chromatic states 5,000 billed snapshots/month free and lists $179/month for 35,000 snapshots and $0.008 per additional snapshot on its comparison page. Treat these as dated vendor statements, not stable quotes, and confirm current prices and metering before making a decision.

ScreenshotNeo pricing is separate from visual testing plans: the free tier is 1,000 screenshots/month without a card; paid tiers are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Its billing rules exclude bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits.

11. Frequently asked questions

Can I use Playwright screenshots for visual testing without a hosted service?

Yes. Playwright Test creates and compares reference screenshots with `toHaveScreenshot()`. Your team must provide a consistent capture environment and review reference changes.

Are Argos and Chromatic free plans unlimited?

No. The cited vendor pages state monthly limits of 5,000 screenshots for Argos Hobby and 5,000 billed snapshots for Chromatic’s free plan. Check current terms and do not assume their usage units match.

Does ScreenshotNeo replace Percy?

Not for visual regression review. ScreenshotNeo captures images and PDFs through an API and MCP server; Percy-style baseline comparison and collaborative diff approval require a visual testing workflow.

What is the safest first migration step?

Run the existing critical page or component cases in parallel with the candidate workflow, compare the review process and captured states, and migrate baselines only after the team agrees on environment and approval ownership.