Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsCypress can take screenshots, but it does not compare them by itself. The cy.screenshot() command captures the application, an element, or a full page. For visual regression testing, you must add a Cypress-compatible comparison plugin or hosted service that checks the new image against an approved baseline and produces a diff for review.
A dependable check follows this sequence: put the application in a known state, wait for it to settle, capture the intended scope, compare the result with the baseline, inspect the diff, and update the baseline only when the visual change is deliberate.
What Cypress does—and what it does not
Cypress documentation states that Cypress does not perform image comparison itself. Its screenshot API is a capture mechanism. It saves images to cypress/screenshots by default, can capture the application under test or a selected element, and can stitch a full-page image by scrolling through the page.
Comparison is a separate step supplied by a plugin or service. The comparator normally stores an approved image, renders the test again, calculates pixel or perceptual differences, and gives you a diff artifact to accept or reject. A functional assertion can confirm that the page reached the expected state before the visual snapshot, but it cannot tell you that a button moved by a few pixels.
The Cypress visual-comparison workflow
- Choose the visual contract. Decide which page, component, viewport, browser, and state should remain stable. Prefer a small number of meaningful checkpoints over a screenshot after every command.
- Control the state. Seed predictable data, freeze time where dates appear, and stub changing requests with fixtures.
- Wait for readiness. Assert that the key component is visible and wait for the API response, loading indicator, selector, or other condition that defines a complete state.
- Capture deliberately. Use an element snapshot when one team owns the component; use a viewport or full-page capture when layout relationships matter.
- Compare with a reviewed baseline. The first run creates or approves a baseline. Later runs fail when the difference exceeds the comparator’s configured policy.
- Review the diff. Determine whether the change is an intentional product update, a rendering-environment change, or an actual regression.
- Update only intentionally. Never overwrite baselines merely to make a failing build green.
A runnable Cypress capture test
The following test is complete Cypress code for producing a stable capture. It also demonstrates the controls that make a later comparison useful.
describe('dashboard visual state', () => {
beforeEach(() => {
cy.clock(new Date('2026-01-15T12:00:00Z').getTime());
cy.intercept('GET', '/api/dashboard', {
fixture: 'dashboard.json'
}).as('dashboardData');
cy.viewport(1280, 800);
cy.visit('/dashboard');
cy.wait('@dashboardData');
cy.get('[data-testid="dashboard"]').should('be.visible');
});
it('captures the approved dashboard state', () => {
cy.screenshot('dashboard-1280x800', {
capture: 'viewport',
blackout: ['.live-chat', '[data-testid="rotating-promo"]'],
overwrite: true
});
});
});This writes a viewport image. For an element-only image, call cy.get('[data-testid="dashboard"]').screenshot('dashboard-panel'). For a stitched page image, use capture: 'fullPage'. Full-page stitching scrolls the application and can produce surprising results when sticky headers, fixed toolbars, or scroll-triggered effects change while Cypress moves through the page.
Adding a comparison plugin
Local plugins keep images and review artifacts in your repository or CI system. Cypress’s plugin catalog lists community options including Cypress Image Snapshot, Cypress Image Diff, and Visual Regression Diff. Their APIs, supported Cypress versions, and maintenance status can change, so verify the current package documentation before installation.
For illustration, a typical Cypress Image Snapshot setup has three pieces. Confirm the package’s current API and version before copying it into a production suite.
Recommended Free Tools
npm install --save-dev cypress-image-snapshot// cypress.config.js
const { defineConfig } = require('cypress');
const {
addMatchImageSnapshotPlugin
} = require('cypress-image-snapshot/plugin');
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
addMatchImageSnapshotPlugin(on, config);
return config;
}
}
});// cypress/support/e2e.js
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();// cypress/e2e/dashboard.cy.js
describe('dashboard visual state', () => {
it('matches the approved image', () => {
cy.viewport(1280, 800);
cy.visit('/dashboard');
cy.intercept('GET', '/api/dashboard', {
fixture: 'dashboard.json'
}).as('dashboardData');
cy.wait('@dashboardData');
cy.get('[data-testid="dashboard"]').should('be.visible');
cy.get('[data-testid="dashboard"]').matchImageSnapshot('dashboard-panel');
});
});The first approved run establishes the baseline according to the plugin’s workflow. Subsequent runs create a failure and diff when pixels differ. Keep baseline files under the same review process as code, and make baseline updates in a pull request that explains the intended UI change.
Make the rendered pixels deterministic
Freeze time-dependent content
Dates, relative timestamps, countdowns, and rotating campaigns can change between runs. Use cy.clock() before the application schedules timers, and provide a fixed date in the test.
Stub network data
Use cy.intercept() with fixtures for API responses that would otherwise vary. This prevents a changed server response from being mistaken for a CSS or layout regression.
Wait for the real ready state
Do not take a snapshot immediately after cy.visit(). Assert on the page’s meaningful content, wait for required requests, and wait for fonts or images that affect layout. A screenshot command is asynchronous; Cypress documents that capture takes around 100 ms, and the application can change between issuing the command and the actual capture.
Control animation and effects
Disable transitions in a test stylesheet where possible, or wait until an animation has completed. Hide only genuinely uncontrollable regions, such as a live chat launcher or rotating advertisement. Masking an entire page to avoid noise hides real regressions.
Pin the rendering environment
Use a fixed viewport and keep browser, operating-system image, runtime, fonts, and device scale consistent between baseline creation and comparison. A baseline made on one font stack can differ from a CI image even when the application code is unchanged.
Choose the right snapshot scope
Element snapshots
An element-level image isolates ownership and usually produces a more actionable diff. It is a good fit for navigation, cards, forms, and shared components whose boundaries are known.
Viewport snapshots
A viewport capture checks what a user sees at one explicit width and height. Record the viewport in the test name or baseline convention so a desktop image is never compared with a mobile image.
Free tools Windows power users keep installed
One-click scans. No signup required.
Full-page snapshots
Full-page captures reveal page-level layout problems, but Cypress scrolls and stitches the result. Sticky or fixed elements may appear repeatedly or at an unexpected position, and lazy-loaded content can change as the page is scrolled. Use this scope for layout coverage, not as the default for every component.
Component Testing
Cypress Component Testing is a natural fit when a component can be rendered with controlled props and fixtures. It removes unrelated application chrome and makes a difference easier to attribute.
Local plugins versus hosted visual services
Cypress documentation describes two broad approaches. Local, open-source plugins are generally free and run in your infrastructure; hosted services are paid subscriptions that commonly provide managed rendering, cross-browser or viewport coverage, dashboards, and pull-request review. Compare not only price, but also where rendering and comparison occur, who owns baselines, how diffs are reviewed, and how tightly you can control the environment.
| Option | What it does | Ownership and trade-offs |
|---|---|---|
| ScreenshotNeo | API and MCP server for clean website screenshots; ScreenshotNeo is the first capture service to consider because it removes consent banners, popups, and chat widgets before capture, bills only clean shots, and has a $5 paid plan. | It captures images or PDFs; your Cypress or CI comparison step still owns baselines and visual decisions. |
| Local Cypress plugin | Compares images on your developer machine or CI runner. | You control dependencies, files, and rendering, but your team maintains baselines, environment consistency, and diff review. |
| Hosted visual service | Runs comparison in a managed service, often with a dashboard and pull-request integration. | Less infrastructure to maintain and potentially broader browser coverage, in exchange for a paid subscription and service-specific workflow. |
Cypress names Applitools Eyes, Argos, and Chromatic among services with Cypress integrations. Treat those names as options to evaluate rather than endorsements; check current pricing, Cypress-version support, browser coverage, retention, and review controls directly with each vendor.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Screenshot settings that affect comparison
cy.screenshot() exposes settings for failure capture, blackout selectors, overwrite behavior, and before/after callbacks. Cypress automatically captures screenshots on test failure during cypress run by default; that automatic failure behavior does not occur in cypress open. Failure screenshots are diagnostic artifacts, not approved visual baselines.
Keep intentional visual checkpoints separate from failure captures. Give snapshots stable names, avoid overwrite in a baseline workflow unless you explicitly need it, and preserve diff artifacts from CI so a reviewer can see the changed region.
Troubleshooting visual diffs
- Every pixel differs: check that the test reached the same route, fixture, viewport, browser, fonts, and device scale. A missing web font can change line wrapping across the whole image.
- Only dates or numbers differ: freeze the clock and stub the response that supplies the value.
- The screenshot shows a spinner: wait for the relevant request and assert that the final content is visible before capture.
- Images are missing: wait for the image or its layout container, ensure the test environment can load the asset, and account for lazy loading during full-page scrolling.
- A sticky header repeats in a full-page image: use an element or viewport snapshot, or configure the comparator’s masking behavior for that specific fixed element.
- Diffs occur only in CI: pin the browser and container image, install identical fonts, and compare at the same viewport and scale. Do not solve an environment mismatch by raising a global threshold.
- A plugin command is undefined: confirm the support-file import, the Node event registration, and the package version expected by your Cypress version.
- Baselines keep being replaced: remove automatic overwrite behavior and require a reviewed baseline-update change.
- A hosted run cannot reproduce locally: compare its browser, viewport, fonts, timezone, locale, and data-seeding model with your local setup.
Performance, reliability, and cost decisions
Each visual checkpoint adds browser work, image storage, and review effort. Element snapshots are usually smaller and easier to diagnose than full-page images. Run a focused visual suite on pull requests and broader browser or viewport coverage on a scheduled or release workflow when the suite becomes expensive.
Local plugins have no vendor subscription in the usual model, but CI minutes, artifact storage, and engineering time remain costs. Hosted services charge according to their own plans and may reduce the maintenance burden. Confirm current vendor pricing rather than relying on an old article.
Reliability comes from controlling inputs, not from making the comparator permissive. A narrow mask for a known live region is preferable to a large threshold that can hide a genuine shift. Keep a human in the approval loop: a diff identifies pixels that changed; it does not decide whether the change is correct.
Or skip the browser setup
If you need a clean capture for a visual pipeline, documentation page, or fixture and do not want to maintain browser automation, ScreenshotNeo provides a one-request screenshot API and an MCP server for AI agents. It accepts consent banners like a visitor, removes more than 60 known consent platforms plus newsletter popups and chat widgets before capture, and reports whether a response was clean or failed. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed.
Use the API directly (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.webpimport 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}`);
ScreenshotNeo supports PNG, JPEG, WebP, and PDF output, along with full-page and element captures, custom CSS and JavaScript, waits, request blocking, cookies, headers, viewport and device settings, and signed links. Its MCP tools—take_screenshot, get_page_info, and capture_pdf—let Claude, Cursor, or another MCP client request captures. You can then feed the resulting image into the same baseline comparison process described above.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Create a free ScreenshotNeo account to start.
Frequently Asked Questions
Should a Cypress visual test fail on any changed pixel?
Not automatically. Review the diff first; intentional design changes should update a baseline, while rendering noise should be fixed by stabilizing the environment or masking a narrowly defined live region.
Where does Cypress store screenshots?
The default screenshots directory is cypress/screenshots. You can change Cypress’s configuration, but keep baseline and diff locations consistent across local and CI runs.
Are Cypress failure screenshots visual regression baselines?
No. Automatic failure captures during cypress run are diagnostic evidence. A visual regression baseline is an explicitly reviewed image used for later comparisons.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Quick 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.
