feat: add info about time travel (#58)

* feat: add info about time travel

* fix: fix admonitions

* fix: fix gif

* fix: fix screenshots

* fix: fix typo

Author: shadowusr

docs/guides/time-travel.mdx

@@ -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>

i18n/ru/docusaurus-plugin-content-docs/current/guides/time-travel.mdx

@@ -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>