DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan Now×
Skip to content
World desk6 min

Cypress Screenshot Testing: Capture and Compare Page Changes

Cypress can capture screenshots, but visual regression needs a separate integration to compare images with approved baselines. Learn the capture workflow, comparison options, and ways to reduce noisy diffs.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

cy.screenshot() saves an image of the page or a selected element; it does not compare that image with an earlier run. To detect visual changes, capture a repeatable application state and add a visual-regression integration that compares it with an approved baseline and lets your team review differences.

Capture a screenshot with Cypress

Use cy.screenshot() in either interactive cypress open or headless cypress run. In a test, wait for the page to reach the state you want to record, then take the screenshot:

describe('product page', () => {
  it('captures the loaded product page', () => {
    cy.visit('/products/widget')
    cy.get('[data-testid="product-title"]')
      .should('be.visible')
      .and('contain', 'Widget')
    cy.screenshot('product-page')
  })
})

With the default configuration, manually captured images go in cypress/screenshots. Change the screenshotsFolder configuration to use a different directory. During cypress run, Cypress also takes screenshots when tests fail; it does not automatically take failure screenshots during cypress open. To disable automatic failure screenshots in run mode, set screenshotOnRunFailure: false.

Capture a full page or one element

Pass a filename and options to cy.screenshot(). To capture a single element, call the command on a Cypress chain that yields one DOM element:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
cy.get('.post').screenshot('post-card')

A full-page screenshot scrolls from the top to the bottom of the application and stitches the captures together. Fixed and sticky elements may therefore appear more than once in the resulting image. Review a full-page capture for this artifact before treating repeated elements as a page regression.

Account for capture timing

Cypress documents cy.screenshot() as asynchronous and says the capture takes around 100 ms. The application can change during that interval, so the image may show a slightly later state than the instant the command was issued. Assert the content or state that matters before capturing; do not assume issuing the command freezes the page.

Add visual comparison and baseline review

A visual-regression workflow adds comparison and change review to Cypress’s capture capability. The usual sequence is to put the application in a meaningful state, capture an image or DOM snapshot, compare it with an approved baseline, inspect any difference, and approve a replacement baseline when the change is intentional. The selected integration defines how differences are measured and whether a threshold causes a test to fail.

Cypress’s visual-testing documentation distinguishes this from its built-in command: cy.screenshot() captures images but does not compare them. Cypress provides the test runner for integrations; choose an integration that supplies the baseline, comparison, and review workflow your team needs.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Options documented by Cypress

The following products are described by Cypress as visual-testing services or integrations. Their capabilities below are not a ranking, and feature sets can change.

Service Capabilities Cypress describes
ScreenshotNeo Website screenshot API and MCP server for capturing screenshots or PDFs; it is not a Cypress baseline-comparison service. It can be used when you need a clean screenshot capture outside the Cypress visual-diff workflow.
Applitools Eyes AI-assisted visual comparison, end-to-end and component support, cross-browser rendering, and root-cause analysis features.
Argos Captures screenshots during Cypress runs and provides CI and pull-request review and approval.
Chromatic Captures a UI archive during Cypress tests, then renders and diffs it in Chromatic’s cloud.
Happo Supports full-page and component snapshots rendered across multiple browsers and screen sizes.
LambdaTest SmartUI Captures through its SDK and compares across browsers and resolutions, with configurable comparisons and a review dashboard.
Percy (BrowserStack) Uses cy.percySnapshot() to capture DOM snapshots, then renders them across browsers and responsive widths in Percy’s cloud with review and approval.
Sauce Labs Visual Cypress describes an official plugin, automatic baselines, region ignoring, DOM capture, and review on the Sauce Labs platform.
SmartBear VisualTest Offers Cypress visual-regression commands for full-page, element, and multi-device captures with a review dashboard.
Wopee.io Integrates with Cypress and manages and reviews visual-validation baselines on its platform.

The Cypress-maintained plugin directory also lists local and community options, including Visual Regression Diff and Cypress Image Snapshot. Package compatibility is version-sensitive. At the time of the directory information reviewed in October 2026, it listed @frsource/[email protected] as compatible with Cypress 13 or later and updated in September 2026; @simonsmith/[email protected] as compatible with Cypress 15.10.0 or later and updated in September 2026; Sauce Labs plugin 0.10.2 with Cypress 12–15 compatibility and an August 2026 update; and LambdaTest’s beta driver 1.0.9-beta.3 as compatible with Cypress 10 or later and updated in February 2026. Check the current plugin directory and package documentation before installing.

Make captures consistent enough to compare

A difference can reflect a real UI change or uncontrolled variation in data, timing, fonts, or rendering. Reduce those variables so that a diff is useful rather than noisy.

Rank #4
The Web Testing Handbook
  • Used Book in Good Condition
  • Wait for the intended state. Use a functional assertion before the snapshot so the test confirms that expected content has rendered.
  • Control changing data. Stub variable API responses with cy.intercept() and a fixture, then wait for the intercepted response before capturing.
  • Keep the rendering environment fixed. Browser and operating-system versions, display scaling, fonts, and viewport can affect pixels. Use a consistent browser/rendering environment and viewport between baseline and comparison runs.
  • Handle animation deliberately. Cypress’s waitForAnimations and animationDistanceThreshold settings affect action commands; they do not stop an unrelated animation from being captured mid-motion. Disable or wait out relevant CSS animations and transitions when they make the result unstable.
  • Mask only uncontrollable variation. If your chosen tool supports masking or ignoring regions, limit it to content such as ads or third-party widgets. Excluding a small region preserves more useful page coverage than relaxing comparison across the entire page.
  • Choose the right capture scope. Snapshot key pages, important states, and shared components rather than every test. An element-level diff can make a component change easier to locate; retain full-page captures when the layout of the whole page is what matters.

Cypress describes component testing as a natural fit for visual checks: components render in a more controlled environment with a smaller surface area and controlled data, which can help make a difference easier to attribute to the changed component.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Choose an integration for your workflow

Before adopting a visual-testing service or plugin, check these requirements against your application and team:

  • Rendering and data location: Is rendering local or hosted, and where is test content processed?
  • Coverage: Which browsers, responsive widths, devices, and viewport choices are supported?
  • Capture type: Do you need full-page images, element or component snapshots, or DOM snapshots rendered elsewhere?
  • Review process: How are baselines created and updated, and who can approve changes?
  • Noise controls: Can you ignore or mask regions without weakening the rest of the comparison?
  • Cypress support: Does it work with your end-to-end or component tests and the Cypress version you run?
  • CI workflow: Does the integration fit your CI and pull-request review process?

Cypress Cloud is adjacent rather than interchangeable: its product page describes recorded test runs, artifacts, collaboration, UI coverage, and related CI features. That description does not establish Cypress Cloud itself as the baseline-comparison tool.

Or skip the browser setup

If the task is to capture a website screenshot or PDF—not to run Cypress visual-regression comparisons—ScreenshotNeo offers a one-request API. It is a capture option, not a replacement for a Cypress integration that manages approved baselines and visual diffs. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and each response identifies the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. Learn more at ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.