PHPでWeb Driver Clientを自作する〜己の手でブラウザ操作自動化を完全理解する方法〜 / phpcon2021

昨今のE2Eレベルのテストではその自動化テストのツールとしてSeleniumに代表されるようなブラウザ操作ライブラリが使われます。

Seleniumなどを使ったことがある人は多いでしょう？ではその裏側で行われている仕様については知ってますでしょうか？

本トークでは、PHPで実際にSeleniumのようにブラウザを動かすツールを自作するプロセスでそれらの仕様を理解する場を提供します。本トークで得られることは以下です。

ブラウザ操作するために必要なWebDriver
WebDriverについてのW3C勧告の標準化仕様
WebDriver Wire ProtocolというInterface仕様
PHPでWebDriverとコミュニケーションをしブラウザを動かす方法
本トークを経て、WebDriverについての理解が深まることで、ブラウザ操作の自動化についての技術的理解が一段深まるお得な4分間にいたします。

Transcript

1. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 〜己の手でブラウザ操作自動化を完全理解する方法〜 PHPでWeb Driver Clientを自作する 1 2021.10.03 PHP Conference Japan 2021 @hgsgtk Kazuki Higashiguchi
2. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 2 BASEから3人目の刺客です
3. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. ソフトウェア品質へ意識高めのSoftware engineer BASE BANK, Inc. Engineering Manager @hgsgtk Kazuki Higashiguchi 3 3 https://cp.thebase.in/basecard PHP Conference専用に meety公開してます 「BASE Card」がリリースされました！
4. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 早口 Introduction • UI経由のサービスだと自動ブラウザ操作ツールを使って自動テス トを作りたい時がある • そんなときによく耳にするのは”Selenium”ですよね • SeleniumをPHPで使う場合はphp-webdriver/php-webdriverが わりと有名です、PHPでブラウザ動かせて気持ちいい！ • “PHPで”って言ったけど実際どういう実装してるの？ • ....(thinking_face) 4
5. © 2012-2021 BASE, Inc. 5 作ればわかる、自作しよう Photo by Josue Isai Ramos Figueroa on Unsplash
6. © 2012-2021 BASE, Inc. 6 まずはこれを見てほしい
7. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 自作OSSでの自動ブラウザ操作 7 デモンストレーション • 新しくブラウザを開く • example.comにアクセス • “Example Domain”と表示されて いるか確認 • リンクをクリックする • リンク先から別ページへ • 今いるURLが期待値か
8. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. github.com/hgsgtk/phpwd 8
9. © 2012-2021 BASE, Inc. 9 “PHPで”って言ったけど 実際どういう実装してるの？
10. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 10 「ブラウザを開く → example.comにアクセスする」の流 れを見てみましょう どうやってページアクセスしてるのか
11. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriver さぁ今回登場するのはこいつらだ 11 hgsgtk/phpwd \ 立役者たちをご紹介 / ※ 今回のデモンストレーションはローカルでのchromedriver起動のみをサポートしています。 Selenium serverやSelenium Gridといった別構成には対応していませんし、今回の説明でも割愛しております。
12. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriver Entry No 1 “Web Driver Client” （ﾊﾟﾁﾊﾟﾁﾊﾟﾁ） 12 hgsgtk/phpwd Web Driver Client Web Driver Clientは、私たちテスト自動化エンジニアのために、使い勝手がいい 感じのPHPライブラリとして働いてくれてます。 $driver->openBrowser(); とかでいい感じにブラウザ開いてくれます。
13. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriver Entry No 2 “Web Driver”（ﾊﾟﾁﾊﾟﾁﾊﾟﾁ） 13 hgsgtk/phpwd Web Driver Client Web Driverは実際にブラウザを操作してくれる子です Chromeのためのchromedriver、Firefoxのためのgeckodriverなど、各ブラウザ ごとに対応したDriverがある Web Driver
14. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriver Entry No 3 “Browser”（ﾊﾟﾁﾊﾟﾁﾊﾟﾁ） 14 hgsgtk/phpwd Web Driver Client インターネットを支える立役者のブラウザさん。 彼らの活躍は皆まで言うまい。 Web Driver Browser
15. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 15 さぁこのコードの先に役者たちはどんな演技を見せるの か さぁ役者は揃った
16. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. ブラウザを開くときにPHPが行うこと 16
17. © 2012-2021 BASE, Inc. 17 おわかりいただけただろうか
18. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriver ブラウザを開くときにPHPが行うこと 18 hgsgtk/phpwd Web Driver Client Web Driver Browser phpwdはHTTPリクエスト(POST)を送信している。 ただそれだけ。 HTTP POST http://localhost:9515/session
19. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. HTTPで受け付けるのはWebDriverの仕様 WebDriverの仕様はW3C Working Draft 21にある “WebDriverのリモートエンドは、エンドポイントが異なるコマン ドに対応するHTTP準拠のワイヤプロトコルを提供する必要があり ます。” https://w3c.github.io/webdriver/#protocol 19
20. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 特定のURLにアクセスするときPHPが行うこと 20
21. © 2012-2021 BASE, Inc. 21 おわかりいただけただろうか
22. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriver 特定のURLにアクセスするときPHPが行うこと 22 hgsgtk/phpwd Web Driver Client Web Driver Browser phpwdはHTTPリクエスト(POST)を送信している。 ただそれだけ。 HTTP POST http://localhost:9515/session/$SESSIONID/url
23. © 2012-2021 BASE, Inc. 23 要するにWebDriver Clientとは HTTP Clientである
24. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriverはport 9515 で listen を開始する 24 chromedriverをローカルで実行してみるとわかる
25. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. chromedriverに対してCURLリクエスト 25 レスポンスが返ってくるとともに、 ブラウザが開く
26. © 2012-2021 BASE, Inc. 26 作ってわかったこと Photo by Josue Isai Ramos Figueroa on Unsplash
27. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. まとめ • 「PHPでブラウザ自動化できるぜ」の裏側ではWeb Driverと HTTP通信している • インターフェース仕様をなぞれば自作Web Driverが簡単に作れる • 外部ライブラリ使わずにシンプルに実装したのでhgsgtk/phpwd: PHP WebDriver client参考あれ ◦ curl_execマンでほぼ単一クラス内に実装してるのでおいやすいと思います 27
28. © 2012-2021 BASE, Inc. 28 こぼれてしまった話...
29. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. さらなる深みへ • WebDriverの仕様・コンポーネント間の関係性にある程度理解が 届くと、際どいふるまいに困ったときに内部実装がイメージつく ようになる ◦ 各言語ライブラリの仕様なのか？Web Driverの仕様なのか？ ◦ 各ブラウザレイヤの仕様？WebDriverの仕様？ ◦ ...etc 29
30. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 4分からこぼれた詳細たち • SeleniumとWebDriver、その長い歴史的経緯について • WebDriver nodesというW3C仕様に定義された各コンポーネントの責務 • ブラウザを開く際に用いるsessionとはなにか？ • POST /session時に各ブラウザごとの起動オプションを capabilities として指定 しますね、httpProxyというとっても混同しやすい設定項目について語ります。 • 要素を取得する際の4つのselectorType(ex. css selector)がどのように定義され ているのか？ • ブラウザを操作するためのAPI endpointにはどういうものがあるのか？Interface 定義詳説。 30
31. © 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. 4分からこぼれた詳細たち • headlessはじゃあどのレイヤでどうハンドリングして実装してるの？ • 画面スクショ取るやつ、あれはどうなの？誰が提供してる機能？ • WebDriver Client <-> WebDriver間にproxyを挟むような実装は各言語特有の都 合が大きい話 • WebDriverの仕様が分かればBDDツールへのコントリビュートとかがやりやすく なる ◦ Codeception/module-webdriver: feat: new option webdriver_proxy to tunnel requests to the remote Server • ...etc 31
32. © 2012-2021 BASE, Inc. 要するに、
33. © 2012-2021 BASE, Inc. 33 4分で語れる内容じゃなかった （いつかほそぼそとブログあげ（るかもしれません） ）
34. © 2012-2021 BASE, Inc. 34 それでは引き続き、 らいとにんぐなとーく おたのしみください〜