What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
BrowserStack visual regression testing is delivered through Percy. Percy captures a page or mobile-app screen, compares the rendering with an approved baseline, and shows the changed regions for review. A highlighted difference is evidence of visual change—not proof of a defect—so a person must decide whether to approve it or fix the code.
This guide explains the baseline cycle, web and mobile choices, integration paths, coverage planning, usage math, review practices, and practical failure handling.
How Percy visual regression testing works
Percy sits beside your functional tests or snapshot workflow. During a build it records screenshots, compares each rendering with the project’s current baseline, and groups the results in a review interface. The workflow is intentionally approval-based:
- Create a project and capture the first build. Because no previous version exists, the first approved snapshots establish the baseline.
- Run later builds after code or content changes. Percy compares the new renderings with that baseline and marks changed areas.
- Review every difference. Approve an intentional redesign or content update to promote it to the baseline. Leave an actual regression unapproved, correct the implementation, and run the build again.
Read BrowserStack’s explanation of the comparison model in Visual Testing with Percy. Percy’s diff is a review signal; it does not determine product intent automatically.
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 problemsChoose the Percy workflow that fits your project
Web applications with existing automation
For a Selenium, Playwright, Cypress, WebdriverIO, or other established test suite, use a Percy SDK or BrowserStack SDK integration. The test navigates to the state you want to protect and requests a snapshot at that point. CI then uploads the renderings to Percy for comparison. BrowserStack documents the available paths in Percy integration options.
This approach keeps visual checks next to functional assertions, gives you deterministic test data, and makes pull-request review part of the normal development process. Keep the snapshot call after the page has reached its intended state rather than at the first paint.
No-script or CLI evaluation
For a static site, a quick proof of concept, or an ad-hoc page, Percy also documents a no-script/CLI path. It is useful when you want to validate the service before modifying a test suite. It provides less application-state control than an in-test snapshot, so move to an SDK integration when you need authenticated routes, seeded data, or repeatable interactions.
Native mobile apps with App Percy
App Percy compares screens from iOS and Android applications across selected devices and operating-system versions. BrowserStack recommends its BrowserStack SDK as a simplified integration route, while a Percy SDK is another supported approach. Capture a screen after navigation and data loading have completed, then review the resulting device-specific diffs.
Recommended Free Tools
A practical web setup sequence
- Create the Percy project. Select the project associated with the web application and configure access for your CI environment.
- Install the integration documented for your test runner. Follow the language-specific Percy or BrowserStack SDK instructions rather than mixing SDK generations.
- Capture a stable state. Navigate to a known URL, seed predictable data, wait for the application’s ready condition, and invoke the snapshot operation.
- Run the first build on CI. Treat it as baseline creation. Review it for accidental loading states, missing fonts, and test data errors before approving.
- Add the check to pull requests. Every subsequent build should report its status to source control so reviewers can open the Percy comparison from the change.
- Approve intentionally changed snapshots. Approval updates the baseline used by future builds; it should be performed only after a human has classified the visual change.
The exact environment variables, commands, and runner adapters vary by framework, so use the current integration pages linked from BrowserStack’s integration documentation.
Designing browser and responsive coverage
Percy can render selected browsers and responsive widths. A browser-specific rendering may expose a real CSS or font problem that is invisible in another engine, but every additional combination creates another screenshot to store and another result to review.
Start with a risk-based matrix
- Choose the browsers your support policy and user analytics require.
- Choose widths representing your responsive breakpoints and the most important real-world viewport.
- Add an engine or width only when it protects a user journey, component, or known compatibility risk.
- Keep the matrix stable between builds; changing it changes usage and can create confusing review noise.
BrowserStack’s cross-browser visual testing documentation describes browser configuration, while its recommended guidelines discuss full-page captures and the Recommended match level. Those are vendor recommendations, not a universal requirement: animated pages, rotating ads, timestamps, and live data may need a narrower region or additional stabilization.
Understand screenshot consumption
A displayed Percy snapshot can group multiple browser/width renderings. Billing counts the individual screenshots. BrowserStack illustrates that two pages across two browsers and three widths produce 12 screenshots. Plan capacity from the multiplication, not from the number of snapshot calls in code.
App Percy device planning
For mobile, each selected device contributes a usage unit for a snapshot. BrowserStack’s App Percy documentation gives the example that one snapshot across three devices counts as three units. Select devices by operating-system support, screen dimensions, and business-critical flows rather than attempting every available model.
Capture screens at deterministic points: dismiss onboarding consistently, use fixed test accounts, wait for network content, and avoid system dialogs that differ between runs. If a visual issue appears on one device only, inspect that device’s rendering and OS-specific layout before changing shared code.
Baseline and review practices that reduce false positives
Stabilize the page before capture
- Wait for the application’s loaded or ready selector, not an arbitrary short delay whenever a reliable selector exists.
- Freeze dates, randomized identifiers, rotating banners, and user-specific data in test fixtures.
- Load the same web fonts and assets in CI on every run.
- Hide or disable animations and transitions during capture where they are not the subject of the test.
- Capture full pages when below-the-fold layout matters; capture a focused component when unrelated regions are intentionally volatile.
Classify differences consistently
- Intentional: approve after confirming the design or content change is expected.
- Regression: reject, fix the implementation, and rerun the build.
- Environmental: correct the test environment first—fonts, data, timing, viewport, or browser version—then recapture.
Never approve a large batch without sampling the underlying pages. A baseline is a contract for future comparisons, so approving a broken render makes later detection less useful.
Git and Visual Git baseline management
BrowserStack documents both Git-oriented and Visual Git approaches for managing baselines. Teams that prefer pull-request workflows can keep visual review closely tied to source changes; teams that want a visual-first workflow can use Percy’s project review interface. Choose one convention, document who may approve snapshots, and avoid parallel baseline changes that make the source of truth unclear.
Usage, plans, and cost planning
The following allowances are vendor-published figures from BrowserStack’s plan pages and can change; verify them before purchase.
| Product | Free monthly allowance | How usage is counted |
|---|---|---|
| Percy web | 5,000 screenshots | Each browser/width rendering is an individual screenshot; a grouped snapshot may contain several. |
| App Percy | 1,000 screenshots | Each device rendering contributes a usage unit. |
Both free plans list unlimited users and unlimited projects. Paid plans include plan-specific screenshot quantities, and usage beyond the included amount is treated as overage. See Percy plans and billing and App Percy plans and billing for current terms.
Estimate a month before enabling broad coverage: pages × browsers × widths × builds for web, or screens × devices × builds for mobile. Include reruns from pull requests and scheduled builds. If review capacity is limited, reduce low-risk permutations before reducing coverage on critical journeys.
Rank #4
Troubleshooting common Percy problems
Every snapshot is marked changed
Likely causes: unstable data, animation, font loading, viewport drift, or a changed browser configuration. Fix: freeze fixtures, wait for a ready selector, disable motion, confirm fonts are available in CI, and compare the effective browser and width settings with the baseline.
Free tools Windows power users keep installed
One-click scans. No signup required.
The screenshot captures a loading shell
Cause: the snapshot call runs before asynchronous content finishes. Fix: wait for a meaningful element or application-ready signal; use a delay only when no reliable signal exists.
Only one browser differs
Cause: genuine engine-specific CSS, font, or rendering behavior. Fix: inspect that browser’s diff, reproduce with the same viewport, and decide whether the support policy requires a code fix or an accepted baseline.
Usage rises unexpectedly
Cause: adding browsers, widths, devices, or frequent reruns multiplies individual screenshots. Fix: calculate the matrix explicitly, remove redundant combinations, and monitor pull-request reruns and scheduled jobs.
A build has no useful baseline
Cause: the initial build was approved while incomplete or broken. Fix: correct the test state, create a clean build, and approve only stable renderings. Do not use a failed or partially loaded build as the project’s reference.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Best Value
Or skip the browser setup
If you need a clean screenshot API rather than a Percy baseline workflow, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one request. It is an alternative to try first when you want capture infrastructure without maintaining browser automation: cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; and its MCP server lets Claude, Cursor, or another MCP client call take_screenshot, get_page_info, and capture_pdf.
Every feature is available on every plan: full-page and selector captures, device and viewport controls, dark mode, retina scale, PDF options, custom CSS and JavaScript, clicks, waits, blocking rules, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Use the ScreenshotNeo documentation for parameters and authentication.
cURL
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}`);Create a free ScreenshotNeo account to start with 1,000 screenshots a month and no card.
When Percy is the right choice
Choose Percy when your primary need is reviewable visual regression in a test and CI workflow: approved baselines, pull-request feedback, browser or device matrices, and a human decision on each change. Choose App Percy for native mobile screens. A screenshot API such as ScreenshotNeo is better suited to on-demand rendering, document generation, agent tooling, or a service endpoint that returns an image; it does not replace Percy’s baseline approval and visual-diff review process.
Frequently Asked Questions
Does Percy automatically decide whether a visual change is a bug?
No. Percy highlights differences against the approved baseline. A reviewer must approve intentional changes or reject a regression and rerun the test.
Are Percy snapshot counts the same as screenshot counts?
Not necessarily. One displayed snapshot can group multiple browser/width renderings, and each rendering counts toward usage.
Should I test every browser and mobile device?
No. Build a risk-based matrix from your support policy, analytics, breakpoints, and critical journeys; wider coverage increases both screenshot consumption and review volume.
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.
