diff --git a/docs/guides/time-travel.mdx b/docs/guides/time-travel.mdx new file mode 100644 index 0000000..7e06b13 --- /dev/null +++ b/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 + + + Please note that the Time Travel feature is currently in Preview. For production use, we + recommend waiting for the stable version. + + +1. Install the alpha versions of `testplane` and `html-reporter`: + + ```shell + npm i -D testplane@8.26.0-alpha.1 html-reporter@10.15.0-alpha.1 + ``` + +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). + + + 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. + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/time-travel.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/guides/time-travel.mdx new file mode 100644 index 0000000..b858e29 --- /dev/null +++ b/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 + +## Начало работы + + + Обратите внимание, что функционал Time Travel в данный момент находится в стадии Preview. Для + использования в production рекомендуем дождаться stable версии. + + +1. Необходимо установить alpha-версии `testplane` и `html-reporter`: + + ```shell + npm i -D testplane@8.26.0-alpha.1 html-reporter@10.15.0-alpha.1 + ``` + +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"` (снапшоты полностью отключены). + + + В самом ближайшем будущем появятся более умные режимы записи снапшотов, такие, как "только при + падении" или "включить при ретраях". Помимо этого скоро станет доступна отладка сетевых запросов + и полноэкранный режим. + diff --git a/static/img/docs/guides/time-travel-debug.png b/static/img/docs/guides/time-travel-debug.png new file mode 100644 index 0000000..678a7a1 Binary files /dev/null and b/static/img/docs/guides/time-travel-debug.png differ diff --git a/static/img/docs/guides/time-travel-demo.gif b/static/img/docs/guides/time-travel-demo.gif new file mode 100644 index 0000000..18e922f Binary files /dev/null and b/static/img/docs/guides/time-travel-demo.gif differ diff --git a/static/img/docs/guides/time-travel-live.png b/static/img/docs/guides/time-travel-live.png new file mode 100644 index 0000000..5a200a5 Binary files /dev/null and b/static/img/docs/guides/time-travel-live.png differ diff --git a/static/img/docs/guides/time-travel-recording.png b/static/img/docs/guides/time-travel-recording.png new file mode 100644 index 0000000..a6934eb Binary files /dev/null and b/static/img/docs/guides/time-travel-recording.png differ diff --git a/static/img/docs/guides/time-travel-setting.png b/static/img/docs/guides/time-travel-setting.png new file mode 100644 index 0000000..201e711 Binary files /dev/null and b/static/img/docs/guides/time-travel-setting.png differ