Skip to content
Latchkey

How to Fix Flaky Visual Tests by Freezing Time and Randomness

Clocks, relative dates, and random data change every run, so freeze the time and seed randomness before capturing to make snapshots deterministic.

Use Playwright page.clock to pin the time and stub Math.random via an init script so date displays and randomized content render identically on every run.

Steps

  • Install a fixed clock with page.clock.setFixedTime.
  • Seed or stub Math.random via addInitScript.
  • Stub network responses that return random data.
  • Regenerate baselines against the frozen state.

Test

feed.spec.ts
await page.clock.install({ time: new Date('2026-01-01T00:00:00Z') });
await page.addInitScript(() => {
  let seed = 42;
  Math.random = () => {
    seed = (seed * 9301 + 49297) % 233280;
    return seed / 233280;
  };
});
await page.goto('/');
await expect(page).toHaveScreenshot('feed.png');

Gotchas

  • Install the clock and init script before navigation, or the page reads the real values first.
  • Relative timestamps (e.g. "2 hours ago") still need a fixed clock to be stable.

Related guides

Run this faster and cheaper on Latchkey managed runners. Start free →