Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsFor a one-off Playwright screenshot, pass animations: 'disabled' to page.screenshot():
await page.screenshot({ animations: 'disabled' });This handles CSS animations, CSS transitions, and Web Animations during capture. Direct screenshots otherwise allow animations to run. For visual regression assertions, toHaveScreenshot() already disables animations by default.
Disable animations in a direct screenshot
Set the screenshot option explicitly wherever you capture a page image:
await page.screenshot({ path: 'page.png', animations: 'disabled' });The option is available on Playwright’s page.screenshot() API. It covers CSS animations, CSS transitions, and Web Animations. Consult the Playwright Page API for the installed release’s current options.
#1 Best Overall
What “disabled” does to animation state
It does not freeze every animation at the exact frame visible when the call begins. Playwright fast-forwards finite animations to completion, which fires transitionend. Infinite animations are canceled at their initial state for the screenshot, then played over after capture. If application code responds to transitionend, that event may affect the state captured; inspect the result when the page relies on such handlers.
Use screenshot assertions for visual regression tests
With Playwright Test, capture and compare an expectation using:
import { test, expect } from '@playwright/test';
test('page matches its screenshot', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot();
});toHaveScreenshot() waits until two consecutive page screenshots produce the same result before comparing against the expectation. Its animations option defaults to disabled, unlike direct page.screenshot(), whose default is allow. See the official PageAssertions API.
Choose the right way to reduce motion
| Approach | Use it for | What it does | Important limitation |
|---|---|---|---|
page.screenshot({ animations: 'disabled' }) |
A direct screenshot | Screenshot-time handling of CSS animations, CSS transitions, and Web Animations. | Finite animations are fast-forwarded and emit transitionend; infinite ones return to their initial state for capture. |
page.emulateMedia({ reducedMotion: 'reduce' }) |
Testing the site’s response to a user’s reduced-motion preference | Emulates the prefers-reduced-motion media feature. |
It does not guarantee that a page suppresses every animation; that depends on the site’s CSS and application behavior. |
page.screenshot({ style: '...' }) |
A targeted capture-only visual override | Applies a stylesheet for the screenshot, including through Shadow DOM and inner frames. | Your CSS may change layout or visibility. The Page API lists this option as added in v1.41; check compatibility with your installed Playwright version. |
Emulate reduced motion when that preference is what you are testing
await page.emulateMedia({ reducedMotion: 'reduce' });
await page.screenshot({ path: 'reduced-motion.png' });Playwright documents reduce and no-preference; passing null clears the emulation. This changes the emulated media preference, not the screenshot option. Use it to test how the page responds to prefers-reduced-motion, rather than as a universal replacement for screenshot-time animation handling. See Playwright’s emulateMedia API.
Use a screenshot stylesheet for specific dynamic elements
For a page element that needs a custom treatment, apply a capture-time CSS override:
await page.screenshot({
path: 'page.png',
style: '.ticker, .animated-banner { visibility: hidden !important; }'
});The screenshot style option is useful for targeted changes such as hiding a ticker. It is not the same as disabling all animations: write rules that fit the page, and check that they do not hide content or alter the layout you intend to test.
Runnable example with Playwright Test
For a standalone direct screenshot in a Node.js project using Playwright:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
try {
await page.goto('https://example.com');
await page.screenshot({ path: 'page.png', animations: 'disabled' });
} finally {
await browser.close();
}Use the playwright package for the standalone browser example. If your project uses Playwright Test, use its @playwright/test runner and toHaveScreenshot() for screenshot assertions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Troubleshoot inconsistent screenshots
- Animations still appear in a direct capture: Confirm the option is on the actual
page.screenshot()call. The direct API defaults to allowing animations. - A screenshot assertion behaves differently from a manual capture:
toHaveScreenshot()has its own stabilization behavior and defaults to disabled animations. Use the direct screenshot option if you are callingpage.screenshot(). - The page changes after an animation ends: Finite animations are fast-forwarded and fire
transitionend. Check whether event listeners update content or application state before capture. - Reduced-motion emulation has no visible effect: The page must implement a response to
prefers-reduced-motion. Emulation changes the preference; it does not impose a universal animation rule. - A CSS override produces a different layout: Inspect the injected rules and remove or narrow selectors that affect geometry or visibility. Screenshot styles can affect Shadow DOM and inner frames as well.
- An option is rejected by the installed version: Check the official API documentation against your project’s Playwright release. In particular, the screenshot
styleoption is documented as added in v1.41.
Or skip the browser setup
If you need a screenshot without running and maintaining a browser in your own script, ScreenshotNeo is a website screenshot API and MCP server. A single GET request can return an image or PDF. This is an alternative capture service, not a way to configure Playwright itself or test a site’s reduced-motion behavior.
Example using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request parameters. It accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server includes tools for AI agents to take screenshots. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
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.
