For repeatable website screenshots, set the browser’s prefers-reduced-motion preference explicitly and control animation handling at capture time. In Playwright, use reducedMotion: 'reduce' (or no-preference when that is your baseline) and keep screenshot animations disabled unless you intentionally need motion. These are separate controls: the preference tells page CSS and JavaScript what the user wants, while the screenshot option determines what happens to animations during capture.
What “reduce motion” changes
prefers-reduced-motion is a media feature that page code can read in CSS and JavaScript. It is a signal, not a guarantee. A site must implement a reduced-motion response for the rendered page to change. Some pages remove decorative movement; others shorten transitions, disable smooth scrolling, or leave essential motion intact.
Screenshot stability therefore has two independent layers:
| Control | What it affects | Use it when |
|---|---|---|
| Preference emulation | What CSS and JavaScript see through prefers-reduced-motion: reduce, no-preference, or a reset to system defaults. |
You want the page to render as it would for a user who requests less motion. |
| Capture-time animation treatment | How Playwright handles CSS animations, transitions, and Web Animations while taking the screenshot. | You need the pixels captured at a deterministic point, regardless of whether the site honors the preference. |
Use both deliberately for visual regression. A reduced-motion preference without capture-time control can still leave a JavaScript carousel, video, or canvas changing. Disabling animations without emulating the preference can produce a stable image that does not represent the reduced-motion experience.
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 →#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Set an explicit preference in Playwright Test
Apply one policy to a project
Put the setting in playwright.config.ts when every visual test in the project should use the same preference:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
reducedMotion: 'reduce',
},
});Playwright documents reduce and no-preference. Its Playwright Test documentation lists no-preference as the default. Choosing a value explicitly prevents the operating system of a CI runner from silently changing what the page sees. Use no-preference for a normal-motion baseline, or use null in APIs that support it when you intentionally want the system default.
Override a single test or project
Keep a normal-motion project and add a reduced-motion project when you need both accessibility and baseline coverage:
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'visual-reduced-motion',
use: {
...devices['Desktop Chrome'],
reducedMotion: 'reduce',
},
},
{
name: 'visual-default-motion',
use: {
...devices['Desktop Chrome'],
reducedMotion: 'no-preference',
},
},
],
});A per-test override is useful when only one scenario needs the alternate preference:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
import { test } from '@playwright/test';
test('reduced-motion rendering', async ({ page }) => {
await page.emulateMedia({ reducedMotion: 'reduce' });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await expect(page).toHaveScreenshot('reduced-motion.png', {
animations: 'disabled',
});
});Set the preference before navigation when possible, so scripts that inspect the media query during startup receive the intended value. If your framework creates a context directly, pass the equivalent reduced-motion option when creating that context, or call the documented media emulation API before loading the page.
Control animations at screenshot time
Why animations: 'disabled' is different
Playwright screenshot assertions default animations to disabled. With that mode, finite animations are fast-forwarded to completion and their transitionend event is fired. Infinite animations are canceled and captured at their initial state; Playwright resumes them after the screenshot. This is a capture operation, not a change to the page’s prefers-reduced-motion value.
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
await expect(page).toHaveScreenshot('home.png', {
animations: 'disabled',
});Choose animations: 'allow' only when the moving state itself is what you are testing. That choice is inherently harder to compare: timing, frame rate, and when the capture begins can alter the pixels.
Let the assertion reach a stable frame
Screenshot assertions wait for two consecutive captures to produce the same result before comparing the snapshot. This catches many transition-related changes, but it cannot make a clock, rotating headline, live stock ticker, random canvas, or continuously updating feed deterministic. Treat those sources separately.
Free tools Windows power users keep installed
One-click scans. No signup required.
Suppress known dynamic elements carefully
Playwright can inject screenshot styles. Hide a blinking cursor or a timestamp only when omitting it still represents the page state you intend to approve:
await expect(page).toHaveScreenshot('dashboard.png', {
animations: 'disabled',
style: `
.live-clock,
.caret,
[data-testid="rotating-banner"] {
visibility: hidden !important;
}
`,
});Prefer a test-specific selector or a stable data attribute over broad rules such as hiding every animated element. A blanket rule can conceal a broken interaction and create a misleading snapshot.
Hold viewport and scale constant
Motion is only one source of screenshot differences. Fix the viewport dimensions, device scale factor, browser, and screenshot mode in every environment. Playwright distinguishes CSS-pixel layout from device-pixel image scaling, so changing the scale can alter rasterization even when the layout is identical.
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1,
reducedMotion: 'reduce',
},
});Do not mix a one-off full-page capture with a viewport-only baseline unless that difference is intentional. Full-page images can trigger lazy loading as the page is scrolled; wait for the resulting content before comparing. Keep the same browser engine and fonts on CI agents as well, because font substitution can reflow text and move every later element.
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 reinstallRank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
A complete repeatable screenshot test
The following test combines an explicit preference, fixed dimensions, a page readiness check, disabled animations, and narrowly scoped suppression:
import { test, expect } from '@playwright/test';
test.use({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1,
reducedMotion: 'reduce',
});
test('product page is stable for a visual snapshot', async ({ page }) => {
await page.goto('https://example.com/products/widget', {
waitUntil: 'networkidle',
});
await page.locator('[data-testid="product-title"]').waitFor();
await page.evaluate(() => document.fonts.ready);
await expect(page).toHaveScreenshot('product-reduced-motion.png', {
fullPage: true,
animations: 'disabled',
style: `
[data-testid="live-clock"],
[data-testid="rotating-promo"] {
visibility: hidden !important;
}
`,
});
});networkidle is not a universal guarantee that an application is ready: analytics, polling, and open connections can prevent it or finish before the important data appears. A visible, application-specific readiness selector is usually the stronger condition. If the page loads lazy images, scroll or use the product’s documented full-page behavior, then wait until the images have completed before capturing.
Check the behavior manually in Chrome DevTools
Chrome DevTools provides a Rendering-panel control to emulate the CSS media feature prefers-reduced-motion. Open DevTools, open the command menu or the more-tools menu, choose Rendering, and set the Emulate CSS media feature prefers-reduced-motion option to reduce. Inspect the page for shortened transitions, removed parallax, disabled smooth scrolling, and any motion that remains.
This is an accessibility review, not a substitute for automation. Once you know how the page should respond, set the same preference in the Playwright context so CI captures it consistently. The W3C WAI technique for this preference describes allowing users to prevent animations; it is an example technique, not a claim that one CSS rule alone guarantees WCAG conformance.
Implement reduced motion in the site under test
CSS effects
Use a media query to replace nonessential movement with a less disruptive state:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
This broad pattern is a starting point, not a universal policy. Preserve motion that communicates an essential state change, and test focus indicators, menus, dialogs, and loading feedback after applying it. Some components need a different layout or an immediate state rather than a near-zero duration.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
JavaScript effects
JavaScript can read the same signal and choose a nonanimated code path:
const reduceMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
carousel.start({
animate: !reduceMotion,
autoplay: !reduceMotion,
});Listen for changes if your application stays open while the operating-system preference changes:
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
query.addEventListener('change', event => {
updateMotionPolicy(event.matches);
});An emulated preference supplies the signal; your CSS and JavaScript determine the pixels. A page that ignores the query can remain animated even though the test is correctly configured.
Diagnose differences that remain
The page still moves
- Confirm the context reports the intended value with
window.matchMedia('(prefers-reduced-motion: reduce)').matches. - Check whether motion comes from JavaScript, a video, a canvas, or an embedded frame rather than CSS.
- Use
animations: 'disabled'for the capture, then suppress only the specific live element if it is outside the test’s purpose.
The test times out waiting for stability
- Look for polling requests, rotating content, an animated cursor, or a continuously changing clock.
- Replace a global network-idle wait with a selector that means the page is ready.
- Freeze or mock application data at the API boundary when the test owns that data; do not hide a real regression with a giant CSS mask.
The snapshot differs only on CI
- Compare viewport, device scale factor, browser version, operating-system fonts, and color-scheme settings.
- Ensure the same reduced-motion value is configured instead of inheriting each runner’s system preference.
- Wait for fonts and images before capture. A fallback font can change line wrapping even when motion is fully disabled.
The reduced-motion snapshot looks wrong
- Verify that the site’s accessibility behavior is intentional; emulation does not design the reduced-motion experience for you.
- Check that a screenshot style has not hidden focus, validation, or status information.
- Keep separate baselines for
reduceandno-preferencewhen both user experiences matter.
Performance, reliability, and cost choices
Disabling animations usually shortens the path to a stable frame, but it does not eliminate the cost of loading the page, fonts, images, or application data. Full-page screenshots can be substantially larger than viewport captures, and waiting for a readiness selector is often more reliable than waiting an arbitrary number of milliseconds. Use a fixed delay only when the application has no observable readiness signal.
For visual regression, store the preference, viewport, scale, browser version, and dynamic-element policy alongside the snapshot. When a baseline changes, you can then tell whether the cause was an intentional design change or an environment difference. Keep the screenshot assertion’s default stability wait, and avoid allowing animations unless timing is the subject of the test.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. It accepts a URL and returns a PNG, JPEG, WebP, or PDF. Before capture, it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
For a one-call capture, see the ScreenshotNeo documentation and use:
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
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}`);You can set full-page capture, lazy-image loading, a CSS selector for one element, dark mode, any viewport or one of 12 device presets, retina scale, PDF paper and page options, custom CSS or JavaScript, a click before capture, selector waits or network-idle waits, ad and tracker blocking, resource-type blocking, headers, cookies, user agent, Authorization, timezone, geolocation, transparent backgrounds, image resizing, a chosen cache TTL, signed image links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage reporting, and an OpenAPI specification. Its parameter names also match those used by other screenshot APIs, which helps when switching.
ScreenshotNeo includes an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Every feature is on every plan: 1,000 shots per month are free with no card; paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Start with the free ScreenshotNeo plan.
Frequently Asked Questions
Should a visual test keep both motion preferences?
Yes, when your product promises both a standard experience and an accessible reduced-motion experience. Use separate projects or baselines so a change in one does not overwrite the other.
Recommended Free Tools
Can an iframe ignore my reduced-motion setting?
Yes. An embedded document may have its own implementation and timing. Treat it as an independent source of variation and coordinate a test mode with its owner when the iframe is in scope.
Is a fixed delay enough to make a screenshot deterministic?
No. A delay can miss slower data, fonts, or animations. Prefer an application-specific readiness selector plus disabled capture-time animations, then handle genuinely live elements explicitly.
The Bottom Line
Set reducedMotion: 'reduce' explicitly, disable screenshot-time animations, fix viewport and scale, and control live content separately. That combination makes screenshots both more repeatable and representative of users who request less motion.
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.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →
