WebDriver BiDiとは何なのか

Burikaigi2025発表資料

Transcript

1. 2025/02/01 BuriKaigi 2025 WebDriver BiDiとは 何なのか
2. nus3（なすさん）
3. 今日話したいこと  ブラウザ自動化ツールのこれまで  WebDriver BiDiについて P WebDriver BiDiの現状 P WebDriver BiDiを試してみる
4. 今日話したいこと # ブラウザ自動化ツールのこれまで 7 WebDriver BiDiについて P WebDriver BiDiの現状 P WebDriver BiDiを試してみる
5. なぜブラウザ自動化ツールの これまでについて話すのか？
6. WebDriver BiDiの誕生に 大きく関わるからである！
7. ということで、 ブラウザ自動化ツールの これまでについて
8. https://developer.chrome.com/blog/test-automation-evolution WebdriverIO Appium Protractor Nightwatch Testcafe Cypress Puppeteer Playwright JavaScriptの発展により 多くのブラウザ自動化ツールが誕生
9. Vitest (Browser Mode) Vitest (Browser Mode) Playwright WebdriverIO 最近だと、 フロントエンドのコンポーネントを対象にしたテストにも ブラウザ自動化ツールは使われている
10. ブラウザ自動化ツールは どのようにしてブラウザ外から ブラウザを操作しているのか？ Cypressのようにブラウザ内から操作してる場合もあるでござる
11. これまで ブラウザ自動化ツールが 外部プロセスからブラウザを
 操作する方法は2パターンあった
12. WebDriver p 外部プロセスからブラウザを操作するためのインタ フェーr p 2018年にW3Cにより標準仕様になっe p 主要なブラウザでサポートされていY p ツールとブラウザ（Driver）間はHTTPでやりと p 以下のツールで採 p WebdriverI p Selenium
13. https://developer.chrome.com/blog/test-automation-evolution WebDriver
14. Chrome DevTools Protocol(CDP) x Chromiumベースのブラウザを操作するための
 プロトコ‘ x ツールとブラウザ間はWebSocketを通してやりと5 x FirefoxではCDPのサブセットを実装することで
 サポーY x 以下のツールで採! x Playwrigh8 x Puppetee@ x Selenium WebdriverIOでもv8までサポートしてたようでござる
15. https://developer.chrome.com/blog/test-automation-evolution Chrome DevTools Protocol(CDP)
16. WebDriver CDP " クロスブラウザのサポート @ Chromiumベースのブラウザ
 (Firefoxで一部サポート) " 標準仕様 @ 標準仕様ではない @ ツールとブラウザ間はHTTPで
 やりとり " ツールとブラウザ間はWebSocoketで やりとり " consoleのキャプチャやネットワーク のinterceptなどが可能 @ 発生するイベントをリアルタイムに
 受け取るのが困‘ @ ポーリングなどの対応が必要 " 発生するイベントをリアルタイムに
 受け取れÇ " ブラウザテストの自動化の観点
 からも信頼性、安定性がある
17. 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が動作することが保証できず、
 ユーザーに混乱が生じた
18. ブラウザとツールベンダが
 本当に欲しかったもの G クロスブラウザサポー' G 標準仕A G ツールとブラウザ間は双方向通r G consoleのキャプチャやネットワークのインターセプト などができる
19. そこで WebDriver BiDi ですよ！
20. 今日話したいこと  ブラウザ自動化ツールのこれまで 7 WebDriver BiDiについて P WebDriver BiDiの現状 P WebDriver BiDiを試してみる
21. WebDriver BiDiのはじまり TPAC2019でWebDriverでの双方向通信について議論 chromedriverチームが クライアントとブラウザ間で双方向通信できる
 設計案とプロトタイプ実装に取り組んでいた https://docs.google.com/document/d/1gUm7Be-akW2-4mjr15cnZlzwoAfOlfL7b3tWCDrb1Jg/edit?tab=t.0
22. 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の先駆けに
23. 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のキャプチャやネットワークのインターセプト といったシナリオをサポート
24. WebDriver BiDiとは https://developer.chrome.com/blog/webdriver-bidi i Working groupにはブラウザベンダ、
 自動ツールベンダー、テストプロバイダーなどが参加
25. 仕様策定に合わせて、 一部のブラウザやツールベンダが WebDriver BiDiの実装を進めている
26. 今日話したいこと  ブラウザ自動化ツールのこれまで  WebDriver BiDiについて P WebDriver BiDiの現状 f WebDriver BiDiを試してみる
27. 各ブラウザのサポート状況 3 Chrome、Edge、Firefoxでの実装が進んでいる https://wpt.fyi/results/webdriver/tests/bidi?label=experimental&label=master&aligned&q=tests%2Fbidi
28. Firefox 8 Firefox129以降、CDPのサポートがdeprecate 8 代わりにWebDriver BiDiへの移行を推奨 https://fxdx.dev/deprecating-cdp-support-in-firefox-embracing-the-future-with-webdriver-bidi/
29. Safari(WebKit) 4 WebKitのWebDriver BiDi実装はIgaliaが推進 https://people.igalia.com/lmoura/wkcm-2024/webdriver-bidi-webkit.html IgaliaはWeb標準の仕様策定もだし、Web標準を推進するために
 各ブラウザエンジンへの実装も進めるすごい人たちってイメージがあるでござる
