Skip to main content

Time Travel

Overview​

Time Travel is a new Testplane UI tool that allows you to observe test execution in real-time, as well as record and replay the test's progress.

  • Time Travel records snapshots of the DOM tree, not screenshots or videos, but the actual DOM structure
  • The average snapshot size is about 200KB thanks to compression and an incremental recording algorithm
  • The entire functionality is available both within the GUI and in a static report generated from any CI

Getting Started​

You need to install the latest versions of testplane and html-reporter (stable support was introduced in testplane@8.29.2 and html-reporter@10.18.0):

npm i -D testplane@latest html-reporter@latest

This is sufficient for the snapshot player and browser streaming to appear in GUI mode during test runs. You can launch the GUI with the standard command:

npx html-reporter gui

To enable Time Travel in CI, you need to set the timeTravel option in the Testplane config:

export = {
    /* ... */
    timeTravel: "on", // You can also specify "retries-only" or "last-failed-run"
};

You can learn more about these options in the configuration reference.

Using Time Travel​

After activating Time Travel in all supported browsers, a player window will appear before the test starts. During test execution, the browser's activity will be streamed into this player.

After the test run is complete, you can replay the recorded snapshots and navigate through time. Hovering over a specific step will show the browser's state at that exact moment.

To debug the layout, you can use the browser's DevTools. All selectors and attributes are preserved without changes.

Configuring Time Travel​

Currently, all snapshot recording management is done through the timeTravel option in the Testplane config. Complete information can be found in the configuration reference.

Also note that html-reporter automatically sets the necessary settings in GUI mode. If for some reason this doesn't work for you, it can be disabled in the settings panel — in this case, your project's config will be used without modifications:

info

We are actively developing Time Travel, and more functionality will be available in the near future, such as network request debugging and full-screen mode.