End to End Snapshot Testing Using Cypress

End to End Snapshot Testing Using Cypress: A 2026 Guide

End-to-end snapshot testing sounds reliable in theory, but here’s what surprises many Cypress users: most snapshot failures have nothing to do with real regressions.

Dynamic content, timing issues, font rendering, and third-party scripts often trigger false diffs, which leads teams to ignore or auto-approve results. Over time, snapshot tests lose credibility, even though the idea behind them is still solid.

This guide shows how to do Cypress snapshot testing the right way in 2026. It explains how Cypress snapshots work, where image and DOM snapshots fit, and why popular plugins struggle at scale. Most importantly, it walks through how Percy improves

What is Snapshot Testing?

Snapshot testing is a technique used to capture the state of an application at a specific moment and compare it against a previously approved reference. In end-to-end testing, this usually means recording how a page or component looks or how its structure is rendered during a real user flow.

Instead of asserting individual conditions, snapshot testing focuses on change detection. It answers a simple question, did something change compared to last time? This makes it useful for catching unintended UI or layout changes that traditional assertions may miss, especially in visual or content-heavy applications.

In the context of Cypress, snapshot testing is commonly used to validate full pages, critical flows, or key UI states. Its effectiveness depends on how stable the snapshots are and how carefully changes are reviewed.

How Cypress Snapshot Testing Works

Cypress snapshot testing captures the state of an application during an end-to-end test and compares it against a stored baseline. These snapshots are usually taken after a page load or user interaction, which makes timing and stability especially important. Understanding this flow helps explain both the strengths and limitations of Cypress-based snapshots.

Step 1: Run a Cypress Test Scenario

Cypress executes a real user flow in the browser, such as visiting a page or completing a form. The application renders fully before any snapshot is taken.

Step 2: Capture the Snapshot

A snapshot is captured at a defined point in the test, often using a plugin or custom command. This snapshot may represent the DOM structure or a visual image of the page.

Step 3: Store the Baseline Snapshot

On the first run, Cypress saves the snapshot as a baseline. This baseline represents the expected state of the UI for future comparisons.

Step 4: Compare Against the Baseline

On subsequent runs, Cypress compares the new snapshot with the stored version. Any difference is flagged as a test failure.

Step 5: Review and Update Snapshots

Developers review detected changes and decide whether to update the baseline or fix the issue. This review step determines whether snapshot testing adds value or creates noise.

What are the Main Types of Snapshot Testing?

Snapshot testing in Cypress generally falls into two categories, based on what is being captured and compared. Each type solves a different problem and comes with its own trade-offs. Understanding these differences helps teams choose the right approach instead of applying snapshots everywhere.

Image Snapshot Testing

Image snapshot testing captures screenshots of pages or elements and compares them visually against a baseline. It focuses on real browser rendering, which makes it valuable for UI-heavy workflows.

• Visual accuracy validation: Confirms that layout, spacing, colors, fonts, and alignment appear consistently across test runs and environments.
• Detection of CSS regressions: Identifies unintended changes caused by stylesheet updates, responsive breakpoints, or design refactors that unit or DOM tests may miss.
• End-user perspective coverage: Reflects what users actually see in the browser rather than relying on abstract markup or component structure.
• Sensitivity to dynamic behavior: Can fail due to animations, lazy loading, ads, or third-party content unless snapshots are carefully stabilized.
• Higher storage and review cost: Image files are larger and require visual review, which adds overhead compared to text-based snapshots.

DOM Snapshot Testing

DOM snapshot testing captures the rendered HTML structure at a specific point in time and compares it against a stored reference. It emphasizes structure and content rather than appearance.

• Structural change detection: Flags unexpected changes in markup hierarchy, attributes, or text content that may affect accessibility or functionality.
• Lower noise than visual snapshots: Avoids failures caused by pixel-level rendering differences, making it more stable across environments.
• Faster execution and storage: Text-based snapshots run quickly and are easier to version control than image snapshots.
• Limited visual coverage: Cannot detect layout shifts, styling issues, or visual misalignment that impact user experience.
• Best suited for content-heavy pages: Works well for pages where structure and text accuracy matter more than exact visual presentation.

What Are the Popular Plugins For Cypress Snapshot Testing?

Cypress does not provide snapshot testing out of the box, so teams rely on plugins to capture and compare UI or DOM states during end-to-end tests. These plugins extend Cypress in different ways, some focus on visual screenshots, while others serialize DOM output. Each approach introduces trade-offs around stability, review effort, and maintenance.