30. ブラウザ自動化ツールの対応状況 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
31. FirefoxやChromeでは WebDriver BiDiを試せそう
32. 今日話したいこと  ブラウザ自動化ツールのこれまで  WebDriver BiDiについて P WebDriver BiDiの現状 f WebDriver BiDiを試してみる
33. WebDriver BiDiを使って 外部プロセス（自作したCLIツール）から
 Firefoxを操作してみる
34. 実際に作ったもの https://github.com/nus3/bidi-client
35. 実際に作ったもの フォーム画面をCLIから操作
36. 実際に作ったもの CLIから以下の操作ができるよう4 1 画面遷7 1 input要素に値を入# 1 ボタンのクリッ 1 イベントのsubscribe
37. CLIツールからFirefoxを操作してみる Firefoxを オプションを
 指定して起動する --remote-debugging-port (macOSでFirefoxをすでにインストールしている場合) https://wiki.mozilla.org/Firefox/CommandLineOptions https://firefox-source-docs.mozilla.org/remote/cdp/Usage.html
38. 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の接続先が作られる
39. CLIツールからFirefoxを操作してみる Firefoxを オプションを
 指定して起動する --remote-debugging-port RemoteAgentが起動していることが 確認できる
40. CLIツールからFirefoxを操作してみる CLIツール(Deno)からFirefoxへWebSocket接続する こういったCLIツールをお手軽に作れるDenoが好きでござる https://docs.deno.com/examples/websocket/
41. CLIツールからFirefoxを操作してみる https://www.w3.org/TR/webdriver-bidi/#commands クライアント(CLI)からブラウザ(Firefox)へは
 WebSocketを介してCommandを送信
42. CLIツールからFirefoxを操作してみる Commandの実行結果は非同期で受け取る
43. CLIツールからFirefoxを操作してみる Commandを送信
44. CLIツールからFirefoxを操作してみる Commandの実行結果を受け取る
45. WebDriver BiDiで指定できる
 Commandの一例 Working Draftの仕様なので、内容は変わる可能性があるでござる
46. session.new BiDiセッションを新たに作成する https://w3c.github.io/webdriver-bidi/#command-session-new
47. browsingContext.getTree ⁨⁩対象ブラウザのコンテキストを取得する https://w3c.github.io/webdriver-bidi/#command-browsingContext-getTree 今回は、このコンテキストを使って ブラウザの操作をしていく
48. browsingContext.navigate ⁨⁩指定したURLに遷移する https://w3c.github.io/webdriver-bidi/#command-browsingContext-navigate
49. browsingContext.locateNodes ⁨⁩指定した要素を取得する https://w3c.github.io/webdriver-bidi/#command-browsingContext-locateNodes
50. input.performActions ⁨ ⁩ 指定した要素へポインターを移動 https://w3c.github.io/webdriver-bidi/#command-input-performActions
51. input.performActions ⁨ ⁩ 指定した要素へポインターを移動 https://w3c.github.io/webdriver-bidi/#command-input-performActions actions内に一連の操作を
 配列で指定できる
52. input.performActions ⁨ ⁩ 指定した要素へポインターを移動し、左クリック
53. input.performActions ⁨ ⁩ 指定した要素へポインターを移動し、左クリック puppeteerの実装を見る感じ、 指定した数字で、マウスのクリック場所が異なる
54. input.performActions キーボードのキーを押す
55. このほかにも 6 eventのサブスクライD 6 任意のJavaScriptの実) 6 preload scriptの設" 6 リクエストのインターセプ 6 ストレージ(cookie)の操& 6 ログ(console)の監視 のようなモジュールが定義されている
56. まとめ b WebDriver BiDiとはWebDriverを基盤として拡張された
 双方向プロトコr b 従来のWebDriverやCDPの辛みを解消したもy b 標準仕様としてクロスブラウザに対 b WebSocketによる双方向通信で安定性向˜ b DOMの監視や、コンソールのキャプチャ、
 ネットワークのインターセプトが可能C b 仕様策定に合わせて、ブラウザやツールで
 BiDiの実装が進んでいる
57. 仕様策定と実装が進む WebDriver BiDiを試してみませんか ブラウザ側の実装も進み、気軽に試せてよかったでござる