2025/02/01 BuriKaigi 2025 WebDriver BiDiとは 何なのか

nus3（なすさん）

今日話したいこと ブラウザ自動化ツールのこれまで WebDriver BiDiについて P WebDriver BiDiの現状 P WebDriver BiDiを試してみる

今日話したいこと # ブラウザ自動化ツールのこれまで 7 WebDriver BiDiについて P WebDriver BiDiの現状 P WebDriver BiDiを試してみる

なぜブラウザ自動化ツールの これまでについて話すのか？

WebDriver BiDiの誕生に 大きく関わるからである！

ということで、 ブラウザ自動化ツールの これまでについて

https://developer.chrome.com/blog/test-automation-evolution WebdriverIO Appium Protractor Nightwatch Testcafe Cypress Puppeteer Playwright JavaScriptの発展により 多くのブラウザ自動化ツールが誕生

Vitest (Browser Mode) Vitest (Browser Mode) Playwright WebdriverIO 最近だと、 フロントエンドのコンポーネントを対象にしたテストにも ブラウザ自動化ツールは使われている

ブラウザ自動化ツールは どのようにしてブラウザ外から ブラウザを操作しているのか？ Cypressのようにブラウザ内から操作してる場合もあるでござる

これまで ブラウザ自動化ツールが 外部プロセスからブラウザを
 操作する方法は2パターンあった

WebDriver p 外部プロセスからブラウザを操作するためのインタ フェーr p 2018年にW3Cにより標準仕様になっe p 主要なブラウザでサポートされていY p ツールとブラウザ（Driver）間はHTTPでやりと p 以下のツールで採 p WebdriverI p Selenium

https://developer.chrome.com/blog/test-automation-evolution WebDriver

Chrome DevTools Protocol(CDP) x Chromiumベースのブラウザを操作するための
 プロトコ‘ x ツールとブラウザ間はWebSocketを通してやりと5 x FirefoxではCDPのサブセットを実装することで
 サポーY x 以下のツールで採! x Playwrigh8 x Puppetee@ x Selenium WebdriverIOでもv8までサポートしてたようでござる

https://developer.chrome.com/blog/test-automation-evolution Chrome DevTools Protocol(CDP)

WebDriver CDP " クロスブラウザのサポート @ Chromiumベースのブラウザ
 (Firefoxで一部サポート) " 標準仕様 @ 標準仕様ではない @ ツールとブラウザ間はHTTPで
 やりとり " ツールとブラウザ間はWebSocoketで やりとり " consoleのキャプチャやネットワーク のinterceptなどが可能 @ 発生するイベントをリアルタイムに
 受け取るのが困‘ @ ポーリングなどの対応が必要 " 発生するイベントをリアルタイムに
 受け取れÇ " ブラウザテストの自動化の観点
 からも信頼性、安定性がある

FirefoxでのCDPの対応について D As the name suggests, the CDP is used by Chrome's DevTools and needs to change with DevTools requirements# D The CDP is not standardized in a shared, public specification and maintaining it in Firefox required steady communication and effort# D Since Firefox only implemented a subset of CDP, Puppeteer could never guarantee its full API to work with Firefox, creating confusion for users. https://developer.chrome.com/blog/firefox-support-in-puppeteer-with-webdriver-bidi D ChromeのDevToolsの要件に応じた対応が必“ D 公開されている標準仕様ではないので、都度コミュニケーションが必要だっ¤ D FirefoxではCDPのサブセットのみ実装していたので、
 PuppeteerはFirefoxで完全なAPIが動作することが保証できず、
 ユーザーに混乱が生じた

ブラウザとツールベンダが
 本当に欲しかったもの G クロスブラウザサポー' G 標準仕A G ツールとブラウザ間は双方向通r G consoleのキャプチャやネットワークのインターセプト などができる

そこで WebDriver BiDi ですよ！

今日話したいこと ブラウザ自動化ツールのこれまで 7 WebDriver BiDiについて P WebDriver BiDiの現状 P WebDriver BiDiを試してみる

