Clock & Time-Travel

Control virtual browser time — expire a countdown and grow a relative-time label with page.clock instead of waiting real seconds

What you will learn

Use Playwright's page.clock API (install / setFixedTime / fastForward) to make time-dependent UI deterministic instead of flaky
Assert time-driven state through stable data-attributes (data-expired, data-state) rather than brittle visible-text timing
Pin a server-side clock via a request header (X-Mock-Now) so SSR/API time is controllable in tests

Clock & Time-Travel — Control Virtual Time

A live countdown, a relative-time label and a trial banner all read the browser clock — pin or fast-forward virtual time instead of waiting real seconds

Every widget below depends on the current time. A naive test would sleep(60) to watch the countdown expire — slow and flaky. Instead, install a virtual clock and travel through time deterministically.

The server clock is exposed separately at GET /api/lab/now and can be pinned with the X-Mock-Now header.

Live Clocks

Countdown, relative time, trial expiry and server time

Countdown

—

Relative time

—

Trial active

Your trial is running while the countdown ticks.

Server now

loading…

Testing Tips

Automation hints

✓ Call page.clock.install({ time }) before navigating so #countdown and #relative-time read your virtual clock instead of the real one
✓ Use page.clock.fastForward("01:00") to expire #countdown instantly, then assert #countdown[data-expired="true"] and #trial-banner[data-state="expired"]
✓ Assert #relative-time contains the word ago — fast-forward the clock to watch the elapsed value grow deterministically
✓ Pin the server clock by sending the X-Mock-Now header to /api/lab/now and assert the echoed value appears in #server-now
✓ Never waitForTimeout(60000) for real wall-clock seconds — control virtual time with page.clock for fast, stable runs

Related Challenges

Clock & Time-Travel — Control Virtual Time

A live countdown, a relative-time label and a trial banner all read the browser clock — pin or fast-forward virtual time instead of waiting real seconds

The server clock is exposed separately at GET /api/lab/now and can be pinned with the X-Mock-Now header.

Testing Tips

Automation hints

✓ Call page.clock.install({ time }) before navigating so #countdown and #relative-time read your virtual clock instead of the real one
✓ Use page.clock.fastForward("01:00") to expire #countdown instantly, then assert #countdown[data-expired="true"] and #trial-banner[data-state="expired"]
✓ Assert #relative-time contains the word ago — fast-forward the clock to watch the elapsed value grow deterministically
✓ Pin the server clock by sending the X-Mock-Now header to /api/lab/now and assert the echoed value appears in #server-now
✓ Never waitForTimeout(60000) for real wall-clock seconds — control virtual time with page.clock for fast, stable runs

Clock & Time-Travel

What you will learn

Clock & Time-Travel — Control Virtual Time

Live Clocks

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop

Clock & Time-Travel

What you will learn

Clock & Time-Travel — Control Virtual Time

Live Clocks

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop