Free tools Windows power users keep installed
One-click scans. No signup required.
Percy visual regression testing captures a rendered interface, compares it with an approved baseline, and places the visual differences in a review workflow tied to your code change. It complements functional tests: unit and end-to-end tests can confirm that a button works or a request succeeds, while Percy helps you see whether the interface now looks different. A visual diff is evidence for review, not proof that a page is correct or that every difference is meaningful.
What Percy visual regression testing checks
Traditional automated tests assert behavior, values, and accessibility conditions. Visual regression testing checks the appearance produced by the browser: layout, typography, colors, spacing, images, responsive arrangement, and other rendered details. Percy’s workflow is built around a reference image (the baseline) and a newly captured state (the snapshot).
When the new snapshot differs, Percy shows the changed regions so a developer or reviewer can decide whether the change is intentional. An approved change becomes the reference for later comparisons. An accidental change is rejected and investigated in the code.
This distinction matters. A visual comparison can detect a changed margin, missing icon, shifted breakpoint, or altered text wrapping, but it cannot by itself determine whether the product requirement was met. Keep functional, accessibility, and content assertions alongside visual checks.
How Percy’s workflow works
- Integrate Percy with your test workflow. Choose the framework and CI integration that matches your project, then configure the required Percy project and authentication settings. Percy publishes framework and CI options on its integrations page; check the current documentation for SDK, browser, and version-specific requirements.
- Drive the UI to a meaningful state. Your existing test opens a page or component, logs in when appropriate, selects a viewport or device configuration, and supplies deterministic data.
- Capture a snapshot. The integration sends the selected state to Percy. The exact API and setup differ by SDK. Do not assume that a command or option from one framework applies to another.
- Render and compare. Percy processes the snapshot in its cloud environment and compares it with the project’s approved baseline. In Percy’s TestCafe example, the integration captures DOM snapshots, uploads them, renders them in the cloud, and displays the differences in the dashboard; treat that as an example of the TestCafe integration rather than a universal implementation detail for every SDK (Percy’s TestCafe guide).
- Review the change. The result is associated with the code review or CI run. A reviewer can accept an intentional redesign or reject an unintended regression. Percy’s integration overview also describes pull/merge-request workflows, Slack notifications, and webhooks.
- Update the baseline deliberately. Only approve a new image when the changed appearance is expected and the underlying test state is trustworthy.
Designing baselines that catch useful regressions
A baseline is not merely the first screenshot a test happens to produce. Percy’s guidance recommends representing real user scenarios, realistic data states, and common desktop and mobile sizes (Percy’s visual regression testing guide).
Use representative scenarios
- Cover the states users actually rely on: empty, populated, loading, validation-error, permission, and success states where they are visually distinct.
- Use stable fixtures or seeded data. A changing username, timestamp, advertisement, or remote image can create noise that hides a genuine regression.
- Capture after fonts, images, and asynchronous UI have settled. Otherwise the baseline may record a loading state accidentally.
Choose practical viewport coverage
Include the desktop and mobile widths that matter to your product, plus breakpoints where the layout changes. More snapshots increase coverage and review work; prioritize high-risk routes and shared components rather than attempting every possible browser width.
Keep snapshots reviewable
Name snapshots by route, component, and state. A reviewer should be able to tell what changed without opening the test source. Split unrelated regions when that makes ownership clearer, but avoid fragmenting a single user flow into so many images that context is lost.
Adding Percy to a CI pipeline
The implementation depends on your test runner, so use Percy’s current integration instructions instead of copying an unversioned command. The reliable pipeline shape is:
- Install the Percy SDK or test-runner integration as a development dependency.
- Store the Percy project token as a CI secret, not in the repository.
- Run the existing browser or component tests under the Percy wrapper/command documented for your framework.
- Capture snapshots only at intentional checkpoints.
- Publish the CI result and Percy build link as part of the pull or merge request.
- Require visual review according to your team’s branch policy, while retaining a path for an explicit, reviewed baseline update.
Run visual tests on pull requests for fast feedback and on protected branches for a durable record. Parallel CI jobs can reduce wall-clock time, but ensure that all jobs report to the intended Percy build and that retries do not create confusing duplicate comparisons. Keep the SDK and browser versions pinned or upgraded deliberately; a browser, font, or operating-system change can alter rendering and produce broad diffs.
What to configure in CI
- Secrets: Percy token in the CI secret store.
- Environment: fixed locale, timezone, viewport, fonts, and test data where possible.
- Network: predictable access to assets and APIs; mock unstable third-party content.
- Artifacts: retain the test report and Percy build URL for failed jobs.
- Review policy: define who may approve visual changes and when a baseline update is acceptable.
Percy’s general integration page describes compatibility categories, but it is not a substitute for checking the current requirements for your exact framework, CI provider, browser, and SDK version.
Code-driven snapshots versus Percy Visual Scanner
Percy’s conventional approach is code-driven: your tests navigate to a state and explicitly capture it. That gives you control over authentication, data, interactions, and component-level coverage.
Percy also currently advertises Visual Scanner, a no-code route that monitors configured URLs across browsers and devices without installations. This is Percy’s product description; confirm availability and scope in the current Percy site before adopting it. URL monitoring is useful for public pages, while authenticated flows, transient states, and component-level checks generally require a test-driven approach.
Recommended Free Tools
Reviewing and reducing visual noise
Classify every diff
- Intentional: the product change is expected; approve it after checking all affected states.
- Regression: the appearance changed unintentionally; fix the code or test setup.
- Environment noise: rendering changed because of fonts, browser versions, timing, or external content; stabilize the environment before approving.
Investigate large diff sets
If one change produces differences across many pages, first check shared CSS, design tokens, font loading, browser version, device scale, and test data. A global baseline update can conceal a widespread defect, so review representative pages rather than approving everything at once.
Common problems and fixes
No snapshots appear
Check that the CI job actually invokes the Percy-enabled test command, the project token is present, and the test reaches the snapshot call. Read the SDK’s command output and verify that the build is linked to the expected repository change.
Every build is different
Stabilize timestamps, random values, animations, network responses, fonts, and third-party widgets. Wait for the application’s ready condition rather than using an arbitrary short delay.
Only part of the page is captured
Confirm whether your integration captures the viewport, a full page, or a component. Ensure the target is visible and that lazy-loaded content has been triggered before capture.
Rank #4
CI cannot authenticate
Recreate the secret in the CI environment, check that it is available to pull-request jobs under your provider’s fork-security rules, and confirm that the token belongs to the intended Percy project.
A browser upgrade creates widespread diffs
Compare the browser and font versions used by the previous baseline with the new job. Upgrade intentionally, review the resulting changes, and regenerate baselines only after confirming that the rendering change is expected.
Percy and BrowserStack
Percy’s homepage currently says that Percy is part of BrowserStack (Percy homepage). Its recent-project page instructs users to continue by logging in with a BrowserStack account. Account flows and packaging can change, so verify the current sign-in and project setup pages when configuring a new team.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What Percy does not establish
The reviewed official pages do not establish a current pricing table, plan limits, contractual terms, or a complete versioned support matrix. Check Percy’s current commercial and documentation pages for those details. They also do not provide an independently supported statistic for bugs prevented, adoption, accuracy, or time saved. A customer quote reproduced in Percy’s TestCafe article attributes this statement to Joscha Feth, Engineer at Canva: “Some things can’t be easily tested with unit tests and integration tests, and we didn’t want to maintain a visual regression testing solution ourselves. Percy has given us more confidence when making sweeping changes across UI components and helps us avoid those changes when they are not meant to happen.” This is a testimonial, not an independently measured outcome.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsBest Value
Or skip the browser setup
If you need a rendered image or PDF rather than a full Percy review workflow, ScreenshotNeo is a website screenshot API and MCP server. It accepts one GET request, removes cookie-consent banners, newsletter popups, and chat widgets before capture, and reports whether a response was a clean shot, a bot check/CAPTCHA, a blank page, a timeout, a failed load, or a cache hit. Only clean shots are billed.
Use the API directly:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
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}`);See the ScreenshotNeo API documentation for options such as full-page capture, CSS selectors, dark mode, device and retina settings, custom CSS or JavaScript, waiting rules, request blocking, cookies, headers, geolocation, PDFs, signed links, async webhooks, bulk capture, caching, and usage reporting. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Practical decision guide
| Need | Best-fit approach |
|---|---|
| Review UI changes in pull requests with approved baselines | Percy code-driven snapshots integrated with your test suite |
| Monitor public URLs without adding test code | Percy Visual Scanner, subject to its current availability and scope |
| Generate screenshots or PDFs through an API | ScreenshotNeo, with clean-shot billing and configurable capture options |
| Prove behavior, accessibility, or business rules | Functional and accessibility tests alongside visual testing |
Frequently Asked Questions
Does Percy replace end-to-end testing?
No. Percy checks rendered appearance; it does not replace assertions for behavior, accessibility, APIs, or business rules.
When should a Percy baseline be approved?
Approve it only after confirming that the state, data, viewport, and rendering environment represent an intentional product result.
Can I use Percy for authenticated pages?
Use the framework integration and test setup that can establish the required session; confirm the current SDK instructions for authentication and secrets.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