WebDriver BiDiのはじまり TPAC2019でWebDriverでの双方向通信について議論 chromedriverチームが クライアントとブラウザ間で双方向通信できる
 設計案とプロトタイプ実装に取り組んでいた https://docs.google.com/document/d/1gUm7Be-akW2-4mjr15cnZlzwoAfOlfL7b3tWCDrb1Jg/edit?tab=t.0

WebDriver BiDiのはじまり chromedriverチームの設計案 https://docs.google.com/document/d/1eJx437A9vKyngOQ49lYYD3GspDUwZ6KpKDgcE2eR00g/edit?tab=t.0 i ChromeとChromeDriver間では、すでに WebSocketを通じて双方向通信が可能だっ‡ i クライアントとChromeDriver間では
 WebDriverの仕様に則り
 HTTPを介して通信してい‡ i クライアントとChromeDriver間で
 WebSocketを通じて双方向通信を目指す このプロトタイプの実装がWebDriver BiDiの先駆けに

WebDriver BiDiとは d Bidirectional WebDriver ProtocoY d WebDriverを基盤として拡張されたブラウザ自動化の
 ための双方向プロトコV d Browser Testing and Tools Working Groupで仕様策定 が進められ7 d Editor’s Draftの仕G d ツールとブラウザ間はWebSocketを介した双方向通' d consoleのキャプチャやネットワークのインターセプト といったシナリオをサポート

WebDriver BiDiとは https://developer.chrome.com/blog/webdriver-bidi i Working groupにはブラウザベンダ、
 自動ツールベンダー、テストプロバイダーなどが参加

仕様策定に合わせて、 一部のブラウザやツールベンダが WebDriver BiDiの実装を進めている

今日話したいこと ブラウザ自動化ツールのこれまで WebDriver BiDiについて P WebDriver BiDiの現状 f WebDriver BiDiを試してみる

各ブラウザのサポート状況 3 Chrome、Edge、Firefoxでの実装が進んでいる https://wpt.fyi/results/webdriver/tests/bidi?label=experimental&label=master&aligned&q=tests%2Fbidi

Firefox 8 Firefox129以降、CDPのサポートがdeprecate 8 代わりにWebDriver BiDiへの移行を推奨 https://fxdx.dev/deprecating-cdp-support-in-firefox-embracing-the-future-with-webdriver-bidi/

Safari(WebKit) 4 WebKitのWebDriver BiDi実装はIgaliaが推進 https://people.igalia.com/lmoura/wkcm-2024/webdriver-bidi-webkit.html IgaliaはWeb標準の仕様策定もだし、Web標準を推進するために
 各ブラウザエンジンへの実装も進めるすごい人たちってイメージがあるでござる

ブラウザ自動化ツールの対応状況 r WebdriverIO v9でBiDiのサポーV r Seleniu) r Puppeteerのv23からFirefox上ではBiDiが使われるようp r PlaywrightではBiDiサポートの検証が進んでい$ r https://webdriver.io/blog/2024/08/15/webdriverio-v9-releasef r https://www.selenium.dev/documentation/webdriver/bidif r https://hacks.mozilla.org/2024/08/puppeteer-support-for-firefoxf r https://github.com/microsoft/playwright/issues/3257ˆ r https://docs.google.com/document/ d/1DWUYgM3lglTuvDueX2ggSE6a68pycJtjK2QJPL-resc/edit?tab=t.0

FirefoxやChromeでは WebDriver BiDiを試せそう

今日話したいこと ブラウザ自動化ツールのこれまで WebDriver BiDiについて P WebDriver BiDiの現状 f WebDriver BiDiを試してみる

WebDriver BiDiを使って 外部プロセス（自作したCLIツール）から
 Firefoxを操作してみる

実際に作ったもの https://github.com/nus3/bidi-client

実際に作ったもの フォーム画面をCLIから操作

