Use Playwright’s mask option to cover a changing element, or use stylePath to hide or normalize it with capture-only CSS. Disable animations when motion causes inconsistent frames, and run visual tests in the same rendering environment as the baseline.
Choose the right way to handle changing content
First decide what the screenshot is meant to verify. If a timestamp’s text is irrelevant but you want the rest of the page checked, mask that element. If it should not appear in the image at all—or you need to normalize its appearance—apply CSS during capture. If the instability comes from motion, disable animations as well.
As an Amazon Associate I earn from qualifying purchases.
| Method | What appears in the screenshot | Use it when |
|---|---|---|
mask |
A solid overlay covers the matched element’s bounding box. | You want to ignore a known region and an overlay is acceptable. |
stylePath |
Capture-only CSS hides or alters the matched content. | The content should disappear or be visually normalized. |
animations: 'disabled' |
Playwright captures without ongoing animation effects. | Motion or transitions create varying frames. |
These options address different sources of variation. A stable screenshot may require more than one of them.
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 →Mask a volatile element with a locator
For a changing timestamp, avatar, or other region that should not affect the visual comparison, pass a specific locator in the screenshot assertion’s mask array:
#1 Best Overall
await expect(page).toHaveScreenshot('dashboard.png', {
mask: [page.getByTestId('live-timestamp')],
});Playwright covers the matched element’s bounding box. The default mask color is pink (#FF00FF); set maskColor if a different CSS color is more suitable. Masking also applies to matched elements that are invisible.
Use a stable locator, and keep the mask as narrow as possible. A broad mask can conceal a genuine layout or rendering regression in the region it covers.
Hide or normalize content with capture-only CSS
Use stylePath with toHaveScreenshot when an overlay is not wanted. It accepts a stylesheet path or an array of paths. For example, this stylesheet hides the timestamp while retaining its layout box:
Recommended Free Tools
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
[data-testid="live-timestamp"] {
visibility: hidden !important;
}Then apply it to the screenshot assertion:
await expect(page).toHaveScreenshot('dashboard.png', {
stylePath: './screenshot.css',
});You can instead use CSS to normalize a volatile appearance or value. Review the captured result: hiding or changing an element can obscure behavior that the test is supposed to verify, and the effect on layout depends on the page’s CSS.
Choose the option for the API you are using. Screenshot assertions use stylePath. Locator screenshot capture documents the corresponding style option, which accepts stylesheet text; do not substitute one option name for the other.
Disable animations when motion is the source
Screenshot assertions default animations to "disabled". You can make the intent explicit:
Rank #3
await expect(page).toHaveScreenshot('dashboard.png', {
animations: 'disabled',
});With this setting, finite animations are fast-forwarded to completion and fire transitionend. Infinite animations are canceled at their initial state for the capture and played over afterward.
Free tools Windows power users keep installed
One-click scans. No signup required.
Standalone locator screenshot capture documents a different default: "allow". If you use that API and motion matters, set the option explicitly. Disabling animations does not stabilize unrelated live text or imagery; mask or style those regions separately.
Keep the baseline and test environment consistent
Masking and CSS do not eliminate differences caused by the rendering environment. Playwright’s visual comparison guidance notes that output may vary with the host operating system, browser version, browser settings, hardware, power source, and headless mode. Generate baselines and compare them in the same environment whenever possible, including the browser and relevant settings.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Screenshot assertions capture repeatedly until two consecutive screenshots match, then compare or save the result. That helps with instability during capture, but it cannot remove differences between machines or determine which changing content is safe to ignore. Keep the assertion focused on meaningful, stable regions and inspect diffs after adding masks or CSS.
Implementation sequence
- Identify the changing region. Decide whether the test should ignore it entirely or preserve its layout while hiding its contents.
- Choose a treatment. Use a locator mask if a colored box is acceptable; use
stylePathin a screenshot assertion to hide or normalize content. - Address motion separately. Disable animations if they cause variation, especially when using locator capture, whose documented default allows animations.
- Match the baseline environment. Keep the browser, host environment, headless mode, and relevant settings consistent between baseline generation and comparisons.
- Review the diff. Confirm that the mask or CSS has not hidden a meaningful regression or behavior under test.
Troubleshooting
The screenshot still changes after masking
Check whether the locator matches the entire volatile region and whether another changing element remains outside the mask. Use a specific locator, then inspect the diff to identify the uncovered area rather than expanding the mask indiscriminately.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows 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 reinstallThe hidden element leaves an unexpected gap
visibility: hidden hides the content but preserves its layout box. If the intended screenshot should not reserve that space, adjust the capture-only CSS to alter layout, then verify that this does not conceal a layout change the test needs to catch.
An animation appears in a locator screenshot
Locator screenshot capture defaults to animations: 'allow'. Set animations: 'disabled' when you need the capture to avoid motion effects.
Screenshots differ across machines or CI runs
Compare the rendering environments: operating system, browser version, settings, hardware, power source, and headless mode can affect output. Run baseline creation and comparisons in the same environment where possible.
The screenshot assertion keeps waiting for a stable image
Assertions recapture until two consecutive screenshots match. If the page continues changing, identify whether the cause is live content, animation, or another unstable region, then apply the narrowest suitable mask or capture stylesheet and disable motion where needed.
Or skip the browser setup
If you need a screenshot returned from an API rather than a Playwright visual assertion, ScreenshotNeo takes a screenshot from one GET request. This is a different workflow: it does not replace Playwright’s baseline comparison or its mask and CSS assertion options.
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 API documentation for request options. Before capture it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; 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 provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. 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.
