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
   

   View Slide

2. © 2012-2019 BASE, Inc.
   © 2012-2021 BASE, Inc. 2
   BASEから3人目の刺客です
   

   View Slide

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」がリリースされました！
   

   View Slide

4. © 2012-2019 BASE, Inc.
   © 2012-2021 BASE, Inc.
   早口 Introduction
   ● UI経由のサービスだと自動ブラウザ操作ツールを使って自動テス
   トを作りたい時がある
   ● そんなときによく耳にするのは”Selenium”ですよね
   ● SeleniumをPHPで使う場合はphp-webdriver/php-webdriverが
   わりと有名です、PHPでブラウザ動かせて気持ちいい！
   ● “PHPで”って言ったけど実際どういう実装してるの？
   ● ....(thinking_face)
   4
   

   View Slide

5. © 2012-2021 BASE, Inc. 5
   作ればわかる、自作しよう
   Photo by Josue Isai Ramos Figueroa on Unsplash
   

   View Slide

6. © 2012-2021 BASE, Inc. 6
   まずはこれを見てほしい
   

   View Slide

7. © 2012-2019 BASE, Inc.
   © 2012-2021 BASE, Inc.
   自作OSSでの自動ブラウザ操作
   7
   デモンストレーション
   ● 新しくブラウザを開く
   ● example.comにアクセス
   ● “Example Domain”と表示されて
   いるか確認
   ● リンクをクリックする
   ● リンク先から別ページへ
   ● 今いるURLが期待値か
   

   View Slide

8. © 2012-2019 BASE, Inc.
   © 2012-2021 BASE, Inc.
   github.com/hgsgtk/phpwd
   8
   

   View Slide

9. © 2012-2021 BASE, Inc. 9
   “PHPで”って言ったけど
   実際どういう実装してるの？
   

   View Slide

10. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc. 10
    「ブラウザを開く → example.comにアクセスする」の流
    れを見てみましょう
    どうやってページアクセスしてるのか
    

    View Slide

11. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    chromedriver
    さぁ今回登場するのはこいつらだ
    11
    hgsgtk/phpwd
    \ 立役者たちをご紹介 /
    ※ 今回のデモンストレーションはローカルでのchromedriver起動のみをサポートしています。
    Selenium serverやSelenium Gridといった別構成には対応していませんし、今回の説明でも割愛しております。
    

    View Slide

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(); とかでいい感じにブラウザ開いてくれます。
    

    View Slide

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
    

    View Slide

14. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    chromedriver
    Entry No 3 “Browser”（ﾊﾟﾁﾊﾟﾁﾊﾟﾁ）
    14
    hgsgtk/phpwd
    Web Driver Client
    インターネットを支える立役者のブラウザさん。
    彼らの活躍は皆まで言うまい。
    Web Driver
    Browser
    

    View Slide

15. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc. 15
    さぁこのコードの先に役者たちはどんな演技を見せるの
    か
    さぁ役者は揃った
    

    View Slide

16. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    ブラウザを開くときにPHPが行うこと
    16
    

    View Slide

17. © 2012-2021 BASE, Inc. 17
    おわかりいただけただろうか
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    特定のURLにアクセスするときPHPが行うこと
    20
    

    View Slide

21. © 2012-2021 BASE, Inc. 21
    おわかりいただけただろうか
    

    View Slide

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
    

    View Slide

23. © 2012-2021 BASE, Inc. 23
    要するにWebDriver Clientとは
    HTTP Clientである
    

    View Slide

24. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    chromedriverはport 9515 で listen を開始する
    24
    chromedriverをローカルで実行してみるとわかる
    

    View Slide

25. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    chromedriverに対してCURLリクエスト
    25
    レスポンスが返ってくるとともに、
    ブラウザが開く
    

    View Slide

26. © 2012-2021 BASE, Inc. 26
    作ってわかったこと
    Photo by Josue Isai Ramos Figueroa on Unsplash
    

    View Slide

27. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    まとめ
    ● 「PHPでブラウザ自動化できるぜ」の裏側ではWeb Driverと
    HTTP通信している
    ● インターフェース仕様をなぞれば自作Web Driverが簡単に作れる
    ● 外部ライブラリ使わずにシンプルに実装したのでhgsgtk/phpwd:
    PHP WebDriver client参考あれ
    ○ curl_execマンでほぼ単一クラス内に実装してるのでおいやすいと思います
    27
    

    View Slide

28. © 2012-2021 BASE, Inc. 28
    こぼれてしまった話...
    

    View Slide

29. © 2012-2019 BASE, Inc.
    © 2012-2021 BASE, Inc.
    さらなる深みへ
    ● WebDriverの仕様・コンポーネント間の関係性にある程度理解が
    届くと、際どいふるまいに困ったときに内部実装がイメージつく
    ようになる
    ○ 各言語ライブラリの仕様なのか？Web Driverの仕様なのか？
    ○ 各ブラウザレイヤの仕様？WebDriverの仕様？
    ○ ...etc
    29
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. © 2012-2021 BASE, Inc.
    要するに、
    

    View Slide

33. © 2012-2021 BASE, Inc. 33
    4分で語れる内容じゃなかった
    （いつかほそぼそとブログあげ（るかもしれません）
    ）
    

    View Slide

34. © 2012-2021 BASE, Inc. 34
    それでは引き続き、
    らいとにんぐなとーく
    おたのしみください〜
    

    View Slide