Skip to content

Commit 567560e

Browse files
committed
feat: add info about time travel
1 parent a766eaf commit 567560e

File tree

7 files changed

+122
-0
lines changed

7 files changed

+122
-0
lines changed

docs/guides/time-travel.mdx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Time Travel (Preview)
2+
3+
![](/img/docs/guides/time-travel-demo.gif)
4+
5+
## Overview
6+
7+
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.
8+
9+
- Time Travel records snapshots of the DOM tree—not screenshots or videos, but the actual DOM structure
10+
- The average snapshot size is about 200KB thanks to compression and an incremental recording algorithm
11+
- The entire functionality is available both within the GUI and in a static report generated from any CI
12+
13+
## Getting Started
14+
15+
<Admonition type="warning">
16+
Please note that the Time Travel feature is currently in Preview. For production use, we
17+
recommend waiting for the stable version.
18+
</Admonition>
19+
20+
1. Install the alpha versions of `testplane` and `html-reporter`:
21+
22+
```shell
23+
24+
```
25+
26+
2. Enable snapshot recording in the Testplane config:
27+
28+
```typescript
29+
export = {
30+
/* ... */
31+
record: "on",
32+
};
33+
```
34+
35+
3. Run the tests and activate Time Travel in the UI settings:
36+
37+
![](/img/docs/guides/time-travel-setting.png)
38+
39+
## Using Time Travel
40+
41+
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.
42+
43+
![](/img/docs/guides/time-travel-live.png)
44+
45+
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.
46+
47+
![](/img/docs/guides/time-travel-live.png)
48+
49+
To debug the layout, you can use the browser's DevTools. All selectors and attributes are preserved without changes.
50+
51+
![](/img/docs/guides/time-travel-debug.png)
52+
53+
## Configuring Time Travel
54+
55+
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).
56+
57+
<Admonition type="info">
58+
In the near future, smarter recording modes will be available, such as "only on failure" or
59+
"enabled during retries." Additionally, network request debugging and full-screen mode will soon
60+
be available.
61+
</Admonition>
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Time Travel (Preview)
2+
3+
![](/img/docs/guides/time-travel-demo.gif)
4+
5+
## Обзор
6+
7+
Режим Time Travel — это новый инструмент Testplane UI, который позволяет наблюдать за ходом выполнения тестов в реальном времени, а также записывать и воспроизводить ход прохождения теста.
8+
9+
- Time Travel записывает снимки DOM-дерева, то есть не скриншоты или видео, а настоящую DOM-разметку
10+
- Вес одного снапшота в среднем составляет около 200КБ благодаря сжатию и инкрементальному алгоритму записи
11+
- Весь функционал доступен как в рамках GUI, так и в статическом отчете, полученном из любого CI
12+
13+
## Начало работы
14+
15+
<Admonition type="warning">
16+
Обратите внимание, что функционал Time Travel в данный момент находится в стадии Preview. Для
17+
использования в production рекомендуем дождаться stable версии.
18+
</Admonition>
19+
20+
1. Необходимо установить alpha-версии `testplane` и `html-reporter`:
21+
22+
```shell
23+
24+
```
25+
26+
2. Включить запись снапшотов в конфиге testplane:
27+
28+
```typescript
29+
export = {
30+
/* ... */
31+
record: "on",
32+
};
33+
```
34+
35+
3. Выполнить прогон тестов и активировать Time Travel в настройках UI:
36+
37+
![](/img/docs/guides/time-travel-setting.png)
38+
39+
## Использование Time Travel
40+
41+
После активации Time Travel во всех поддерживаемых браузерах перед запуском будет отображаться окно плеера. Во время прогона теста в него будет стримиться происходящее в браузере.
42+
43+
![](/img/docs/guides/time-travel-live.png)
44+
45+
По завершении прогона теста можно воспроизвести снятые снапшоты и перемещаться во времени. При наведении на конкретный шаг плеер покажет состояние браузера на момент его выполнения.
46+
47+
![](/img/docs/guides/time-travel-live.png)
48+
49+
Для отладки верстки вы можете воспользоваться DevTools браузера. Все селекторы и атрибуты сохранены без изменений.
50+
51+
![](/img/docs/guides/time-travel-debug.png)
52+
53+
## Настройка Time Travel
54+
55+
В данный момент всё управление записью снапшотов происходит с помощью опции `record` в конфиге Testplane. Поддержано 2 значения: `"on"` (снапшоты будут записываться на каждый запуск теста) и `"off"` (снапшоты полностью отключены).
56+
57+
<Admonition type="info">
58+
В самом ближайшем будущем появятся более умные режимы записи снапшотов, такие, как "только при
59+
падении" или "включить при ретраях". Помимо этого скоро станет доступна отладка сетевых запросов
60+
и полноэкранный режим.
61+
</Admonition>
831 KB
Loading
64.6 KB
Loading
356 KB
Loading
632 KB
Loading
500 KB
Loading

0 commit comments

Comments
 (0)