BrowserStack Screenshots vs Percy for Visual Regression Testing
Compare BrowserStack Screenshots and Percy by workflow, browser coverage, setup, and screenshot costs to choose the right visual testing approach.
BrowserStack Screenshots is for quickly inspecting how a page looks across browsers. Percy is for automated visual regression testing: it captures pages or components during test runs, compares them with approved baselines, and gives a team a review and approval workflow for visual changes. Choose Screenshots for on-demand cross-browser checks; choose Percy when you need repeatable build-to-build comparisons and review status tied to your development workflow.
These products overlap in producing browser renderings, but the documented primary jobs differ. BrowserStack’s Screenshots product page describes quick screenshot testing. Percy documents baseline comparison, visual diffs, and review and approval; do not assume those Percy workflow features are included in Screenshots. BrowserStack Screenshots · Percy visual testing documentation.
Decision at a glance
| Need | Better fit | Reason |
|---|---|---|
| Inspect a page in available browsers without building a visual review process | BrowserStack Screenshots | Its documented focus is quick screenshot checks across browsers. |
| Catch unintended appearance changes across builds and review them against approved versions | Percy on Web | Percy documents snapshots, baseline comparisons, visual review, and approvals. |
| Run visual checks on specified operating system, browser, and device combinations in an automated browser session | Percy on Automate | It supports configured combinations and requires both Percy and Automate licenses. |
ScreenshotNeo is the screenshot API alternative to try first when your task is to capture and inspect pages programmatically: it removes consent banners, newsletter popups, and chat widgets before capture, bills only clean shots, and its paid plans start at $5 for 3,000 screenshots. It is a capture API and MCP server, not a Percy-style baseline review system. See ScreenshotNeo.
What each product does
BrowserStack Screenshots: quick cross-browser inspection
The Screenshots product is positioned for taking screenshots across a selection of browsers. This is useful when a developer wants to inspect rendering differences or answer a focused question such as whether a layout looks correct in a particular browser. The reviewed product page does not document Percy-style approved baselines, build-linked visual diffs, or an approval workflow, so verify any required workflow directly before choosing it.
Percy: visual regression and review
Percy captures pages or components as part of a test run, compares the result with previously approved snapshots, and presents visual changes for review. Reviewers can request changes or approve a build; builds can be connected to pull requests and commit metadata, and approvals can update source-control status. Visual checks complement functional assertions: they help find visual changes but do not establish that an interaction or business rule works correctly. Percy’s visual testing guide and recommended guidelines describe this workflow.
Percy project types: Web or Automate
| Project type | Rendering approach | Choose it when | Important consideration |
|---|---|---|---|
| Percy on Web | Captures DOM snapshots and page assets, then reconstructs and renders them on Percy infrastructure. | You want a standalone visual testing workflow using a selection of current browsers. | Documented limitation: it cannot capture authenticated assets. |
| Percy on Automate | Captures screenshots during an Automate browser session. | You need explicit desktop OS, mobile OS, device, and browser combinations in an automated session. | Requires both Percy and Automate licenses. Authenticated sessions can work when the test session and configuration provide authentication. |
BrowserStack’s guidance recommends Percy for visual tests on the newest browsers and Automate for wider combinations. The project types also differ in pseudo-class support and supported test platforms. Check the current SDK and framework documentation for your application before committing to a project type. Percy project types.
How to choose for your team
- Start with the job. For a one-off browser rendering check, use Screenshots. For detecting changes relative to a known-good version over successive builds, use Percy.
- List required environments. Write down the browsers, operating systems, devices, and responsive widths that matter. Percy on Web uses a selection of current browsers; Percy on Automate is the option for configured combinations.
- Check authentication and page state. If the page needs a logged-in session or authenticated assets, account for Percy Web’s documented limitation. Evaluate Percy on Automate with the same authenticated test session your application requires.
- Decide who reviews changes. Percy is a better match when pull request context, requested revisions, approvals, and source-control status are part of the required process. Define who owns approvals so builds do not wait indefinitely.
- Estimate screenshot usage. Count every browser and responsive width rendering. A single page at two browsers and three widths uses twelve screenshots (two browsers × three widths × two pages, if both pages are included). More generally, multiply pages or components by browser permutations and responsive widths.
- Confirm current terms. Check live pricing, plan limits, overage rules, browser support, licenses, and enterprise requirements before purchase; pricing and allowances can change.
Estimate Percy screenshot usage
Percy’s billing documentation counts individual renderings, not just the logical page or snapshot shown in the interface. Its definition is: “A screenshot is a rendering of a page or component in an individual browser and responsive width combination.” See Percy plans and billing.
Use this estimate for a build:
screenshots_per_build = pages_or_components × browsers × responsive_widths
monthly_screenshots = screenshots_per_build × builds_per_month
For example, 8 pages across 3 browsers and 2 widths produce 48 renderings per build. At 20 builds in a month, that is 960 screenshot renderings, before accounting for additional snapshots or other test runs. This is arithmetic from the documented counting model, not a product benchmark.
The reviewed billing documentation lists 5,000 screenshots per month on Percy’s free plan and says paid usage above a plan allocation can incur overage charges. Recheck the live billing page for current plan terms. Keep browser and width matrices focused on supported user journeys; expanding every page to every environment increases usage quickly.
Setup and workflow checklist
For quick checks with BrowserStack Screenshots
- Identify the target page and the browser renderings you need to inspect.
- Capture the page in the selected browsers using BrowserStack Screenshots.
- Compare the resulting images manually and record any browser-specific issue in your normal issue-tracking workflow.
- Repeat for the page states and viewport sizes that matter; a single static page state will not reveal every responsive or interactive problem.
The reviewed Screenshots source establishes the quick screenshot-testing use case but does not provide a code API or a Percy-like baseline workflow. This article therefore does not invent a Screenshots endpoint, SDK call, or automation capability. Consult the current product documentation for its supported setup.
For a Percy visual regression workflow
- Choose Percy on Web or Percy on Automate based on browser/device coverage and authentication requirements.
- Select the SDK or framework integration that matches your test stack from Percy’s current documentation.
- Capture stable page or component states during the test run and associate builds with the relevant commit and pull request metadata.
- Review visual diffs, request changes when appropriate, and approve accepted changes so the baseline reflects the intended design.
- Track screenshot render permutations against plan usage and trim redundant browser-width combinations.
Percy’s docs provide framework-specific starting points; the exact commands and configuration depend on the chosen SDK and project type. Follow the current setup guide rather than copying a generic command that may not match your test stack.
Or skip the browser setup
If the immediate task is to get a clean screenshot from a URL, ScreenshotNeo provides a one-request capture. See the ScreenshotNeo API documentation for the available parameters.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
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)
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 ScreenshotNeo, cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. It can capture PNG, JPEG, WebP, or PDF and supports options such as full-page and element capture, viewport and device settings, custom CSS and JavaScript, waits, request blocking, and caching. Those captures can support visual inspection, but ScreenshotNeo does not replace Percy’s documented baseline comparison and approval workflow. Create a free ScreenshotNeo account.
Performance, reliability, and cost considerations
- Keep the test surface deterministic. Dynamic content, rotating banners, timestamps, and animation can create visual changes unrelated to a code regression. Stabilize test data and page state, and check the Percy SDK guidance for handling dynamic regions.
- Control matrix size. Every browser-width combination adds rendering usage. Run broad coverage where it catches meaningful risk and avoid duplicating equivalent permutations on every page.
- Plan for review latency. Automated capture finds differences, but a human or an explicitly assigned owner still needs to classify intentional versus accidental changes and maintain approved baselines.
- Account for project dependencies. Percy Web reconstructs snapshots from DOM and assets, while Automate captures within a browser session. Authentication, pseudo-class behavior, supported platforms, and SDK integration can affect which setup is reliable for a given application.
- Budget beyond the headline allowance. The reviewed Percy billing documentation lists 5,000 free monthly screenshots and says paid over-plan usage can incur overages. Check current terms and estimate from render permutations, not from page count alone.
- Separate capture from regression review. BrowserStack Screenshots or a screenshot API can produce images for inspection. A repeatable baseline and approval workflow requires tooling that explicitly documents those capabilities, such as Percy.
Troubleshooting
| Symptom | Likely cause | What to check |
|---|---|---|
| A Percy Web capture misses images or other protected assets | Percy Web cannot capture authenticated assets. | Confirm whether the asset needs authentication. Evaluate Percy on Automate with an authenticated test session and the required configuration. |
| A Percy project does not cover the needed device or browser combination | The chosen project type or SDK platform may not support that combination. | Check current project-type and SDK support documentation; consider Percy on Automate for explicitly configured combinations. |
| A snapshot differs on every build despite no intended design change | The page may contain dynamic data, animation, or state that is not controlled between runs. | Use repeatable test data and stable page states; consult the framework SDK guidance for supported ways to handle dynamic content. |
| Screenshot usage is higher than expected | Each browser and responsive width rendering counts, even if the interface groups several renderings into a snapshot. | Recalculate pages or components × browsers × widths × builds, then remove redundant permutations. |
| A visual change is present but functional tests pass | Functional assertions and visual checks cover different failure modes. | Keep both: test behavior with functional assertions and review appearance changes through visual testing. |
| Builds wait for a visual result to be reviewed | The workflow depends on an approval or revision decision. | Assign review ownership and agree which changes block pull requests; Percy documents approval and source-control status behavior. |
FAQ
Does Percy replace functional testing?
No. BrowserStack’s guidance describes visual tests as complementary to functional assertions. Keep tests that verify behavior and use visual comparisons to detect appearance changes.
Can I use Percy only for selected pages?
The documented workflow captures pages or components during test runs. Scope captures to the pages and components where visual regressions matter and estimate their browser-width permutations.
Does Percy on Web use the same browser session as my test?
Percy on Web captures DOM snapshots and assets and renders them on Percy infrastructure. Percy on Automate captures in an Automate browser session.
Is BrowserStack Screenshots the same product as Percy?
No. The reviewed sources describe Screenshots as a quick screenshot-checking product and Percy as a visual regression and review workflow. Choose based on whether you need image inspection or baseline-based change management.
Recommendation
Choose BrowserStack Screenshots for quick cross-browser screenshot inspection. Choose Percy on Web for baseline comparisons and review on current browsers, or Percy on Automate when you need visual captures in explicit OS, browser, and device combinations and can account for both licenses. If you need a clean screenshot API for a URL, try ScreenshotNeo first: it removes common consent banners, popups, and chat widgets before capture, bills only clean shots, and includes an MCP server for AI agents. Its free tier is 1,000 screenshots per month without a card; paid plans start at $5 for 3,000. Sign up free.
