Make the page’s time deterministic if the timestamp is part of the behavior you are testing; otherwise, mask or hide the changing region in the screenshot assertion. For a fixed displayed date while page timers keep running, call page.clock.setFixedTime() before navigating. If timers themselves need controlled progression, install Playwright’s clock before navigation.
Choose the fix based on what the test should verify
| Test requirement | Approach |
|---|---|
| The displayed date or time matters, but timers should continue normally | Use page.clock.setFixedTime() before page.goto(). |
| Countdowns, scheduled updates, or timeout-driven UI must run on a controlled timeline | Use page.clock.install() before navigation, then pause or advance time as needed. |
| The timestamp is incidental and should not be checked visually | Mask its locator in the screenshot assertion or hide it with screenshot-only CSS. |
| The timestamp is stable, but screenshots still differ | Inspect the screenshot diff and check whether browser and host environments match the baseline environment. |
Freeze the displayed date with setFixedTime()
For a test that needs one deliberate, stable date while ordinary timers continue running, set the clock before loading the page:
As an Amazon Associate I earn from qualifying purchases.
import { test, expect } from '@playwright/test';
test('renders a stable timestamp', async ({ page }) => {
await page.clock.setFixedTime(new Date('2024-02-02T10:00:00'));
await page.goto('http://localhost:3000');
await expect(page).toHaveScreenshot();
});Choose a date whose displayed output is intentional. The order matters: set the time before navigation so the page sees it while loading. If the application formats dates according to locale or timezone, keep those test inputs consistent too; the clock alone does not establish how a particular application configures them.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Control timer progression with install()
Use page.clock.install() when the test concerns behavior driven by timers, such as countdowns, scheduled updates, or timeouts. Install the clock before navigation. Playwright’s guide recommends initializing slightly before the intended test time so page-load timers can run normally; after loading, use the clock methods to pause or advance time as the scenario requires.
#1 Best Overall
Avoid mixing clock-related calls in the wrong order: the guide warns that calling install() after other clock-related calls can lead to undefined behavior. For a simple fixed current date with timers continuing, prefer setFixedTime(). Playwright describes setSystemTime() as an advanced option: it changes system time without triggering timers. Use it only when that distinction matches the scenario you need to test.
Exclude timestamps that are not part of the visual test
If the assertion should ignore a changing timestamp, pass its locator in toHaveScreenshot({ mask: [...] }). A mask covers the element’s bounding box, so use it only when that area is intentionally outside the visual assertion.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Alternatively, use screenshot-only CSS through stylePath to hide the timestamp or other volatile content during capture. This preserves the live page while changing what the screenshot assertion sees. Choose masking or hiding only when the timestamp itself is not behavior under test; otherwise, a stable clock is the more meaningful fix.
Diagnose a failure that remains
Check the screenshot diff before changing a baseline
toHaveScreenshot() waits for two consecutive page screenshots to match before comparing against the stored expectation. That can help with unstable captures, but it does not make an application timestamp constant. Review the actual image, expected image, and diff to see whether the time, another page element, or rendering differences caused the mismatch.
Rank #3
Playwright’s Trace Viewer can show screenshot diffs, actual and expected images, action details, and logs. Use that evidence to locate the divergence. Update snapshots with --update-snapshots only after confirming that the visual change is intended.
Keep the rendering environment consistent
Browser rendering can vary with the host operating system, browser version, settings, hardware, power source, and headless mode. Generate and compare baselines in the same environment; where needed, keep browser- or platform-specific baselines. Playwright’s Visual comparisons guidance says: “For consistent screenshots, run tests in the same environment where the baseline screenshots were generated.”
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
Check where the displayed value comes from
If the date remains unexpected after setting the browser clock, inspect the test’s ordering, the timestamp source, and the diff. A browser clock setting controls browser time APIs; it does not by itself establish how a particular application obtains or formats its displayed value. The appropriate fix depends on the application and test setup.
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 reinstallCommon failure modes and fixes
- Clock is set after navigation: set it before
page.goto(), so the page loads with the intended time. - Timers stop or behave differently than expected: use
setFixedTime()when timers should continue, and reserveinstall()for controlled timer progression. install()behaves unpredictably: install before navigation and before other clock-related calls.- Masked screenshot hides content you meant to test: mask only the timestamp’s region, and remove the mask if that visual behavior matters.
- Fresh snapshots still differ across machines: compare browser and host settings with the baseline environment, then inspect the actual/expected diff in Trace Viewer.
- A new baseline seems to fix the failure: first confirm the change is intended; updating snapshots can otherwise conceal a real regression.
Or skip the browser setup
If you need a screenshot artifact of a public page rather than a deterministic Playwright test and stored baseline, ScreenshotNeo can return an image with one GET request. It does not replace Playwright’s clock controls or visual assertions.
For example, save a page screenshot as WebP with cURL (see the ScreenshotNeo API documentation):
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners, popups, and chat widgets are removed before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, 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 for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for free and try ScreenshotNeo.
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.
