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

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

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

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

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

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

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

88964b936e864ca7d326272eaa70fa9a?s=128

Kazuki Higashiguchi

October 03, 2021
Tweet

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 それでは引き続き、 らいとにんぐなとーく おたのしみください〜