Skip to content

Commit 82ac100

Browse files
authored
docs: update time travel docs (#74)
* docs: update time travel docs * docs: put time-travel guide on first position in guides * docs: write blog article about time travel and recent ui updates
1 parent 0e2dc9a commit 82ac100

File tree

13 files changed

+330
-52
lines changed

13 files changed

+330
-52
lines changed

blog/support-bidi-protocol.mdx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import networkResponsesExampleUrl from "/video/blog/bidi/network-responses-examp
1111
import browserLogsExampleUrl from "/video/blog/bidi/browser-logs-example.mp4";
1212
import screenFullPageExampleUrl from "/video/blog/bidi/screen-full-page-example.mp4";
1313

14-
В [[email protected]][testplane@8.27.0] добавлена поддержка [WebDriver BiDi протокола][bidi] (будущий единый стандарт для автоматизации браузеров).
14+
В [[email protected]](https://github.com/gemini-testing/testplane/releases/tag/v8.27.0) добавлена поддержка [WebDriver BiDi протокола](https://w3c.github.io/webdriver-bidi/) (будущий единый стандарт для автоматизации браузеров).
1515

1616
<!-- truncate -->
1717

@@ -131,8 +131,6 @@ it("should screen full page", async ({ browser }) => {
131131

132132
Переходите на новую версию Testplane и приносите фидбек. В случае обнаружения проблем приходите в [issue github][gh-issues] — мы вам обязательно поможем!
133133

134-
[[email protected]]: https://github.com/gemini-testing/testplane/releases/tag/v8.27.0
135-
[bidi]: https://w3c.github.io/webdriver-bidi/
136134
[webdriver]: https://www.w3.org/TR/webdriver1/
137135
[cdp]: https://chromedevtools.github.io/devtools-protocol/
138136
[webvider-vs-cdp]: https://testplane.io/ru/docs/v8/reference/webdriver-vs-cdp/

blog/time-travel-release.mdx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Time Travel + новости Testplane UI
3+
slug: time-travel-release
4+
hide_table_of_contents: false
5+
date: 2025-05-21T17:00
6+
---
7+
8+
import Admonition from "@theme/Admonition";
9+
import mockNetworkRequestExampleUrl from "/video/blog/bidi/mock-network-request-example.mp4";
10+
import networkResponsesExampleUrl from "/video/blog/bidi/network-responses-example.mp4";
11+
import browserLogsExampleUrl from "/video/blog/bidi/browser-logs-example.mp4";
12+
import screenFullPageExampleUrl from "/video/blog/bidi/screen-full-page-example.mp4";
13+
14+
Представляем новый инструмент Testplane UI — Time Travel, теперь в стабильной версии! Расскажем о новой функциональности и что ещё появилось в Testplane UI за последнее время.
15+
16+
![](/img/blog/time-travel.png)
17+
18+
<!-- truncate -->
19+
20+
## Как получить доступ к последним обновлениям?
21+
22+
Нужно установить свежие версии Testplane и `html-reporter`:
23+
24+
```shell
25+
26+
```
27+
28+
## Time Travel
29+
30+
Time Travel это новый инструмент Testplane UI, который позволяет просматривать прогоны тестов в реальном времени, а также записывать и воспроизводить все действия, которые происходили в браузере во время теста.
31+
32+
Вот как это выглядит:
33+
34+
![](/img/docs/guides/time-travel-demo.gif)
35+
36+
Time Travel записывает снапшоты DOM-дерева, что позволяет отлаживать проблемы, связанные с селекторами, и в то же время экономить место на диске.
37+
38+
Подробнее в нашем [новом руководстве][time-travel-guide].
39+
40+
## Новости Testplane UI
41+
42+
### Fuzzy-поиск тестов
43+
44+
Поиск тестов теперь более интеллектуальный и понимает запросы даже с опечатками или в другой раскладке. Появились опции поиска как в IDE: regex и case-insensitive.
45+
46+
А ещё мы добавили новый способ сортировки по релевантности. Он включается автоматически во время поиска, благодаря чему сверху вы видите самые релевантные тесты.
47+
48+
![](/img/blog/fuzzy-search.gif)
49+
50+
### Новые кнопки для управления элементами интерфейса
51+
52+
Добавили кнопки для управления видимостью дерева тестов и плеера. Теперь можно скрывать их, когда они вам не нужны и, например, работать со скриншотами во весь экран.
53+
54+
Интерфейс запоминает ваши предпочтения и даже после перезагрузки страницы всё будет так, как вы настроили.
55+
56+
![](/img/blog/show-hide-buttons.gif)
57+
58+
### Другие улучшения
59+
60+
- Значительно переработали [команду `merge-reports`](/docs/v8/html-reporter/html-reporter-commands/#merge-reports) — теперь она работает лучше, стабильнее и покрывает больше кейсов
61+
- Testplane UI теперь умеет работать с отчетами, созданными в старых версиях теперь можно не бояться потерять данные при обновлении
62+
- [Появилось API](https://github.com/gemini-testing/html-reporter/releases/tag/v10.17.0) для выгрузки снапшотов в Time Travel
63+
- Возможность выбирать скорость воспроизведения в плеере Time Travel
64+
65+
Следите за новыми релизами в нашем блоге и в разделе [Release Notes на GitHub](https://github.com/gemini-testing/html-reporter/releases), а в случае обнаружения проблем приходите в [issue GitHub][gh-issues] мы вам обязательно поможем!
66+
67+
[gh-issues]: https://github.com/gemini-testing/testplane/issues
68+
[time-travel-guide]: https://testplane.io/ru/docs/v8/guides/time-travel/

docs/config/browsers.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -950,6 +950,69 @@ Allows selecting different data centers in the cloud service. Default: `null`.
950950

951951
Allows running a headless browser in the cloud service. Default: `null`.
952952

953+
## Time Travel {#time_travel}
954+
955+
These settings allow you to configure test run snapshot recording for subsequent playback in the player.
956+
To learn more about Time Travel capabilities, see the [Time Travel guide][time-travel].
957+
958+
<table>
959+
<thead>
960+
<tr>
961+
<td>**Parameter**</td>
962+
<td>**Type**</td>
963+
<td>**Default**</td>
964+
<td>**Description**</td>
965+
</tr>
966+
</thead>
967+
<tbody>
968+
<tr>
969+
<td>`timeTravel`</td>
970+
<td>`string | TimeTravelSettings`</td>
971+
<td>`"off"`</td>
972+
<td>Time Travel settings.</td>
973+
</tr>
974+
</tbody>
975+
</table>
976+
977+
### timeTravel {#time_travel}
978+
979+
Time Travel settings. Default: `"off"`.
980+
981+
For quick setup, you can pass a string — one of the recording modes (`TimeTravelMode`). The full configuration looks like this:
982+
983+
```typescript
984+
enum TimeTravelMode {
985+
// Snapshot recording is enabled for all runs
986+
On = "on",
987+
// Snapshot recording is disabled
988+
Off = "off",
989+
// Snapshot recording is enabled for all retries (first run is not considered a retry)
990+
RetriesOnly = "retries-only",
991+
// Snapshot recording is enabled for all runs, but only snapshots for the last failed run are saved
992+
// For example:
993+
// - if the test was run once and failed, the snapshot will be recorded.
994+
// - if the test was run 5 times and failed all 5 times, the snapshot for the 5th retry will be recorded.
995+
// - if the test was run 2 times and passed both times, no snapshots will be recorded.
996+
LastFailedRun = "last-failed-run",
997+
}
998+
999+
interface TimeTravelConfig {
1000+
mode: TimeTravelMode;
1001+
}
1002+
```
1003+
1004+
Example of a valid configuration:
1005+
1006+
```typescript
1007+
import { TimeTravelMode } from "@testplane/testplane";
1008+
1009+
export = {
1010+
timeTravel: {
1011+
mode: TimeTravelMode.RetriesOnly,
1012+
},
1013+
};
1014+
```
1015+
9531016
[desired-caps]: https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities
9541017
[html-reporter]: ../../html-reporter/html-reporter-setup
9551018
[got]: https://github.com/sindresorhus/got/
@@ -964,3 +1027,4 @@ Allows running a headless browser in the cloud service. Default: `null`.
9641027
[element-wait-until]: ../../commands/element/waitUntil
9651028
[how-to-use-cdp]: ../../guides/how-to-use-cdp
9661029
[testplane-also-in-helper]: ../../guides/how-to-skip-test-in-browsers#solution_4
1030+
[time-travel]: ../../guides/time-travel

docs/guides/time-travel.mdx

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,45 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
15
import Admonition from "@theme/Admonition";
26

3-
# Time Travel (Preview)
7+
# Time Travel
48

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

711
## Overview
812

9-
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.
13+
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.
1014

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

1519
## Getting Started
1620

17-
<Admonition type="warning">
18-
Please note that the Time Travel feature is currently in Preview. For production use, we
19-
recommend waiting for the stable version.
20-
</Admonition>
21+
You need to install the latest versions of `testplane` and `html-reporter` (stable support was introduced in `[email protected]` and `[email protected]`):
2122

22-
1. Install the alpha versions of `testplane` and `html-reporter`:
23+
```shell
24+
npm i -D testplane@latest html-reporter@latest
25+
```
2326

24-
```shell
25-
26-
```
27+
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:
2728

28-
2. Enable snapshot recording in the Testplane config:
29+
```shell
30+
npx html-reporter gui
31+
```
2932

30-
```typescript
31-
export = {
32-
/* ... */
33-
record: "on",
34-
};
35-
```
33+
To enable Time Travel in CI, you need to set the `timeTravel` option in the Testplane config:
3634

37-
3. Run the tests and activate Time Travel in the UI settings:
35+
```typescript
36+
export = {
37+
/* ... */
38+
timeTravel: "on", // You can also specify "retries-only" or "last-failed-run"
39+
};
40+
```
3841

39-
![](/img/docs/guides/time-travel-setting.png)
42+
You can learn more about these options in the [configuration reference][config-reference].
4043

4144
## Using Time Travel
4245

@@ -54,10 +57,16 @@ To debug the layout, you can use the browser's DevTools. All selectors and attri
5457

5558
## Configuring Time Travel
5659

57-
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).
60+
Currently, all snapshot recording management is done through the `timeTravel` option in the Testplane config. Complete information can be found in the [configuration reference][config-reference].
61+
62+
Also note that `html-reporter` automatically sets the necessary settings in GUI mode.
63+
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:
64+
65+
![](/img/docs/guides/time-travel-ui-settings.png)
5866

5967
<Admonition type="info">
60-
In the near future, smarter recording modes will be available, such as "only on failure" or
61-
"enabled during retries." Additionally, network request debugging and full-screen mode will soon
62-
be available.
68+
We are actively developing Time Travel, and more functionality will be available in the near
69+
future, such as network request debugging and full-screen mode.
6370
</Admonition>
71+
72+
[config-reference]: ../../config/browsers#time_travel

i18n/en/docusaurus-plugin-content-blog/support-bidi-protocol.mdx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import networkResponsesExampleUrl from "/video/blog/bidi/network-responses-examp
1111
import browserLogsExampleUrl from "/video/blog/bidi/browser-logs-example.mp4";
1212
import screenFullPageExampleUrl from "/video/blog/bidi/screen-full-page-example.mp4";
1313

14-
Support for the [WebDriver BiDi protocol][bidi] (the future unified standard for browser automation) has been added in [[email protected]][testplane@8.27.0].
14+
Support for the [WebDriver BiDi protocol](https://w3c.github.io/webdriver-bidi/) (the future unified standard for browser automation) has been added in [[email protected]](https://github.com/gemini-testing/testplane/releases/tag/v8.27.0).
1515

1616
<!-- truncate -->
1717

@@ -133,8 +133,6 @@ By embracing BiDi protocol support, we're empowering our users with:
133133

134134
We encourage you to upgrade to the latest Testplane version and share your experience. Should you encounter any challenges, our team is ready to assist through [GitHub issue][gh-issues] - just create a ticket and we'll help resolve it promptly!
135135

136-
[[email protected]]: https://github.com/gemini-testing/testplane/releases/tag/v8.27.0
137-
[bidi]: https://w3c.github.io/webdriver-bidi/
138136
[webdriver]: https://www.w3.org/TR/webdriver1/
139137
[cdp]: https://chromedevtools.github.io/devtools-protocol/
140138
[webvider-vs-cdp]: https://testplane.io/ru/docs/v8/reference/webdriver-vs-cdp/
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Time Travel + Testplane UI Updates
3+
slug: time-travel-release
4+
hide_table_of_contents: false
5+
date: 2025-05-21T17:00
6+
---
7+
8+
import Admonition from "@theme/Admonition";
9+
import mockNetworkRequestExampleUrl from "/video/blog/bidi/mock-network-request-example.mp4";
10+
import networkResponsesExampleUrl from "/video/blog/bidi/network-responses-example.mp4";
11+
import browserLogsExampleUrl from "/video/blog/bidi/browser-logs-example.mp4";
12+
import screenFullPageExampleUrl from "/video/blog/bidi/screen-full-page-example.mp4";
13+
14+
We're presenting a new Testplane UI tool — Time Travel, now stable! Let's talk about this new functionality and what else has been added to Testplane UI recently.
15+
16+
![](/img/blog/time-travel.png)
17+
18+
<!-- truncate -->
19+
20+
## How to get the latest updates?
21+
22+
You need to install the latest versions of Testplane and `html-reporter`:
23+
24+
```shell
25+
26+
```
27+
28+
## Time Travel
29+
30+
Time Travel is a new Testplane UI tool that allows you to view test runs in real-time, as well as record and play back all the actions that occurred in the browser during the test.
31+
32+
Here's how it looks:
33+
34+
![](/img/docs/guides/time-travel-demo.gif)
35+
36+
Time Travel records DOM tree snapshots, which helps debug issues related to selectors while saving disk space.
37+
38+
Learn more in our [new guide][time-travel-guide].
39+
40+
## Testplane UI News
41+
42+
### Fuzzy Test Search
43+
44+
Test search is now more intelligent and understands queries even with typos or in a different keyboard layout. IDE-like search options have been added: regex and case-insensitive.
45+
46+
We've also added a new sorting method by relevance. It's automatically enabled during search, ensuring the most relevant tests appear at the top.
47+
48+
![](/img/blog/fuzzy-search.gif)
49+
50+
### New Buttons for Managing Interface Elements
51+
52+
We've added buttons to control the visibility of the test tree and player. Now you can hide them when you don't need them and, for example, work with screenshots in full screen.
53+
54+
The interface remembers your preferences, and even after reloading the page, everything will be as you set it up.
55+
56+
![](/img/blog/show-hide-buttons.gif)
57+
58+
### Other Improvements
59+
60+
- Significantly reworked the [`merge-reports`](/docs/v8/html-reporter/html-reporter-commands/#merge-reports) command now it works better, more stable, and covers more cases
61+
- Testplane UI can now work with reports created in older versions no need to worry about losing data when upgrading
62+
- [New API](https://github.com/gemini-testing/html-reporter/releases/tag/v10.17.0) for exporting snapshots in Time Travel
63+
- Option to select playback speed in the Time Travel player
64+
65+
Stay tuned for new releases on our blog and in the [Release Notes on GitHub](https://github.com/gemini-testing/html-reporter/releases), and if you encounter any issues, please visit our [GitHub issues][gh-issues] we'll be happy to help!
66+
67+
[gh-issues]: https://github.com/gemini-testing/testplane/issues
68+
[time-travel-guide]: /docs/v8/guides/time-travel/

0 commit comments

Comments
 (0)