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 minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallA screenshot comparison fails when the new image is rendered under a different visual contract from the approved baseline. Check the exact image dimensions first, then lock the viewport, browser project, operating system, fonts, device scale, capture scope, test data, and page readiness. Only after those match should you change a pixel-difference threshold or approve a new baseline.
What a screenshot comparison is actually checking
A visual regression test captures the application and compares that image with an approved reference. The comparison fails when the measured difference exceeds the configured threshold. A different width or height is an obvious cause, but it is not the only one: responsive breakpoints, font metrics, browser rendering, animation timing, asynchronous data, and capture mode can all change pixels while the CSS appears unchanged.
Use the failure as evidence that the rendering contract changed. Do not immediately increase maxDiffPixels, a percentage threshold, or a service tolerance; that can conceal a genuine breakpoint or layout regression.
1. Confirm that the images really have different dimensions
Record the baseline PNG’s width and height and the failing PNG’s width and height. A dimension mismatch usually points to configuration rather than application CSS.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
- Check the test’s explicit viewport width and height.
- Check whether a device preset, orientation, or browser project replaced those values.
- Check device scale factor, retina settings, and any image-resizing step. A CSS viewport can be identical while the bitmap has twice as many pixels.
- Check whether one capture is viewport-only and the other is full-page, clipped, or a runner screenshot.
Keep the dimension check in CI output. It turns a vague visual diff into a specific configuration failure and prevents investigating colors or typography before the image geometry is correct.
2. Lock the viewport in Cypress
Cypress documents a default viewport of 1000px × 660px and resets the viewport between tests unless you configure it. A test that passes locally can therefore fail in CI if one environment relies on a default or a previously selected device.
Set the size in the test
cy.viewport(1440, 900)
cy.visit('/dashboard')
cy.get('[data-testid="dashboard-ready"]').should('be.visible')
cy.screenshot('dashboard-desktop')Set a project-wide default
// cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
viewportWidth: 1440,
viewportHeight: 900
}
})Use a named viewport for every intended responsive state. Cypress’s documented iPhone 6 preset is 414px × 736px; its landscape equivalent is 736px × 414px. Do not mix a portrait baseline with a landscape test merely because the same device name appears in two projects.
Keep viewport and capture mode together
cy.viewport(1440, 900)
cy.visit('/pricing')
cy.get('[data-testid="pricing-loaded"]').should('be.visible')
cy.screenshot('pricing-viewport', {
capture: 'viewport',
disableTimersAndAnimations: true
})If the approved image was created with capture: 'fullPage', use that consistently. A full-page screenshot scrolls and stitches the document; fixed or sticky elements can appear repeatedly. A clip rectangle must use the same pixel coordinates and viewport as the baseline.
Free tools Windows power users keep installed
One-click scans. No signup required.
3. Keep Playwright projects and baselines aligned
Playwright’s expect(page).toHaveScreenshot() creates a reference image on the first run and compares later runs with it. The reference belongs to the browser project and rendering environment that produced it.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
import { test, expect } from '@playwright/test';
test('dashboard at the desktop contract', async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('/dashboard');
await expect(page.getByTestId('dashboard-ready')).toBeVisible();
await expect(page).toHaveScreenshot('dashboard-desktop.png', {
animations: 'disabled',
fullPage: false
});
});Keep the same browser project when generating and comparing the baseline. If Chrome, Firefox, and WebKit are intentional targets, give each project its own snapshots. Playwright warns that browser rendering can vary with the host OS, browser version, settings, hardware, power source, headless mode, and other factors. Fonts are especially important: a fallback font changes glyph widths, line breaks, and therefore the whole layout.
Pin the execution contract
- Use the same Playwright browser versions in local development and CI.
- Run the same container or CI image, OS family, installed fonts, and locale.
- Keep headless/headed mode consistent when your workflow depends on it.
- Keep device scale factor, color scheme, reduced-motion setting, timezone, and locale stable.
- Do not regenerate all snapshots after a browser upgrade without reviewing the visual change.
4. Stabilize the page before capturing
An image taken during a render, animation, font swap, or data request is not a reliable baseline. Assert that the page is ready before the screenshot and make time-dependent content deterministic.
Wait for meaningful application state
await page.goto('/reports');
await expect(page.getByTestId('report-table')).toBeVisible();
await expect(page.getByText('Last 30 days')).toBeVisible();
await expect(page).toHaveScreenshot('reports.png');Prefer an application readiness marker over an arbitrary sleep. If a chart, image, or web font loads after the marker, wait for that specific element or resource as well. Freeze clocks and use fixed fixtures for dates, random IDs, prices, feature flags, and API responses. A changed test record can move text or add rows even when the viewport is perfect.
Control motion and lazy content
- Disable CSS transitions and animations for visual tests, or wait until they finish.
- Scroll deliberately when testing lazy-loaded images; otherwise one run may capture placeholders.
- Wait for network activity that matters to the page, but avoid an unbounded “network idle” wait on applications with analytics or polling.
- Use the same reduced-motion and prefers-color-scheme settings in every run.
5. Match capture scope and pixel geometry
| Scope | Use it when | Failure to avoid |
|---|---|---|
| Viewport | You are validating what fits in the visible browser area. | Comparing it with a full-page baseline. |
| Full page | You need the complete document, including content below the fold. | Sticky or fixed elements repeating during stitching. |
| Element or clip | You need a component or fixed rectangle. | Changing selector bounds, scroll position, or clip pixels. |
| Runner/UI capture | You intentionally test the test runner framing. | Comparing runner chrome with an application-only image. |
In Cypress, select capture: 'viewport' or capture: 'fullPage' deliberately and keep clipping consistent. In Playwright, keep page and locator screenshot options aligned between baseline and comparison. A one-pixel change in a clip origin is a real dimension mismatch, not noise.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
6. Recreate the canonical CI environment
Generate and compare references in the same Docker or CI image whenever possible. Pin the browser, operating-system family, fonts, and test dependencies. A laptop display’s physical resolution is not the same thing as the browser viewport; CI can use a different virtual display without changing your test code.
Useful environment checks
- Log
window.innerWidth,window.innerHeight,devicePixelRatio, user agent, and the selected test project. - Log the browser version and operating-system image identifier.
- Verify that required web fonts are installed or loaded from the same source.
- Verify locale, timezone, color scheme, and feature flags.
- Save the failing image and a diagnostic screenshot showing the viewport dimensions when triaging CI-only failures.
Playwright commonly separates snapshots by browser or project because fonts and rendering differ. Cypress recommends an explicit, consistent viewport and the same environment for baseline and comparison. Treat those recommendations as one rule: a baseline is valid only for the contract that produced it.
7. Decide whether to restore the test or approve a new baseline
Restore the configuration when the change is accidental
- The viewport changed because a default was removed.
- A CI job started using a different browser project or device orientation.
- A dependency or browser update was applied unintentionally.
- The test captured before data, fonts, or animations settled.
Create a new named baseline when the change is intentional
For an intentional responsive redesign, add a clearly named viewport/project such as dashboard-desktop-1440 or dashboard-mobile-414. Review the diff at the new contract, document why it changed, and approve only the images that match the product decision. Do not overwrite every baseline to make a failing build green.
Common failures and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| PNG width or height differs | Viewport, orientation, scale factor, or capture mode changed. | Log dimensions; set explicit width/height and use the same scope. |
| Only CI fails | Different OS, browser, fonts, headless mode, or dependency versions. | Use the same image and pinned browser; install identical fonts. |
| Text wraps differently | Fallback font, locale, data length, or subpixel rendering. | Wait for fonts, fix locale/data, and compare in one canonical environment. |
| Header or cookie banner appears intermittently | Consent state, network timing, or test isolation differs. | Seed consent and fixtures; wait for the intended state before capture. |
| Full-page image has repeated navigation | Sticky/fixed elements were stitched while scrolling. | Use viewport capture, hide the fixed element for this test, or accept the documented full-page behavior. |
| Large diff after a browser upgrade | Rendering engine or font rasterization changed. | Review the upgrade deliberately and regenerate only the affected project baselines. |
| Raising the diff threshold “fixes” the build | A real layout change is being masked. | Return to the visual contract and correct the first mismatch. |
Performance, reliability, and cost considerations
Keep visual suites fast by testing a small set of representative breakpoints rather than every pixel width. Reuse authenticated state where safe, stub unstable APIs, and capture only the page or component under test. Full-page stitching, large retina images, and multiple browser projects increase storage and comparison time. Conversely, over-aggressive stubbing can hide layout states; retain at least one test with realistic loading and error conditions.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Run a failure once more in the identical environment before approving it. If the second image differs from the first, the test is nondeterministic; fix timing, data, fonts, or environment before changing thresholds. Keep baseline files versioned with the code and require review for baseline updates.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a clean capture outside a visual-test runner, ScreenshotNeo provides a website screenshot API and MCP server. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
One-call cURL capture
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for authentication, response headers, and the full option set.
Recommended Free Tools
Python
import 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)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);For deterministic captures, set the viewport or one of 12 device presets, retina scale, dark mode, timezone, geolocation, custom headers, cookies, user agent, or Authorization. You can capture a CSS-selected element, wait for a selector, delay, or network idle, click before capture, hide selectors, block ads, trackers, requests, or resource types, load lazy images for full-page shots, inject CSS or JavaScript, resize the output, choose PNG/JPEG/WebP, create PDFs with paper size, margins, orientation, and page ranges, cache with a chosen TTL, use signed links, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per call, and query usage. An OpenAPI specification is available, and parameter names used by other screenshot APIs also work.
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, and yearly billing gives two months free. Sign up for the free ScreenshotNeo plan to make your first captures.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
FAQ
Why do screenshots have different sizes when CSS did not change?
The browser viewport, device scale factor, orientation, project, or capture scope changed. Compare the actual bitmap dimensions and runtime viewport values before inspecting CSS.
Should I keep one baseline for every browser?
Use separate snapshots when browser engines, operating systems, or fonts produce intentional rendering differences. A single cross-browser image can turn legitimate engine differences into noisy failures.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →When is a new baseline safe?
Approve one only after confirming the viewport and environment change is intentional, the page is settled, and the diff matches the product decision rather than a timing or configuration error.
Frequently Asked Questions
Why do screenshots have different sizes when CSS did not change?
The browser viewport, device scale factor, orientation, project, or capture scope changed. Compare the actual bitmap dimensions and runtime viewport values before inspecting CSS.
Should I keep one baseline for every browser?
Use separate snapshots when browser engines, operating systems, or fonts produce intentional rendering differences. A single cross-browser image can turn legitimate engine differences into noisy failures.
When is a new baseline safe?
Approve one only after confirming the viewport and environment change is intentional, the page is settled, and the diff matches the product decision rather than a timing or configuration error.
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 errorsQuick 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.
