Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For Playwright Test visual assertions, add animations: 'disabled' to toHaveScreenshot(). This stops CSS animations, CSS transitions, and Web Animations during capture, preventing screenshots from catching those effects at inconsistent points.

Disable animations in the screenshot assertion

Use Playwright Test’s screenshot assertion rather than a general page screenshot call:

await expect(page).toHaveScreenshot({ animations: 'disabled' });

The option applies to toHaveScreenshot(). Playwright fast-forwards finite animations to completion. Infinite animations are canceled to their initial state for the screenshot and replayed afterward. The assertion also waits until two consecutive screenshots match before comparing the result with the expected snapshot. See the PageAssertions API documentation.

When to use screenshot-time suppression or reduced motion

For a stable static screenshot

Use animations: 'disabled' when the goal is to compare a static visual state and the animation itself is not under test. It suppresses motion during the screenshot even if the page does not respond to the reduced-motion preference.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To test the application’s reduced-motion experience

Emulate prefers-reduced-motion with reduce when you want to verify how the application responds to a user preference. Playwright also supports no-preference. This is a browser-context setting, distinct from disabling animations for a screenshot. See the Page API documentation.

When the animation is the behavior under test

Do not disable the animation if the test needs to verify it. Instead, arrange a controlled, intentional capture state so the expected screenshot represents the particular point or outcome the test is meant to check.

Neutralize only the dynamic region that remains unstable

If one widget or region keeps changing after animation suppression, use the screenshot assertion’s stylePath or style option to hide it or apply a stable appearance during capture. Playwright supports screenshot stylesheets that can reach Shadow DOM and inner frames. Scope these overrides to the screenshot so ordinary page behavior remains available to other tests. The PageAssertions documentation describes the screenshot options.

Troubleshoot remaining screenshot diffs

  1. Confirm the assertion path. Check that the failing capture uses Playwright Test’s toHaveScreenshot(); its animation option is documented for that assertion.
  2. Disable animation at capture time. Add animations: 'disabled' to the assertion and rerun the test.
  3. Check for a hover state. If the pointer is over an element with a hover effect, move the mouse away before capture when that effect should not appear.
  4. Stabilize a specific changing region. Apply a screenshot-only style override to hide or neutralize the widget rather than masking unrelated parts of the page.
  5. Match the rendering environment. Generate and compare baselines under consistent conditions. Playwright warns that rendering can vary with host operating system, version, settings, hardware, power source, headless mode, and other factors. See its Visual comparisons guide.
  6. Set comparison tolerance only after stabilizing capture. Threshold and maximum-diff options control what differences the comparison accepts; they do not fix timing or rendering instability. First stabilize the rendered state, then choose a tolerance appropriate to the project.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

For a one-call capture rather than a Playwright visual assertion, ScreenshotNeo is a website screenshot API with an MCP server for AI agents. Its API can return an image or PDF; the code below requests a WebP screenshot of the same kind of page used in this example. See the ScreenshotNeo API documentation for request options.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; 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 page verdict and billing status in headers. AI agents can use its MCP server tools, including take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.

Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.

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.