[Feature] Time/Date emulation via e.g. a `clock()` primitive

[chambo-e]

See #6347 (comment) for a current workaround.

Edited by the Playwright team.

---

Hello,

We are using playwright to run automated tests on some websites, we record external requests to be able to replace the tests in isolation.
We would love have a way to set the internal clock, same as clock() from cypress to improve reproductibility

This has already been mentioned here #820 but I did not found any follow up issues :)

[idxn]

Hopefully, some folks would upvote this more and more.

[Shaddix]

is there any workaround that we could use currently? Some scripts that stub the Date via page.evaluate maybe?

[jithinjosejacob]

Is it possible to increase the time forward by x minutes to test token expiry as well. UseCase: After logging into web app , token gets expires in 2 hours if site stays idle, and user is force logged out. This requires us to forward time to 2 hours from logged in time to validate this scenario.

[aslushnikov]

You can use sinon fake-timers for this.

To do so:

1. Install sinon: npm install sinon
2. Setup a beforeEach hook that injects sinon in all pages:

   test.beforeEach(async ({ context }) => {
     // Install Sinon in all the pages in the context
     await context.addInitScript({
       path: path.join(__dirname, '..', './node_modules/sinon/pkg/sinon.js'),
     });
     // Auto-enable sinon right away
     await context.addInitScript(() => {
       window.__clock = sinon.useFakeTimers();
     });
   });

3. Use await page.evaluate(() => window.__clock.tick(1000)) to tick time inside tests.

A full example would look like this:

// e2e/fakeTime.spec.ts

import { test, expect } from '@playwright/test';
import path from 'path';

// Install Sinon in all the pages in the context
test.beforeEach(async ({ context }) => {
  await context.addInitScript({
    path: path.join(__dirname, '..', './node_modules/sinon/pkg/sinon.js'),
  });
  await context.addInitScript(() => {
    window.__clock = sinon.useFakeTimers();
  });
});

test('fake time test', async ({ page }) => {
  // Implement a small time on the page
  await page.setContent(`
    <h1>UTC Time: <x-time></x-time></h1>
    <script>
      const time = document.querySelector('x-time');
      (function renderLoop() {
        const date = new Date();
        time.textContent = [date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()]
          .map(number => String(number).padStart(2, '0'))
          .join(':');
        setTimeout(renderLoop, 1000);
      })();
    </script>
  `);

  // Ensure controlled time
  await expect(page.locator('x-time')).toHaveText('00:00:00');
  await page.evaluate(() => window.__clock.tick(1000));
  await expect(page.locator('x-time')).toHaveText('00:00:01');
});

[unlikelyzero]

This feature is critical for visual regression testing when an application's clock is controlled by the os.

[unlikelyzero]

Note, for everyone who is discovering the example that @aslushnikov provided, you may need to explicitly set the window clock like so:

    await context.addInitScript(() => {
        window.__clock = sinon.useFakeTimers({
            now: 1483228800000,
            shouldAdvanceTime: true
        });
    });

[p01]

Here's a very simple and robust solution to set the Time/Date in your tests:

// Pick the new/fake "now" for you test pages.
const fakeNow = new Date("March 14 2042 13:37:11").valueOf();

// Update the Date accordingly in your test pages
await page.addInitScript(`{
  // Extend Date constructor to default to fakeNow
  Date = class extends Date {
    constructor(...args) {
      if (args.length === 0) {
        super(${fakeNow});
      } else {
        super(...args);
      }
    }
  }
  // Override Date.now() to start from fakeNow
  const __DateNowOffset = ${fakeNow} - Date.now();
  const __DateNow = Date.now;
  Date.now = () => __DateNow() + __DateNowOffset;
}`);

That's all!
No need for a library or to dig into your node_modules folder to inject into the pages.

Hope that helps,

[unlikelyzero]

Very clever!

[mizozobu]

You can use sinon fake-timers for this.

To do so:

1. Install sinon: npm install sinon
2. Setup a beforeEach hook that injects sinon in all pages:

   test.beforeEach(async ({ context }) => {
     // Install Sinon in all the pages in the context
     await context.addInitScript({
       path: path.join(__dirname, '..', './node_modules/sinon/pkg/sinon.js'),
     });
     // Auto-enable sinon right away
     await context.addInitScript(() => {
       window.__clock = sinon.useFakeTimers();
     });
   });

3. Use await page.evaluate(() => window.__clock.tick(1000)) to tick time inside tests.

A full example would look like this:

// e2e/fakeTime.spec.ts

import { test, expect } from '@playwright/test';
import path from 'path';

// Install Sinon in all the pages in the context
test.beforeEach(async ({ context }) => {
  await context.addInitScript({
    path: path.join(__dirname, '..', './node_modules/sinon/pkg/sinon.js'),
  });
  await context.addInitScript(() => {
    window.__clock = sinon.useFakeTimers();
  });
});

test('fake time test', async ({ page }) => {
  // Implement a small time on the page
  await page.setContent(`
    <h1>UTC Time: <x-time></x-time></h1>
    <script>
      const time = document.querySelector('x-time');
      (function renderLoop() {
        const date = new Date();
        time.textContent = [date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()]
          .map(number => String(number).padStart(2, '0'))
          .join(':');
        setTimeout(renderLoop, 1000);
      })();
    </script>
  `);

  // Ensure controlled time
  await expect(page.locator('x-time')).toHaveText('00:00:00');
  await page.evaluate(() => window.__clock.tick(1000));
  await expect(page.locator('x-time')).toHaveText('00:00:01');
});

Note that @sinonjs/fake-timers conflicts with playwright waitForFunction.

playwright/packages/playwright-core/src/server/injected/injectedScript.ts

Lines 321 to 327 in 446de1a

	pollRaf<T>(predicate: Predicate<T>): InjectedScriptPoll<T> {
	return this.poll(predicate, next => requestAnimationFrame(next));
	}
	pollInterval<T>(pollInterval: number, predicate: Predicate<T>): InjectedScriptPoll<T> {
	return this.poll(predicate, next => setTimeout(next, pollInterval));
	}

You might want to explicitly set which functions to fake.

https://github.com/sinonjs/fake-timers#var-clock--faketimersinstallconfig

await page.addInitScript(() => {
  window.__clock = sinon.useFakeTimers({
    toFake: [
      'setTimeout',
      'clearTimeout',
      // 'setImmediate',
      // 'clearImmediate',
      'setInterval',
      'clearInterval',
      // 'Date',
      // 'requestAnimationFrame',
      // 'cancelAnimationFrame',
      // 'requestIdleCallback',
      // 'cancelIdleCallback',
      // 'hrtime',
      // 'performance',
    ],
  });
});