Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTo...

ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTools Protocol

ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか?

本トークではこれらのツールの背後にいるWebDriver、Chrome DevTools Protocolsに焦点を当てます。

WebDriver、CDPとはなにか、その違い、仕様について、PHPエンジニアに身近な言語を用いて"直接"実装することを通じて解説します。

本トークを通じて直接触れることでライブラリでwrapされている裏側まで知ることできます。E2Eテスト自動化の課題に出会ったときに「裏側がこうだからたぶんこういうことだよね」と想像できるようになる、少し世界の見え方が変わる時間を提供します。

Kazuki Higashiguchi

March 28, 2022
Tweet

More Decks by Kazuki Higashiguchi

Other Decks in Technology

Transcript

  1. Agenda 1. WebDriver とは 2. PHP で WebDriver binding をスクラッチ実装する

    3. Chrome DevTools Protocol (CDP) とは 4. PHP で CDP binding をスクラッチ実装する
  2. プログラムから見たWebDriver WebDriver HTTP request HTTP response JSON ベースの HTTP API*1、各プログラミング言語でHTTP

    Clientを実装 *1 WebDriver protocol では PHP 側を Local end 、WebDriver 側を Remote end と定義しています。
  3. ブラウザから見たWebDriver WebDriver interface *1 ChromeDriver SafariDriver geckodriver IEDriver OperaDriver ※2

    *1 W3C勧告 によって、それぞれのドライバーが実装しなければならない API が定義されています。 *2 モバイルアプリのテスト自動化フレームワークである Appium では iOS 用の XCUITest Driver など Appium 自身がメンテナ ンスする独自ドライバーを実装・提供しています。
  4. Selenium WebDriver*1 仕様を使って、ブラウザを自動操作する ための仕組み - Selenium Grid: 並列実行を実現するインフラ - Selenium

    IDE:ブラウザ操作を自動記録し再生できるツール - Language bindings:各言語でのAPI実装 - WebDriver *1 Selenium が使用するプロトコルは過去に使用されていた JSON Wire Protocol Specification と、現行の W3C specification の 2 種類があります。各 binding 実装の中身では、この2つの仕様それぞれに対応したコードがちらほら実装さ れていることが見れます。
  5. WebDriverを起動する ChromeDriverを使用する場合... ローカルで起動すると、 ポート 9515 に、 APIサーバーが立ち上がる*1 *1 本例では、同一ホストシステムで立ち上げた ChromeDriver

    を直接使用する構成をとっていますが、 Remote WebDriver や Selenium Server(Grid) を用いる別のホスト内で立ち上げた WebDriver を使用する構成もあります(参考: Selenium components)。
  6. PHPで実装する 1. http://localhost:9515/session へ POST リクエスト*1を送信する 2. ChromeDriverがブラウザを開く 3. HTTPレスポンスが返却され

    Session Id が手に入る *1 W3C WebDriver プロトコルはこの一つの HTTP リクエストを Command と定義し、多くの Command 定義によって構成され ています。
  7. 開いたブラウザに対応するSession Id Session Element SessionID ElementID Session Id を指定してページ操作 -

    DOM要素を取得 - スクリーンショットを撮る - 前のページに戻る - 現在のURLを取得する - etc
  8. Chrome DevTools Protocol (CDP) Chromium*1 ・Chrome・その他Blink*2 ベースのブラウザのデバッ グ用プロトコル *1 Chromium

    はオープンソースのブラウザプロジェクトです。 Microsoft Edge や Opera など多数のブラウザで利用されていま す。 *2 Blink は Chromium によって利用されているレンダリングエンジンです。 例: - ページ遷移やスクリーンショット取得等のブラウザ操作 - JavaScriptカバレッジ等のプロファイル - パフォーマンスメトリクスの収集
  9. Chrome DevTools Protocolの使用例 Chrome DevTools - Lighthouse ページのパフォーマンス・品質改善のため のツール -

    etc ブラウザオートメーションツール - Puppeteer - Playwright - Selenium 4 *1 - etc *1 Selenium 4 にて、 Chrome DevTools Protocol に直接アクセスできる API getDevTools() と executeCdpCommand() が導 入されました。
  10. ブラウザから見たChrome DevTools Protocol Chrome DevTools Protocol Remote protocol *1 *1

    FireFoxでは Remote Protocol という低レベルのデバッグインターフェースを提供しています。デバッガである Remote Debugging Protocol を補完する立ち位置で Chrome DevTools Protocol のサブセットを実装しています。 Chromium-base
  11. WebSocket上でのコマンド送受信プロトコル JSON形式でリクエストとレスポンスを表現する JSON-RPC *1 リクエスト Members: id, method, params *1

    JSON-RPC は 1.0 と 2.0 の 2 つのバージョンがあり、2.0 ではリクエストの形式に id, method, param に加えて jsonrpc と いうメンバーが追加されています。 CDP のプロトコルは JSON-RPC 1.0 がベースとなっています。 レスポンス Members: id, result, (error)
  12. WebSocket library in PHP リポジトリ Description ratchetphp/Ratchet 非同期のWebSocketサーバー Starred: 5.7K

    beyondcode/laravel-websoc kets Laravel用のWebSocketライブラリ Starred: 4.3K Textalk/websocket-php WebSocketクライアントとサーバー両方を提供 Starred: 691 現在も定期的なメンテナンスあり
  13. コラム: プロトコル定義に基づくPHPコードの自動生成 プロトコルAPIの定義ファイル*1 - Domain: Page・DOM・Networkなど - Types: 型定義 -

    Commands: Domain内で行える操作 - Events: 送られるイベント 例:browser_protocol.json *1 browser_protocol.pdl と js_protocol.pdl という2つの定義ファイルがあり、 ChromeDevTools/devtools-protocol では JSON バージョンも公開されていま す。
  14. コラム: プロトコル定義に基づくPHPコードの自動生成 jakubkulhan/chrome-devtools-protocol のアプローチ*1 js_protocol.json JSON JSON protocol.json JSON browser_protocol.json

    定義ファイルを一つにまとめ PHPコードを生成 クラスファイル群 nette/php-generator コード生成スク リプト *1 dotNet や Go 等他言語でも同様のコード生成アプローチが取られています。
  15. 実装してみたくなったあなたへ、おすすめ資料集 - CDPの公式ドキュメントで概要を理 解する - Chrome-remote-interfaceや Puppeteerを使ってCDPに触れる - Chrome DevTools

    の Protocol monitor で流れるCDP req/resを眺 める CDPをもっと理解したい! 自分で実装してみたい! - Getting startedを読んでプロトコ ルを理解する - Vanilla-protocol-viewerを活用し てコマンドを探す - jakubkulhan/chrome-devtools-pr otocolなど既存のPHP bindingを 読んでみる