Mocking time in Playwright

type

Post

summary

I want to test something in playwright that requires time to advance a day during the test, how can I do it?

status

Published

Setup:

beforeEach to setup methods to call during test - example


test.beforeEach(async ({ page }) => {
  // Set the date that you'd like your tests to start at
  /////////////////////////////////////////////////
  const fakeNow = new Date("2023-05-12T01:30").valueOf();

  await page.addInitScript(`{
  window.__minutesPassed = 0;

  // create functions to modify "minutesPassed"
  /////////////////////////////////////////////////
  window.advanceTimeOneMinute = () => {
    console.log("TIME ADVANCING TO " + ++window.__minutesPassed + " MINUTE(S) PASSED.");
  }

  // mock date.now
  /////////////////////////////////////////////////
  Date.now = () => {
    return ${fakeNow} + window.__minutesPassed * 60000;
  }
  
  // mock constructor
  /////////////////////////////////////////////////  
  Date = class extends Date {
    constructor(...args) {
      (args.length === 0) ? super(${fakeNow} + window.__minutesPassed * 60000) : super(...args)
    }
  }
}`);

Using the methods you’ve setup:


 	//////////////////////////////
 	////// in a test util file elsewhere
 	// export const advanceTimeOneMinute = async (page: Page) =>
  //  await page.evaluate(() => {
  //    (window as any).advanceTimeOneMinute();
  //  });
 	//////////////////////////////
 	
  test("Defaults to the current datetime", async ({ page }) => {
    await advanceTimeOneMinute(page);
    await advanceTimeOneMinute(page);
    await page.getByText("Submit").click();

    const expectedTime = add(mockedClockDate, { minutes: 2 });
    await expect(page.getByTestId("datetime-input")).toHaveValue(
      new RegExp(dateToDatetimeFieldValue(expectedTime))
    );
  });