What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Cypress can take screenshots of a Next.js app, but taking a screenshot is not visual regression testing by itself. You also need a tool that compares each capture with an approved baseline and lets your team review and accept intentional changes. This guide shows how to set up Cypress, choose E2E or component coverage, make captures repeatable, and run visual checks in CI.
Does Cypress compare screenshots by itself?
No. Cypress’s built-in cy.screenshot() captures an image; it does not compare that image with a baseline. Cypress states, “Cypress does not perform image comparison itself.” Add a visual-testing integration that compares the current capture with an approved reference and provides a workflow to review and update that reference. See Cypress’s visual testing documentation and its screenshots and videos guide.
As an Amazon Associate I earn from qualifying purchases.
The practical workflow is: make the app render a known state, capture it, compare it with a reviewed baseline, and investigate any difference before accepting it. A changed screenshot is a signal to inspect, not proof that the change is a defect.
Set up Cypress in your Next.js project
The current Next.js Cypress guide, last updated February 27, 2026, documents both a with-cypress starter and manual installation. For an existing project, install Cypress as a development dependency with your package manager. For pnpm:
pnpm add -D cypressThen launch Cypress once and choose E2E Testing, Component Testing, or both in the setup flow. Cypress creates the corresponding configuration and support files. The Next.js guide shows scripts for development, building, starting the app, and opening Cypress; adapt them to the scripts and package manager already used by your project. Cypress’s browser runner is opened with:
pnpm exec cypress openUse the E2E path when Cypress must visit the running application. Component Testing mounts supported individual components and does not require a Next.js server.
Should you use E2E or component tests?
| Test level | Good fit for visual checks | Important limits |
|---|---|---|
| E2E | Routes, navigation, server-rendered pages, and complete user flows where the appearance depends on the running app. | Requires a running application. Next.js recommends a production build and server for behavior closer to production. |
| Component Testing | A supported individual component rendered with controlled props and a smaller, easier-to-own visual diff. | Next.js says Cypress Component Testing does not support async Server Components and recommends E2E for them. Server-dependent features such as next/image may not work out of the box in component tests. |
Use E2E for page-level states and flows; use component tests where isolation makes the result more useful to review. You do not need a visual assertion in every functional test. Start with the screens and components whose appearance matters most, then add coverage where a visual diff has a clear owner.
Choose a baseline and comparison workflow
After Cypress is set up, select an integration that performs image comparison. Cypress’s visual-testing documentation names commercial integrations including Applitools Eyes, Argos, Chromatic, Happo, LambdaTest SmartUI, Percy, Sauce Labs Visual, SmartBear VisualTest, and Wopee.io. That list is a starting point, not an endorsement or a guarantee of current features. Check the selected provider’s current documentation for installation, compatibility, pricing, data handling, masking, baseline approval, and CI behavior before adding its commands or code.
| Workflow | Where the work happens | Trade-off |
|---|---|---|
| Open-source local comparison plugin | Captures and comparisons run in your local or CI environment; baselines and review artifacts are managed by your team. | You control baseline storage and review, but must maintain rendering consistency, baseline updates, and useful CI artifacts. |
| Hosted visual-testing service | A service manages some or all capture, comparison, baseline approval, and review. | May suit teams that need a review interface or managed rendering; verify the exact browsers, viewports, integrations, and terms offered by the chosen service. |
Pick based on where you want images stored, how your team will review changes, which browsers and viewport widths matter, and how you will keep rendering environments consistent. Pixel sensitivity and masking also affect false positives. Do not install a plugin based on an old command snippet: use that integration’s official, current setup instructions.
Stabilize the page before capturing
A useful comparison requires both runs to show the intended state, not a transient render. Drive the page into that state, assert that it is ready, and only then invoke the capture-and-compare command supplied by your integration. The exact visual assertion command varies by plugin, so the example below shows the Cypress setup and deterministic state preparation rather than pretending a particular vendor’s matcher is universal.
describe('checkout page visual state', () => {
beforeEach(() => {
cy.clock(new Date('2026-01-15T12:00:00Z'));
cy.intercept('GET', '/api/cart', { fixture: 'cart.json' }).as('cart');
});
it('renders the populated cart', () => {
cy.visit('/checkout');
cy.wait('@cart');
cy.get('[data-testid="checkout-summary"]').should('be.visible');
// Add the screenshot-comparison command documented by your chosen integration here.
});
});- Wait for meaningful readiness. Assert that the relevant data and UI have appeared before capturing; avoid arbitrary delays when a selector or network response can express readiness.
- Control changing data. Use fixtures and network interception for responses that otherwise vary between runs.
- Freeze time when needed. Date-sensitive banners, countdowns, and relative timestamps can drift; control the browser clock for those tests.
- Stop motion deliberately. Disable CSS animations and transitions in the test environment or wait for the relevant animation to finish. Cypress’s
waitForAnimationsandanimationDistanceThresholdsettings apply to action commands; they do not guarantee that an unrelated animation has stopped before a screenshot.
Make the rendering environment repeatable
Choose an explicit viewport and create and compare baselines in the same environment. Browser version, operating system, display scaling, and installed fonts can all change rendered pixels. For CI, use a pinned container or otherwise keep the browser and operating system stable between baseline generation and test runs.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →If a small region is inherently unpredictable—for example, a third-party widget or ad—mask only that region when your integration supports it. Prefer a narrow mask over a broad whole-page threshold, which can hide meaningful changes along with noise.
Keep visual coverage focused and review diffs
- Cover high-value routes, shared components, and user-visible states rather than adding snapshots to every test.
- Prefer element-level comparisons when they give a component or team a clear owner and make diffs easier to inspect.
- Use full-page captures for layout-level questions that require seeing the relationship between page regions.
- When a difference is intentional, inspect it and approve the updated baseline through the selected integration’s review process. Do not update baselines automatically just to make a failing build green.
Run Cypress visual checks in CI
cypress run executes Cypress headlessly. For E2E tests, start Next.js first. Next.js documents a start-server-and-test pattern; its guide shows a development-server example like this:
start-server-and-test dev http://localhost:3000 "cypress run --e2e"For closer-to-production behavior, the recommended path is to build and start the production app, then run Cypress against it. A typical script arrangement is:
{
"scripts": {
"build": "next build",
"start": "next start",
"test:e2e": "start-server-and-test start http://localhost:3000 "cypress run --e2e""
}
}Use the package manager and script arrangement appropriate to your project, and install start-server-and-test if you choose this pattern. The development-server approach is quicker to arrange; the production build better approximates the code you intend to ship. For a local comparison plugin, make sure CI uploads screenshots and diffs as artifacts and uses the same rendering environment as the approved baselines. Follow your hosted integration’s instructions if it runs or stores comparisons differently.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Troubleshoot common visual-test failures
| Symptom | Likely cause | What to do |
|---|---|---|
| The screenshot changes on every run. | Uncontrolled API data, timestamps, animation, third-party content, or different browser/OS/font environments. | Use fixtures or interception, freeze time where relevant, stop motion, narrowly mask unavoidable regions, and align the baseline and CI environment. |
| The capture shows a loading or partial state. | The test captured before the data or target UI finished rendering. | Wait for the relevant response and assert the target element is visible before invoking the visual comparison. |
| Component tests fail around async server rendering. | Async Server Components are not supported by Cypress Component Testing according to the current Next.js guide. | Exercise that behavior through E2E against the running Next.js app. |
| A component test cannot render an image or another server-dependent feature. | The component relies on Next.js server behavior unavailable in the isolated test setup. | Check whether the feature can be appropriately isolated for the component test; otherwise cover the rendered page with E2E. |
| Local runs pass but CI has broad diffs. | CI may use another browser, OS, display scale, or font set, or may not have produced baselines in the same environment. | Pin and align the rendering environment and ensure CI preserves local-plugin screenshots and diffs as artifacts. |
| A diff appears even though Cypress waits for animations. | Cypress action-command animation settings do not stop every animation during screenshot capture. | Disable CSS motion in the test environment or explicitly wait for the relevant animation to complete. |
| A new visual command or install instruction does not work. | The comparison integration’s API or compatibility may have changed. | Use the provider’s current official setup instructions and check its compatibility with the installed Cypress and Next.js versions. |
Or skip the browser setup
For a standalone screenshot rather than a Cypress baseline comparison, ScreenshotNeo can return an image or PDF from one GET request. It is a screenshot API and MCP server, not a replacement for the baseline review workflow described above. Its options include full-page captures with lazy images loaded, selector-based element capture, viewport and device presets, custom CSS and JavaScript, and wait conditions. 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.webpCookie banners and consent overlays, newsletter popups, and chat widgets are removed before the shot; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server lets AI agents use screenshot, page-info, and PDF-capture tools. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month—no card required.
Frequently Asked Questions
Can I use Cypress screenshots as the visual baseline without a plugin?
Cypress can save screenshots, but it does not compare them with an approved baseline. A comparison integration is needed for visual regression checks.
Free tools Windows power users keep installed
One-click scans. No signup required.
Does a visual diff prove that the page is broken?
No. A diff identifies a rendered change. Review it to decide whether it is a regression or an intentional update before changing the baseline.
Quick 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.