Cypress DOM Snapshot Plugin (@cypress/snapshot)

This plugin enables DOM-based snapshot testing by serializing values or elements and comparing them against stored references. It is useful when structure and content matter more than visuals.

• DOM-level comparison: Captures serialized HTML or JavaScript values instead of screenshots, making it easier to detect structural or content changes.
• Lower execution overhead: Runs quickly and avoids browser rendering differences that often affect image snapshots.
• Limited visual coverage: Does not detect layout, styling, or CSS regressions that impact real user experience.

Example usage:

import '@cypress/snapshot';



cy.get('.product-list').toMatchSnapshot();

Cypress Image Snapshot Plugins (cypress-image-snapshot)

These plugins capture screenshots of pages or elements and compare them pixel by pixel against a baseline image. They are commonly used for visual regression testing.

• Pixel-level visual validation: Detects layout shifts, styling changes, and visual regressions that DOM snapshots cannot catch.
• Highly sensitive to noise: Animations, fonts, dynamic content, and third-party scripts often cause false positives.
• Manual baseline management: Teams must manage and update baseline images locally or in version control.

Example usage:

import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';

addMatchImageSnapshotCommand();

cy.matchImageSnapshot();

Chromatic Cypress Integration

Chromatic extends Cypress tests by capturing visual states and comparing them in a hosted review environment. It focuses on visual diffs and team-based approval workflows.

• Visual-first review workflow: Presents side-by-side diffs that make changes easier to understand and approve.
• CI-friendly execution: Runs during CI pipelines and reports results without requiring local snapshot updates.
• Primarily UI-focused: Best suited for visual validation rather than logic or structural testing.

Example usage:

cy.visit('/checkout');

cy.chromaticSnapshot();

Custom Cypress Snapshot Commands

Some teams build custom snapshot utilities tailored to their application. These usually serialize specific DOM regions or test outputs.

• Highly flexible implementation: Can target exactly what needs to be snapshotted, reducing unnecessary coverage.
• Higher maintenance cost: Custom logic must be maintained and updated as the application evolves.
• Inconsistent review experience: Lacks standardized diffing or approval workflows unless combined with external tools.

What is the Main Issue With Plugins For Cypress Snapshot Testing?

Cypress snapshot plugins make it easy to capture UI or DOM states, but many teams struggle to scale them reliably. The core problem is not snapshot testing itself, but how these plugins handle noise, review workflows, and long-term maintenance in real-world end-to-end tests.

• High false positive rates: Minor changes like dynamic data, timestamps, animations, or font rendering differences frequently trigger failures that are unrelated to real regressions.
• Lack of meaningful review workflows: Many plugins rely on local diffs or raw files, which makes it easy for teams to update snapshots without fully understanding the impact.
• Baseline management overhead: Snapshot files often live in version control, growing quickly and becoming difficult to maintain as applications and test coverage expand.
• Environment-dependent failures: Differences across machines, browsers, or CI environments can cause inconsistent snapshot results and reduce trust in test outcomes.
• Poor signal-to-noise ratio: When snapshots fail too often for low-impact changes, teams start ignoring failures, which defeats the purpose of snapshot testing.
• Limited collaboration support: Most plugins are designed for individual developers rather than team-based review and approval of visual changes.

How Does Percy Help With Cypress Snapshot Testing?

Percy brings a modern, AI-powered visual testing engine to Cypress snapshot workflows, making end-to-end visual validation more accurate, reliable, and scalable. Instead of comparing raw screenshots or DOM outputs manually, Percy automatically detects meaningful visual changes and filters out noise from animations, dynamic content, and rendering differences.

This helps teams focus on real regressions and ship UI changes with confidence while running tests in CI/CD.

Percy’s impact is backed by usage statistics that show real engineering value: over 528 million screenshots compared, 2.4+ million visual bugs caught, and 441+ million minutes saved in manual effort through automated visual testing workflows.

Key Features of Percy:

Pricing:

• Free (Starter): Ideal for individuals and small teams, offering a limited monthly screenshot quota with full access to core visual snapshot and review features.
• Team/Professional: Designed for growing teams, this tier increases screenshot limits and build history while enabling smoother collaboration and review workflows.
• Business: Built for scale, it supports high-volume snapshot testing with extended retention, advanced comparison controls, and enterprise-ready collaboration features.
• Enterprise: A fully customizable plan tailored for large organizations, including unlimited scale, premium support, security controls, and SLA-backed reliability.