実際に作ったもの CLIから以下の操作ができるよう4 1 画面遷7 1 input要素に値を入# 1 ボタンのクリッ 1 イベントのsubscribe

CLIツールからFirefoxを操作してみる Firefoxを オプションを
 指定して起動する --remote-debugging-port (macOSでFirefoxをすでにインストールしている場合) https://wiki.mozilla.org/Firefox/CommandLineOptions https://firefox-source-docs.mozilla.org/remote/cdp/Usage.html

CLIツールからFirefoxを操作してみる Firefoxを オプションを
 指定して起動する --remote-debugging-port macOSでFirefoxをすでにインストールしている場合 https://wiki.mozilla.org/Firefox/CommandLineOptions https://firefox-source-docs.mozilla.org/remote/cdp/Usage.html --remote-debugging-portオプションを指定して起動すると
 WebDriver BiDi用のWebSocketの接続先が作られる

CLIツールからFirefoxを操作してみる Firefoxを オプションを
 指定して起動する --remote-debugging-port RemoteAgentが起動していることが 確認できる

CLIツールからFirefoxを操作してみる CLIツール(Deno)からFirefoxへWebSocket接続する こういったCLIツールをお手軽に作れるDenoが好きでござる https://docs.deno.com/examples/websocket/

CLIツールからFirefoxを操作してみる https://www.w3.org/TR/webdriver-bidi/#commands クライアント(CLI)からブラウザ(Firefox)へは
 WebSocketを介してCommandを送信

CLIツールからFirefoxを操作してみる Commandの実行結果は非同期で受け取る

CLIツールからFirefoxを操作してみる Commandを送信

CLIツールからFirefoxを操作してみる Commandの実行結果を受け取る

WebDriver BiDiで指定できる
 Commandの一例 Working Draftの仕様なので、内容は変わる可能性があるでござる

session.new BiDiセッションを新たに作成する https://w3c.github.io/webdriver-bidi/#command-session-new

browsingContext.getTree ⁨⁩対象ブラウザのコンテキストを取得する https://w3c.github.io/webdriver-bidi/#command-browsingContext-getTree 今回は、このコンテキストを使って ブラウザの操作をしていく

browsingContext.navigate ⁨⁩指定したURLに遷移する https://w3c.github.io/webdriver-bidi/#command-browsingContext-navigate

browsingContext.locateNodes ⁨⁩指定した要素を取得する https://w3c.github.io/webdriver-bidi/#command-browsingContext-locateNodes

input.performActions ⁨ ⁩ 指定した要素へポインターを移動 https://w3c.github.io/webdriver-bidi/#command-input-performActions

input.performActions ⁨ ⁩ 指定した要素へポインターを移動 https://w3c.github.io/webdriver-bidi/#command-input-performActions actions内に一連の操作を
 配列で指定できる

input.performActions ⁨ ⁩ 指定した要素へポインターを移動し、左クリック

input.performActions ⁨ ⁩ 指定した要素へポインターを移動し、左クリック puppeteerの実装を見る感じ、 指定した数字で、マウスのクリック場所が異なる

input.performActions キーボードのキーを押す

このほかにも 6 eventのサブスクライD 6 任意のJavaScriptの実) 6 preload scriptの設" 6 リクエストのインターセプ 6 ストレージ(cookie)の操& 6 ログ(console)の監視 のようなモジュールが定義されている

まとめ b WebDriver BiDiとはWebDriverを基盤として拡張された
 双方向プロトコr b 従来のWebDriverやCDPの辛みを解消したもy b 標準仕様としてクロスブラウザに対 b WebSocketによる双方向通信で安定性向˜ b DOMの監視や、コンソールのキャプチャ、
 ネットワークのインターセプトが可能C b 仕様策定に合わせて、ブラウザやツールで
 BiDiの実装が進んでいる

仕様策定と実装が進む WebDriver BiDiを試してみませんか ブラウザ側の実装も進み、気軽に試せてよかったでござる