Skip to main content

How to Control the Clock

Intro​

Many pages do something after some time: a message hides itself after a minute, a session expires after 15 minutes of inactivity, a countdown reaches zero. To test it, the test has to wait for that time. A test that waits for 15 minutes is too slow to run often, and a test that waits for a short time with a fake setting (e.g., a session of 2 seconds) doesn't test what users get.

A Solution​

Control the clock of the page. Pages schedule what happens later with the timers of the browser (e.g., setTimeout). The test replaces them with fake timers before the page loads. The fake timers don't move on their own: the test moves them forward, and the page runs what was due, right away. A minute takes a few milliseconds.

  • Playwright and Vibium have page.clock: install() replaces the timers, and runFor() moves them forward.
  • WebdriverIO has browser.emulate('clock'), which returns a clock with tick().
  • Selenium has no clock yet. With WebDriver BiDi, the test adds a preload script: a script that runs in every page before the page's own scripts. It replaces setTimeout with a small fake one, and the test moves it forward with fakeClock.tick(). Selenide uses the same Selenium classes.

The fake setTimeout of the Selenium examples is enough for this page. The clocks of Playwright, Vibium and WebdriverIO also fake setInterval, Date and the other timers. For a full fake clock with Selenium, add a library like @sinonjs/fake-timers to the preload script.

Example​

The examples use the toasts page of the-internet. Its buttons show a toast (a small message in the corner), which hides itself after the time set in the URL (?duration=60000, one minute).

The test installs the fake clock, shows a toast, moves the clock forward 59 seconds and checks that the toast is still there, then moves it 1 more second and checks that the toast is gone.

Expected Behavior​

  • The browser starts
  • The test replaces the timers of the page with fake ones
  • The test loads the page and shows a toast that hides itself after one minute
  • The test moves the clock forward 59 seconds, and the toast is still there
  • The test moves the clock forward 1 more second, and the toast is gone
  • The browser closes, a few seconds after it started

Summary​

Controlling the clock makes tests of timeouts fast, and keeps the times the users get. It also makes them reliable: the page runs what was due when the test moves the clock, so the test doesn't depend on how fast the machine is.

Happy Testing!

Authors​

Diego Molina
Diego Molina
Elemental Selenium maintainer