Upgrade to AI-powered Visual Automation

Unlock 5x faster review times across 50,000+ browsers & devices

Try Percy

How to Conduct Cypress Snapshot Testing Using Percy

Percy works alongside Cypress to introduce visual snapshot testing into your end-to-end workflows. Instead of relying on fragile pixel diffs or manual screenshots, Percy captures snapshots during Cypress test runs and analyzes visual changes using AI.

This approach helps teams catch UI regressions early, reduce flaky failures, and scale visual testing confidently across browsers and viewports.

Steps to conduct Cypress snapshot testing using Percy:

• Install Percy and Cypress dependencies: Add @percy/cli and @percy/cypress to your project using your package manager. These packages allow Percy to capture snapshots during Cypress execution and upload them for visual comparison without modifying your core test logic.
• Authenticate Percy in your environment: Generate a Percy project token and configure it as an environment variable locally and in CI pipelines. This ensures snapshots are securely associated with the correct project and uploaded automatically during test runs.
• Import Percy commands in Cypress: Register Percy’s support file in your Cypress configuration so snapshot commands are globally available. This setup keeps your test files clean and avoids repetitive imports across multiple test suites.
• Insert snapshot points in test flows: Use cy.percySnapshot() at stable and meaningful UI states, such as after navigation, form submission, or modal rendering. Placing snapshots thoughtfully reduces noise and ensures visual diffs highlight real regressions.
• Run Cypress tests with Percy enabled: Execute Cypress using the Percy CLI to trigger snapshot capture alongside functional assertions. Percy runs in parallel with Cypress, adding visual coverage without slowing down test execution significantly.
• Review visual changes in the Percy dashboard: Percy presents side-by-side comparisons of baseline and new snapshots, highlighting only meaningful visual differences. Teams can inspect changes, leave comments, and collaborate on approvals directly within the dashboard.
• Integrate with CI for automated checks: Connect Percy with your CI system so visual diffs are evaluated on every pull request. Builds can be blocked when unapproved visual changes are detected, preventing regressions from reaching production.
• Maintain baselines as UI evolves: Approve intentional design updates to refresh visual baselines over time. Regular baseline maintenance ensures snapshot tests remain reliable and aligned with the current state of the application.

What Are the Best Practices for Cypress Snapshot Testing?

Cypress snapshot testing works best when visual checks are intentional, stable, and tightly aligned with user behavior. Without clear guardrails, snapshot tests can become noisy, slow to review, or difficult to maintain.

Best practices for effective Cypress snapshot testing:

• Capture snapshots only at stable UI states: Trigger snapshots after animations, network requests, and lazy-loaded content have fully settled to avoid flaky diffs caused by transient rendering behavior.
• Limit snapshots to meaningful user journeys: Focus on critical pages, conversion flows, and shared UI components instead of capturing every screen, which increases maintenance without adding real coverage.
• Avoid over-snapshotting dynamic content: Exclude timestamps, randomized data, ads, or personalized content where possible, as these frequently cause unnecessary visual noise.
• Standardize viewports and environments: Use consistent screen sizes, browsers, and test data across runs so visual comparisons remain reliable and easier to review.
• Pair visual snapshots with functional assertions: Combine cy.percySnapshot() with Cypress assertions to confirm both UI appearance and application behavior in the same test flow.
• Review and approve snapshots regularly: Treat visual diffs as part of the code review process, approving intentional changes promptly to prevent baseline drift.
• Keep snapshot names descriptive and consistent: Use clear naming conventions that reflect user actions or page states, making it easier to identify failures in CI and dashboards.
• Continuously prune outdated snapshots: Remove snapshots tied to deprecated features or old layouts to keep the test suite lean and easier to maintain over time.

Conclusion

End-to-end snapshot testing with Cypress has become a practical necessity as UI complexity and release velocity continue to increase.

While Cypress excels at validating user flows and application behavior, visual gaps can still slip through when UI changes are subtle, cross-browser specific, or layout-driven. Snapshot testing fills that gap by adding a visual safety net where traditional assertions fall short.

By pairing Cypress with Percy, teams can move beyond brittle plugin-based snapshots and adopt a scalable, AI-powered visual testing workflow. This approach reduces false positives, simplifies maintenance, and brings visual reviews directly into CI pipelines.