Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions docs/guides/time-travel.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import Admonition from "@theme/Admonition";

# Time Travel (Preview)

![](/img/docs/guides/time-travel-demo.gif)

## Overview

The Time Travel mode 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

<Admonition type="warning">
Please note that the Time Travel feature is currently in Preview. For production use, we
recommend waiting for the stable version.
</Admonition>

1. Install the alpha versions of `testplane` and `html-reporter`:

```shell
npm i -D [email protected] [email protected]
```

2. Enable snapshot recording in the Testplane config:

```typescript
export = {
/* ... */
record: "on",
};
```

3. Run the tests and activate Time Travel in the UI settings:

![](/img/docs/guides/time-travel-setting.png)

## 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.

![](/img/docs/guides/time-travel-live.png)

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.

![](/img/docs/guides/time-travel-recording.png)

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

![](/img/docs/guides/time-travel-debug.png)

## Configuring Time Travel

Currently, snapshot recording is controlled via the `record` option in the Testplane config. It supports two values: `"on"` (snapshots will be recorded for every test run) and `"off"` (snapshots are completely disabled).

<Admonition type="info">
In the near future, smarter recording modes will be available, such as "only on failure" or
"enabled during retries." Additionally, network request debugging and full-screen mode will soon
be available.
</Admonition>
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import Admonition from "@theme/Admonition";

# Time Travel (Preview)

![](/img/docs/guides/time-travel-demo.gif)

## Обзор

Режим Time Travel — это новый инструмент Testplane UI, который позволяет наблюдать за ходом выполнения тестов в реальном времени, а также записывать и воспроизводить ход прохождения теста.

- Time Travel записывает снимки DOM-дерева, то есть не скриншоты или видео, а настоящую DOM-разметку
- Вес одного снапшота в среднем составляет около 200КБ благодаря сжатию и инкрементальному алгоритму записи
- Весь функционал доступен как в рамках GUI, так и в статическом отчете, полученном из любого CI

## Начало работы

<Admonition type="warning">
Обратите внимание, что функционал Time Travel в данный момент находится в стадии Preview. Для
использования в production рекомендуем дождаться stable версии.
</Admonition>

1. Необходимо установить alpha-версии `testplane` и `html-reporter`:

```shell
npm i -D [email protected] [email protected]
```

2. Включить запись снапшотов в конфиге testplane:

```typescript
export = {
/* ... */
record: "on",
};
```

3. Выполнить прогон тестов и активировать Time Travel в настройках UI:

![](/img/docs/guides/time-travel-setting.png)

## Использование Time Travel

После активации Time Travel во всех поддерживаемых браузерах перед запуском будет отображаться окно плеера. Во время прогона теста в него будет стримиться происходящее в браузере.

![](/img/docs/guides/time-travel-live.png)

По завершении прогона теста можно воспроизвести снятые снапшоты и перемещаться во времени. При наведении на конкретный шаг плеер покажет состояние браузера на момент его выполнения.

![](/img/docs/guides/time-travel-recording.png)

Для отладки верстки вы можете воспользоваться DevTools браузера. Все селекторы и атрибуты сохранены без изменений.

![](/img/docs/guides/time-travel-debug.png)

## Настройка Time Travel

В данный момент всё управление записью снапшотов происходит с помощью опции `record` в конфиге Testplane. Поддержано 2 значения: `"on"` (снапшоты будут записываться на каждый запуск теста) и `"off"` (снапшоты полностью отключены).

<Admonition type="info">
В самом ближайшем будущем появятся более умные режимы записи снапшотов, такие, как "только при
падении" или "включить при ретраях". Помимо этого скоро станет доступна отладка сетевых запросов
и полноэкранный режим.
</Admonition>
Binary file added static/img/docs/guides/time-travel-debug.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/docs/guides/time-travel-demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/docs/guides/time-travel-live.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/docs/guides/time-travel-recording.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/docs/guides/time-travel-setting.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.