Percy Visual Testing Platform: What’s New

Percy, the visual testing platform acquired by BrowserStack, has recently rolled out several notable updates: a redesigned UI with faster project navigation, new AI-powered visual comparisons, and expanded integrations. This article covers the latest features, how the platform works, and what has changed for teams using Percy in 2024 and beyond.

Background: What Percy Does

Percy is a visual regression testing tool that takes screenshots of web pages and compares them pixel-by-pixel to detect unintended visual changes. It integrates into CI/CD pipelines, so every code push triggers a visual review. The platform has been around since 2015 and was acquired by BrowserStack in 2020, which has accelerated its development.

Key capabilities that remain central to Percy:

• Visual diffs: Highlights even subtle changes in layout, color, or typography.
• Cross-browser testing: Renders your app in multiple browsers and devices simultaneously.
• Review workflow: Teams approve or reject changes before merging.

What’s New: 2024–2025 Updates

BrowserStack has been actively updating Percy. Here are the most significant recent additions:

• AI-Powered Visual Testing: Percy now uses machine learning to reduce false positives. The AI learns which changes are meaningful (e.g., text updates) versus noise (e.g., anti-aliasing differences) and groups them accordingly.
• Faster Screenshot Processing: The rendering engine has been optimized, cutting average processing time by about 30% for large suites.
• New Integrations: Native integrations for GitHub Actions, GitLab CI, and Azure Pipelines have been improved, with better caching and parallelization.
• Redesigned UI: The dashboard now loads project snapshots in a lazy-loading grid, making it easier to manage hundreds of snapshots.
• Advanced Selectors: You can now define CSS selectors to ignore specific elements (e.g., dynamic timestamps) more easily.

How Percy Works Under the Hood

Percy captures a DOM snapshot from your test suite (via SDKs like @percy/cli or language-specific SDKs) and uploads it to Percy’s servers. There, it renders the page in headless browsers across your configured matrix (browsers, viewports). For each snapshot, it creates a baseline image and compares it to the new one using a combination of pixel diffing and now AI-assisted classification.

The diff algorithm produces a heatmap showing changed areas. The AI layer then categorizes changes into:

• Meaningful: Requires human review.
• Noise: Auto-ignored (e.g., font smoothing differences).

This reduces the number of false alerts that teams need to manually dismiss.

Common Problems and How to Solve Them

Teams often encounter a few recurring issues with Percy:

• Too many false positives: Use the ignore selectors or the new AI training feature (available in the project settings) to teach Percy which areas are dynamic.
• Slow builds: Percy processes snapshots in parallel, but you can also split your snapshots across multiple Percy projects or use the --parallel flag in CI.
• Flaky tests due to animations: Disable animations in your test environment or use Percy’s waitForTimeout option.

Comparing Percy to Alternatives

Percy competes with tools like Applitools, Chromatic, and Storybook’s visual tests. Here’s a quick comparison:

• Applitools: Uses AI heavily for layout and content matching, but Percy is often seen as simpler to set up.
• Chromatic: Built for Storybook, it’s great for component-level testing, while Percy is better for full-page and multi-browser testing.
• Storybook Visual Tests: Free but limited to Storybook stories; Percy offers more flexibility.

Percy’s strength is its cross-browser coverage and seamless CI integration.

Costs and Pricing Considerations

Percy offers a free tier with 5,000 screenshots per month, which is suitable for small projects. Paid plans start at around $99 per month (as of 2025), which includes 10,000 screenshots and unlimited users. Enterprise plans offer custom pricing with additional features like SSO and dedicated support.

When budgeting, consider that the number of screenshots is calculated per snapshot per browser/viewport. A single test that runs on 3 browsers and 2 viewports consumes 6 screenshots.

Getting Started: Steps to Adopt Percy

If you’re new to Percy, here’s a typical setup flow:

1. Create a Percy account and a new project.
2. Install the Percy CLI or SDK for your framework (e.g., npm install @percy/cli).
3. Add Percy to your test suite by wrapping your test commands (e.g., percy exec -- npm test).
4. In your tests, call percySnapshot() at the appropriate points.
5. Configure your CI to run Percy and comment on PRs with visual diffs.

Frequently Asked Questions

Is Percy free to use?

Yes, Percy has a free tier that includes 5,000 screenshots per month, which is enough for small projects or evaluation. Paid plans start at around $99/month for more screenshots and advanced features.

Does Percy work with any testing framework?

Percy offers SDKs for popular frameworks like Cypress, Playwright, Selenium, and Puppeteer, as well as a generic CLI that works with any test runner. You can also use it with visual regression tests in Jest or Mocha.

What is the difference between Percy and Applitools?

Both are visual regression tools, but Applitools focuses heavily on AI-based visual AI and layout matching, while Percy offers simpler setup and is often preferred for cross-browser testing. Percy’s AI is newer and less feature-rich, but it’s improving rapidly.

Can Percy test responsive designs?

Yes, you can configure multiple viewport widths in your Percy project. Each viewport is treated as a separate snapshot, so you can see how your design behaves across mobile, tablet, and desktop.

How do I ignore dynamic content in Percy?

You can use CSS selectors to ignore specific elements in the Percy CLI or SDK. For example, you can ignore a timestamp element by passing ignore: ['.timestamp'] to the percySnapshot() function. The new AI also learns to ignore common dynamic patterns over time.

Does Percy support local development?

Yes, you can run Percy locally with the CLI. It will upload snapshots to your Percy project, but you need to be logged in. For local testing, you can also use the --local flag to run a local server.

Related

• Best Ways to Delete Temp Files on Mac
• Recover Files or Windows from a Macrium Reflect 8 Image
• Outlook Show Two Time Zones: How to Set It Up