Loading challenge...
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
—
Server now
loading…
Testing Tips
Automation hints
- ✓ Call
page.clock.install({ time })before navigating so#countdownand#relative-timeread your virtual clock instead of the real one - ✓ Use
page.clock.fastForward("01:00")to expire#countdowninstantly, then assert#countdown[data-expired="true"]and#trial-banner[data-state="expired"] - ✓ Assert
#relative-timecontains the wordago— fast-forward the clock to watch the elapsed value grow deterministically - ✓ Pin the server clock by sending the
X-Mock-Nowheader to/api/lab/nowand assert the echoed value appears in#server-now - ✓ Never
waitForTimeout(60000)for real wall-clock seconds — control virtual time withpage.clockfor fast, stable runs
