Percy

Visit Website

Introduction

Percy captures screenshots during a test run and compares them to a baseline. A reviewer accepts the diff, which becomes the next baseline, or rejects it as a visual bug. BrowserStack owns Percy. You keep writing functional tests in Cypress, Playwright, Selenium, Storybook, or a similar runner, and a Percy SDK uploads the snapshots from that run.

Rendering happens on Percy’s browsers, not only on the machine that executed the test. Plans are metered in screenshots: one page or component, in one browser, at one width. The product is closed source. There is a free monthly allowance and paid tiers above it.

Features

1. SDK uploads: Official SDKs exist for Cypress, Playwright, Selenium, WebdriverIO, Storybook, and other common runners. The test calls a snapshot command; Percy stores the image.
2. Cross-browser rendering: Snapshots can be rendered in Chrome, Firefox, Edge, and Safari. The test process does not have to install each browser.
3. Responsive widths: One snapshot definition can render at several widths. Each width and browser pair counts as its own screenshot for billing.
4. Visual engine: Percy diffs with computer vision rather than a raw pixel compare, and exposes comparison sensitivity so small anti-aliasing shifts do not all become failures.
5. Review UI: A build page shows side-by-side and overlay diffs. Accepting a snapshot updates the baseline for the next build.
6. Source control checks: Pull requests can be gated on visual approval. Snapshot names can be grouped by test case.
7. Automatic browser upgrades: Percy renders on current browser versions it manages, so the suite is not pinned to a browser you installed two years ago.
8. Desktop and mobile browsers: Paid mobile coverage uses real mobile browsers. The free plan is desktop browsers.

Pros

1. The functional test stays the source of the screenshot: You do not maintain a second set of navigation scripts only for visual diffs.
2. Browsers are hosted: Safari and Firefox coverage does not require those browsers on every CI agent.
3. Review is explicit: A human accepts the baseline. That is slower than auto-approve and it is also how visual suites stay trustworthy.
4. Free allowance is usable: The free plan includes 5,000 screenshots a month, unlimited users, and unlimited projects.
5. Fits an existing BrowserStack account: Procurement and SSO often already cover BrowserStack, so Percy is an add-on rather than a new vendor process.

Cons

1. Screenshot math grows fast: Two pages, two browsers, and three widths are twelve screenshots. A broad matrix exhausts 5,000 screenshots before the month is over.
2. It does not replace the functional runner: Percy has nothing to execute if Cypress, Playwright, or Storybook is not already producing pages.
3. Dynamic UI needs stabilization: Dates, ads, animations, and random data must be frozen or masked, or every build looks like a regression.
4. Review queues stall merges: If nobody accepts snapshots, the check stays red. Teams need an owner for the baseline, not only a green CI badge.
5. Paid tiers are annual platform fees: Desktop is listed at $199 per month billed annually for 10,000 screenshots. That is a poor fit if you only need a handful of local diffs.

Usage and Links (Example)

A Playwright test uploads a named snapshot after the page is ready. The exact helper depends on the SDK version; the docs for @percy/playwright are the source of truth.

npm install --save-dev @percy/cli @percy/playwright
export PERCY_TOKEN="your-project-token"
npx percy exec -- npx playwright test

const percySnapshot = require("@percy/playwright");

await page.goto("https://example.com");
await percySnapshot(page, "Home");

percy exec wraps the test command, waits for uploads, and finalizes the build. Without PERCY_TOKEN the SDK no-ops, which is how local runs stay quiet.

Resources:

• Percy website
• Percy docs
• Plans and billing
• BrowserStack pricing

Pricing

Figures below are from BrowserStack’s public pricing and Percy billing docs. Confirm them before you buy; visual plans move.

1. Free: $0. 5,000 screenshots per month, unlimited users and projects, desktop browsers (Chrome, Firefox, Edge, Safari), responsive widths, and one month of build history.
2. Desktop: $199 per month billed annually. 10,000 screenshots per month, then about $0.036 per extra screenshot. One year of build history.
3. Desktop and Mobile: $599 per month billed annually. 25,000 screenshots per month, real mobile browsers, then about $0.048 per extra screenshot.
4. Enterprise: Custom screenshot volume, SSO, and support. A private visual-testing option is also listed for teams that render on their own infrastructure.

A screenshot is one rendering of a page or component in one browser at one width. Percy’s UI groups those renderings into snapshots, which is a smaller number than the billable count.

Recommended for?

1. Teams with Playwright, Cypress, or Selenium already in CI who want a hosted diff and a review step.
2. Design-system repos that snapshot Storybook and cannot host every browser locally.
3. BrowserStack customers adding visual coverage under the same vendor.
4. Groups that will assign a reviewer. Percy does not help if every diff is auto-approved.

Conclusion

Percy is a hosted visual-review layer on top of tests you already run. The free 5,000 screenshots are enough to prove the workflow on a small set of pages. Cost tracks browsers times widths times pages, so narrow the matrix before you move to the $199 or $599 annual plans. It will not find a broken API or replace the runner that captured the page.