Skip to content

Commit 987fd7d

Browse files
DudaGodDudaGod
committed
docs: add info about support bidi protocol
1 parent ece17a9 commit 987fd7d

File tree

6 files changed

+290
-0
lines changed

6 files changed

+290
-0
lines changed

‎blog/support-bidi-protocol.mdx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
title: Поддержка WebDriver BiDi протокола
3+
slug: support-bidi-protocol
4+
hide_table_of_contents: false
5+
date: 2025-05-06T14: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+
В [[email protected]][[email protected]] добавлена поддержка [WebDriver BiDi протокола][bidi] (будущий единый стандарт для автоматизации браузеров).
15+
16+
WebDriver BiDi (Bidirectional) — это новый протокол кросс-браузерной автоматизации, который сочетает в себе лучшее из существующих протоколов:
17+
[W3C WebDriver][webdriver] и [Chrome DevTools Protocol (CDP)][cdp] (подробнее о них можно почитать в нашей [статье][webvider-vs-cdp]). По сути новый протокол расширяет существующий
18+
W3C Webdriver протокол и добавляет в него новые кросс-браузерные команды, которые заменяют CDP протокол (не является кросс-браузерным). Старые webdriver-команды работают как и раньше по http, а
19+
новые команды обеспечивают двунаправленную коммуникацию между клиентом и браузером по websocket соединению.
20+
21+
Новый протокол на данный момент поддержан следующими браузерами: Chrome, Firefox, Edge. В safari поддержки пока нет. Следить за поддерживаемыми браузерами можно на этой [странице][bidi-browsers-support].
22+
23+
Список команд BiDi протокола доступен на этой [странице][bidi-commands].
24+
25+
### Как использовать?
26+
27+
<Admonition type="warning">
28+
В Testplane поддержка BiDi протокола доступна в браузерах начиная с версии: chrome@128 и
29+
firefox@129.
30+
</Admonition>
31+
32+
Для использования BiDi протокола необходимо:
33+
34+
- установить [email protected] или старше;
35+
- указать капабилити `webSocketUrl: true` в поле `desiredCapabilities` для необходимого браузера (в следующей мажорной версии будет выставляться по умолчанию);
36+
- запустить тесты.
37+
38+
### Что можно сделать с помощью нового протокола?
39+
40+
#### Отслеживание и перехват сетевых запросов/ответов
41+
42+
1. Можно замокать запрос к testplane.io и вернуть свой ответ:
43+
44+
```typescript
45+
it("should mock testplane.io", async ({ browser }) => {
46+
await browser.networkAddIntercept({ phases: ["beforeRequestSent"] });
47+
48+
browser.on("network.beforeRequestSent", networkRequest => {
49+
browser.networkProvideResponse({
50+
request: networkRequest.request.request,
51+
body: {
52+
type: "string",
53+
value: "hello world",
54+
},
55+
});
56+
});
57+
58+
await browser.url("https://testplane.io");
59+
});
60+
```
61+
62+
<video src={mockNetworkRequestExampleUrl} width="100%" controls="controls">
63+
Тег video не поддерживается вашим браузером.
64+
<a href="video/blog/bidi/mock-network-request-example.mp4">Скачайте видео</a>.
65+
</video>
66+
67+
2. Перехватим все запросы к ресурсу testplane.io и отобразим список всех загружаемых урлов:
68+
69+
```typescript
70+
it("should log all loaded urls", async ({ browser }) => {
71+
browser.on("network.responseCompleted", networkResponse =>
72+
console.log("got response from url:", networkResponse.response.url),
73+
);
74+
75+
await browser.url("https://testplane.io");
76+
});
77+
```
78+
79+
<video src={networkResponsesExampleUrl} width="100%" controls="controls">
80+
Тег video не поддерживается вашим браузером.
81+
<a href="video/blog/bidi/network-responses-example.mp4">Скачайте видео</a>.
82+
</video>
83+
84+
#### Отображение логов в браузере
85+
86+
```typescript
87+
it("should show browser console logs", async ({ browser }) => {
88+
browser.on("log.entryAdded", entryAdded => console.log(JSON.stringify(entryAdded, null, 4)));
89+
90+
await browser.execute(() => console.log("Hello Bidi"));
91+
});
92+
```
93+
94+
<video src={browserLogsExampleUrl} width="100%" controls="controls">
95+
Тег video не поддерживается вашим браузером.
96+
<a href="video/blog/bidi/browser-logs-example.mp4">Скачайте видео</a>.
97+
</video>
98+
99+
#### Снятие скриншота всей страницы
100+
101+
```typescript
102+
import * as fs from "node:fs";
103+
104+
it("should screen full page", async ({ browser }) => {
105+
await browser.url("https://www.npmjs.com/");
106+
107+
const tree = await browser.browsingContextGetTree({});
108+
const file = await browser.browsingContextCaptureScreenshot({
109+
context: tree.contexts[0].context,
110+
origin: "document",
111+
});
112+
113+
fs.writeFileSync("screenshot.png", Buffer.from(file.data, "base64"));
114+
});
115+
```
116+
117+
<video src={screenFullPageExampleUrl} width="100%" controls="controls">
118+
Тег video не поддерживается вашим браузером.
119+
<a href="video/blog/bidi/screen-full-page-example.mp4">Скачайте видео</a>.
120+
</video>
121+
122+
### Заключение
123+
124+
Хотя протокол BiDi все еще находится в [Editor's Draft][editors-draft], но уже очевидно, что за этим протоколом будущее. Так например браузер firefox уже объявил о том,
125+
что [прекращает поддержку CDP протокола с версии 129][ff-deprecate-cdp].
126+
127+
Поддержка протокола BiDi предоставляет нашим пользователям
128+
129+
- использовать больше возможностей для автоматизации тестов, которых не было в WebDriver протоколе;
130+
- возможность отказаться от использования [Puppeteer][puppeteer] (используются под капотом для поддержки CDP протокола), который по нашему опыту приводит к множеству проблем в тестах;
131+
- идти в ногу со временем и уже начинать привыкать к будущему единому стандарту.
132+
133+
Переходите на новую версию Testplane и приносите фидбек. В случае обнаружения проблем приходите в [issue github][gh-issues] — мы вам обязательно поможем!
134+
135+
[[email protected]]: https://github.com/gemini-testing/testplane/releases/tag/v8.27.0
136+
[bidi]: https://w3c.github.io/webdriver-bidi/
137+
[webdriver]: https://www.w3.org/TR/webdriver1/
138+
[cdp]: https://chromedevtools.github.io/devtools-protocol/
139+
[webvider-vs-cdp]: https://testplane.io/ru/docs/v8/reference/webdriver-vs-cdp/
140+
[bidi-browsers-support]: https://wpt.fyi/results/webdriver/tests/bidi?label=master&label=stable&aligned
141+
[bidi-commands]: https://webdriver.io/docs/api/webdriverBidi
142+
[editors-draft]: https://www.w3.org/standards/types/#ED
143+
[ff-deprecate-cdp]: https://fxdx.dev/deprecating-cdp-support-in-firefox-embracing-the-future-with-webdriver-bidi/
144+
[puppeteer]: https://pptr.dev/
145+
[gh-issues]: https://github.com/gemini-testing/testplane/issues

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

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
title: WebDriver BiDi protocol support
3+
slug: support-bidi-protocol
4+
hide_table_of_contents: false
5+
date: 2025-05-06T14: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+
Support for the [WebDriver BiDi protocol][bidi] (the future unified standard for browser automation) has been added in [[email protected]][[email protected]].
15+
16+
WebDriver BiDi (Bidirectional) is a new cross-browser automation protocol that combines the best features of existing protocols:
17+
[W3C WebDriver][webdriver] and [Chrome DevTools Protocol (CDP)][cdp] (you can read more about them in our [article][webvider-vs-cdp]).
18+
Essentially, the new protocol extends the existing W3C WebDriver protocol and adds new cross-browser commands that replace the CDP protocol (which is not cross-browser compatible).
19+
Old webdriver commands still work via HTTP, while new commands provide bidirectional communication between the client and the browser via a WebSocket connection.
20+
21+
The new protocol is currently supported by the following browsers: Chrome, Firefox, Edge. Safari support is not available yet. You can follow the supported browsers on this [page][bidi-browsers-support].
22+
23+
A list of BiDi protocol commands is available on this [page][bidi-commands].
24+
25+
### How to use?
26+
27+
<Admonition type="warning">
28+
BiDi protocol support in Testplane is available in browsers starting from version: chrome@128
29+
and firefox@129.
30+
</Admonition>
31+
32+
To use the BiDi protocol, you need to:
33+
34+
- install [email protected] or older;
35+
- specify the capability `webSocketUrl: true` in the `desiredCapabilities` field for the desired browser (it will be set by default in the next major version);
36+
- run the tests.
37+
38+
### What can be done with the new protocol?
39+
40+
#### Tracking and intercepting network requests/responses
41+
42+
1. You can mock a request to testplane.io and return your own response:
43+
44+
```typescript
45+
it("should mock testplane.io", async ({ browser }) => {
46+
await browser.networkAddIntercept({ phases: ["beforeRequestSent"] });
47+
48+
browser.on("network.beforeRequestSent", networkRequest => {
49+
browser.networkProvideResponse({
50+
request: networkRequest.request.request,
51+
body: {
52+
type: "string",
53+
value: "hello world",
54+
},
55+
});
56+
});
57+
58+
await browser.url("https://testplane.io");
59+
});
60+
```
61+
62+
<video src={mockNetworkRequestExampleUrl} width="100%" controls="controls">
63+
Your browser does not support the video tag.
64+
<a href="video/blog/bidi/mock-network-request-example.mp4">Download the video</a>.
65+
</video>
66+
67+
2. We will intercept all requests to the testplane.io resource and display a list of all loaded URLs:
68+
69+
```typescript
70+
it("should log all loaded urls", async ({ browser }) => {
71+
browser.on("network.responseCompleted", networkResponse =>
72+
console.log("got response from url:", networkResponse.response.url),
73+
);
74+
75+
await browser.url("https://testplane.io");
76+
});
77+
```
78+
79+
<video src={networkResponsesExampleUrl} width="100%" controls="controls">
80+
Your browser does not support the video tag.
81+
<a href="video/blog/bidi/network-responses-example.mp4">Download the video</a>.
82+
</video>
83+
84+
#### Displaying logs in the browser
85+
86+
```typescript
87+
it("should show browser console logs", async ({ browser }) => {
88+
browser.on("log.entryAdded", entryAdded => console.log(JSON.stringify(entryAdded, null, 4)));
89+
90+
await browser.execute(() => console.log("Hello Bidi"));
91+
});
92+
```
93+
94+
<video src={browserLogsExampleUrl} width="100%" controls="controls">
95+
Your browser does not support the video tag.
96+
<a href="video/blog/bidi/browser-logs-example.mp4">Download the video</a>.
97+
</video>
98+
99+
#### Taking a screenshot of the entire page
100+
101+
```typescript
102+
import * as fs from "node:fs";
103+
104+
it("should screen full page", async ({ browser }) => {
105+
await browser.url("https://www.npmjs.com/");
106+
107+
const tree = await browser.browsingContextGetTree({});
108+
const file = await browser.browsingContextCaptureScreenshot({
109+
context: tree.contexts[0].context,
110+
origin: "document",
111+
});
112+
113+
fs.writeFileSync("screenshot.png", Buffer.from(file.data, "base64"));
114+
});
115+
```
116+
117+
<video src={screenFullPageExampleUrl} width="100%" controls="controls">
118+
Your browser does not support the video tag.
119+
<a href="video/blog/bidi/screen-full-page-example.mp4">Download the video</a>.
120+
</video>
121+
122+
### Conclusion
123+
124+
Although the BiDi protocol is still in [Editor's Draft][editors-draft], it is already obvious that this protocol is the future. For example,
125+
the Firefox browser has already announced that it is [deprecating support for the CDP protocol from version 129][ff-deprecate-cdp].
126+
127+
Supporting the BiDi protocol provides our users with:
128+
129+
- more opportunities for test automation that were not available in the WebDriver protocol;
130+
- the ability to abandon the use of [Puppeteer][puppeteer] (used under the hood to support the CDP protocol), which in our experience leads to many problems in tests;
131+
- keeping up with the times and starting to get used to the future unified standard.
132+
133+
Upgrade to the new version of Testplane and provide feedback. If you encounter any problems, come to the [GitHub issue][gh-issues] — we will definitely help you!
134+
135+
[[email protected]]: https://github.com/gemini-testing/testplane/releases/tag/v8.27.0
136+
[bidi]: https://w3c.github.io/webdriver-bidi/
137+
[webdriver]: https://www.w3.org/TR/webdriver1/
138+
[cdp]: https://chromedevtools.github.io/devtools-protocol/
139+
[webvider-vs-cdp]: https://testplane.io/ru/docs/v8/reference/webdriver-vs-cdp/
140+
[bidi-browsers-support]: https://wpt.fyi/results/webdriver/tests/bidi?label=master&label=stable&aligned
141+
[bidi-commands]: https://webdriver.io/docs/api/webdriverBidi
142+
[editors-draft]: https://www.w3.org/standards/types/#ED
143+
[ff-deprecate-cdp]: https://fxdx.dev/deprecating-cdp-support-in-firefox-embracing-the-future-with-webdriver-bidi/
144+
[puppeteer]: https://pptr.dev/
145+
[gh-issues]: https://github.com/gemini-testing/testplane/issues

‎static/video/blog/bidi/browser-logs-example.mp4‎

1.12 MB
Binary file not shown.

‎static/video/blog/bidi/mock-network-request-example.mp4‎

714 KB
Binary file not shown.

‎static/video/blog/bidi/network-responses-example.mp4‎

5.62 MB
Binary file not shown.

‎static/video/blog/bidi/screen-full-page-example.mp4‎

1.1 MB
Binary file not shown.

0 commit comments

Comments
 (0)