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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

© 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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

© 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

Slide 19

Slide 19 text

© 2012-2019 BASE, Inc. © 2012-2021 BASE, Inc. HTTPで受け付けるのはWebDriverの仕様 WebDriverの仕様はW3C Working Draft 21にある “WebDriverのリモートエンドは、エンドポイントが異なるコマンドに対応するHTTP準拠のワイヤプロトコルを提供する必要があります。” https://w3c.github.io/webdriver/#protocol 19

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

© 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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

© 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

Slide 31

Slide 31 text

© 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