- PHP Conference Okianwa 2019 in Japan
English Title: Evolution for Browser Testing with the PHPUnit and the Selenium for PHP users.
/ / PHP カンファレンス沖縄 2019めもりーPHPer のための PHPUnit と Selenium を使った ブラウザテストのすゝめ© - BASE, Inc.
View Slide
© - BASE, Inc.Who am I?めもりー (@m m r )BASE 株式会社の基盤チームに所属しているエンジニアです。PHP, TypeScript あたりをメインに触っています。趣味はバイナリファイルを読むことです
© - BASE, Inc.登壇実績• PHP で JVM を実装して Hello World を出⼒するまで• builderscon tokyo• https://speakerdeck.com/memory /php-de-jvm-woshi-zhuang-site-hello-world-wochu-li-surumade• (前職) PHP で JVM (Java Virtual Machine) に⼊⾨する• PHPerKaigi• https://speakerdeck.com/memory /phperkaigi-• (前職) 開発期間 2 ヶ⽉で Elasticsearch をプロダクトに使ってリリースした話• PHP カンファレンス仙台 2019• https://speakerdeck.com/memory /php-conference-sendai- -presentation-slides
© - BASE, Inc.みなさんテスト書いてますか？
© - BASE, Inc.歴史のあるサービスのテスト書くの ⾟くないですか？
© - BASE, Inc.でも、⼤丈夫です
© - BASE, Inc.そう、PHPUnit と Selenium を 使えばね
© - BASE, Inc.本⽇のお品書き
© - BASE, Inc.本⽇のお品書き課題の解決⽅法我々の抱えている課題Selenium を導⼊するには？
© - BASE, Inc.本⽇のお品書きどうテストを書いていくかSelenium を使うことによって得られる恩恵実際に Selenium を導⼊して運⽤した話
© - BASE, Inc.我々の抱えている課題
© - BASE, Inc.我々の抱えている課題• JavaScript でレンダリングされるようなフォームのテストが⾟い• フロントエンドとバックエンドが密結合なため、テストが書けない、QA が⾟い• 1 つ実装したら 2 つバグがでる
© - BASE, Inc.課題の解決⽅法
© - BASE, Inc.課題の解決⽅法• フロントエンドとバックエンドは疎結合にして対象の関⼼事を減らした上でテストを書くのが望ましい• とはいえ、いきなりそのテストが書けるかというと NO に近い
© - BASE, Inc.課題の解決⽅法• 段階を踏んで、リファクタリングやリプレイスなどを⾏っていく• Selenium を使うことにより、密結合になっているサービスを分離したり、テストのリファクタリングなどが⾏えるようになる• さらに E E ⽤のテストツールとしても担える
© - BASE, Inc.Selenium を導⼊するには？
© - BASE, Inc.そもそも Selenium とは？
© - BASE, Inc.Selenium とは？• Web アプリケーションのテストツールのこと• テストツールではあるが、ブラウザにレンダリングされている画⾯のスクリーンショットを撮ったりもできる• PHP で使⽤するには Facebook 社が公開している facebook/webdriver を⽤いるGitHub: https://github.com/facebook/php-webdriver
© - BASE, Inc.Selenium で出来ること
© - BASE, Inc.Selenium で出来ること• フォーム⼊⼒の⾃動化 • ページ遷移後のテスト• 各ブラウザ (IE, Firefox, Chrome など)でのレンダリング結果の確認• JavaScript の実⾏
© - BASE, Inc.などなど… 上げたらキリがない
© - BASE, Inc.Selenium を使うことによって 得られる恩恵
© - BASE, Inc.Selenium を使うことによって得られる恩恵• JavaScript で⽣成されるような DOM でもテストできる• フロントエンドとバックエンドが密結合であってもテスト可能である• インテグレーションテストからリグレッションテストの⾃動化が出来る
© - BASE, Inc.Selenium を使うことによって得られる恩恵• 各ブラウザでの表⽰崩れなどをスクリーンショットを⽐較することにより検知できる• ただし、 reCAPTCHA のような画像認証は難しいので、⼯夫が必要• Standalone の Node 版の特定のバージョンだとブラウザが起動できないバグがあるので Java版を使うのが無難
© - BASE, Inc.どういう仕組み？
© - BASE, Inc.PHPUnitPHP ContainerSeleniumStandaloneSelenium ContainerChromeFacebookWebDriverどういう仕組み？Web Page( ) Hub につないだり、JSの 実⾏や要素の探索などをする(2) セッションを作成する(3) 現在のレンダリングの 状態を取得 (4) セッションの情報を返す( ) PHPUnit 側に 実⾏結果を返す(5) 実⾏結果を返す
© - BASE, Inc.どうテストを書いていくか
© - BASE, Inc.Selenium の導⼊
© - BASE, Inc.Selenium の導⼊• Chrome の Standalone 版の Selenium を使⽤する ※今回は Headless は使わない• Docker で導⼊するととても楽なので Dockerを使⽤する
© - BASE, Inc.今回使うサンプル
© - BASE, Inc.今回使うサンプル• 今回使うサンプルは下記の通り
© - BASE, Inc.サンプルコードはこちらhttps://github.com/memory-agape/php-conference-webdriver-testing
© - BASE, Inc.PHPUnit にテストを書いていく
© - BASE, Inc.はじめかた
© - BASE, Inc.たったこれだけ
© - BASE, Inc.composer require facebook/php-webdriverGitHub: https://github.com/facebook/php-webdriver※ Docker ্Ͱಈ͔͞ͳ͍߹ɺ Selenium ͷ Standalone ͕ผ్ඞཁͰ͢ɻ
© - BASE, Inc.WebDriver の準備
© - BASE, Inc.WebDriver の準備Selenium の Hub を指定
© - BASE, Inc.WebDriver の準備Chrome のバイナリまでの絶対パスを指定する
© - BASE, Inc.WebDriver の準備ローカルだとSSL の認証の問題があるためエラーを無視するようにする
© - BASE, Inc.WebDriver の準備リンク先の⽣存判定をしないようにする
© - BASE, Inc.WebDriver の準備Selenium から実⾏する JavaScript の挙動が安定しない場合はサンドボックスを無効にする
© - BASE, Inc.テスト対象のページをつくる
© - BASE, Inc.テスト対象のページをつくる• JavaScript でフォーム内に DOM を追加するようなよくあるページにする• 該当のフォームの値が送られて来ていない場合、エラーを表⽰するようにする
© - BASE, Inc.テスト対象のページをつくる送られていなければ 「added_by_js が送られてきていません」と 表⽰をする。added_by_js というパラメータが送られてきていれば 「⼊⼒されたメッセージ」+「が送られてきました」 と表⽰する
© - BASE, Inc.テスト対象のページをつくるadded_by_js という名前がある input を JavaScript で 動的にフォームへ追加する
© - BASE, Inc.実際にテストを書いていく
© - BASE, Inc.実際にテストを書いていく• 2 パターンのテストを書く• added_by_js という名前のパラメータが送られてきた場合• 該当のパラメータが送られてきていない場合
© - BASE, Inc.パラメータが正常に送られてきた場合
© - BASE, Inc.パラメータが正常に送られてきた場合ページに接続する
© - BASE, Inc.パラメータが正常に送られてきた場合DOM がレンダリングされるのを待つ
© - BASE, Inc.パラメータが正常に送られてきた場合input の要素を探す
© - BASE, Inc.パラメータが正常に送られてきた場合Hello World! という⽂字列を⼊⼒する
© - BASE, Inc.パラメータが正常に送られてきた場合Submit ボタンを探す
© - BASE, Inc.パラメータが正常に送られてきた場合Submit ボタンをクリック (onSubmit を発⽕)させる
© - BASE, Inc.パラメータが正常に送られてきた場合ページが切り替わるのを待つ
© - BASE, Inc.パラメータが正常に送られてきた場合表⽰されるメッセージの要素を探す
© - BASE, Inc.パラメータが正常に送られてきた場合表⽰されている⽂字列が正しいかどうかをテストする
© - BASE, Inc.パラメータが送られてきていない場合
© - BASE, Inc.パラメータが送られてきていない場合ページに接続する
© - BASE, Inc.パラメータが送られてきていない場合DOM がレンダリングされるのを待つ
© - BASE, Inc.パラメータが送られてきていない場合JavaScript で動的に追加された input を消す
© - BASE, Inc.パラメータが送られてきていない場合Submit ボタンを探す
© - BASE, Inc.パラメータが送られてきていない場合Submit ボタンをクリック (onSubmit を発⽕)させる
© - BASE, Inc.パラメータが送られてきていない場合ページが切り替わるのを待つ
© - BASE, Inc.パラメータが送られてきていない場合表⽰されている⽂字列が正しいかどうかをテストする
© - BASE, Inc.うまくいくと…
© - BASE, Inc.
© - BASE, Inc.テストが通って、 Selenium が 正常に動いていることがわかります。
© - BASE, Inc.エラーのあるページの チェックをする
© - BASE, Inc.エラーのあるページをチェックする• 404 や 500 のあるページを Selenium で検出する• このチェックを⾏うことでリンク切れの検出が可能になります• 他にも PHP のバージョンアップなどで動かないページの検出などの⽤途などにも活⽤できます
© - BASE, Inc.エラーのあるページをチェックする• Selenium 単体ではステータスコードのチェックができないっぽい• そのため、 cURL や Guzzle などステータスコードが取れるアプローチを取る
© - BASE, Inc.エラーのあるページをチェックする
© - BASE, Inc.エラーのあるページをチェックするページに接続する
© - BASE, Inc.エラーのあるページをチェックするアンカーリンクを取得する
© - BASE, Inc.エラーのあるページをチェックするGuzzle の準備をする
© - BASE, Inc.エラーのあるページをチェックするそれぞれのアンカーリンクを処理する
© - BASE, Inc.エラーのあるページをチェックするアンカーリンクの href 属性を取得する
© - BASE, Inc.エラーのあるページをチェックするGuzzle で該当の URL にアクセスしてステータスコードを取得する
© - BASE, Inc.エラーのあるページをチェックするステータスコードが 400 以上の場合は該当のURLを 含めたエラーメッセージを表⽰する
© - BASE, Inc.実際に Selenium を導⼊して 運⽤した話
© - BASE, Inc.どういったケースで導⼊したのか？
© - BASE, Inc.（注）BASE の話ではありません
© - BASE, Inc.どういったケースで導⼊したのか？• 1 つ実装すると 2 つバグがでる状態だった。• フレームワークを使っているはずなのに、⼀部の機能がなぜか、フレームワーク外のcommon.php 書かれていた。• しかもその common.php はすべてのファイルに require されていた• テスト⾃体存在してない
© - BASE, Inc.どういったケースで導⼊したのか？• common.php の何を使っていて何を使っていないのか本当に分からない。• スタートアップだったため QA なんて仕組みは1 ミリもなかったPHPUnit + Selenium を導⼊して該当箇所のテストを⾃動化して、リファクタリングを⾏う
© - BASE, Inc.テストが担保できたため、 ほぼバグが発⽣することはなくなった
© - BASE, Inc.&&
© - BASE, Inc.謎の common.php から 完全ではないが分離していけた
© - BASE, Inc.DEMO
© - BASE, Inc.まとめ
© - BASE, Inc.まとめ• Selenium は PHP でも動かせるし、PHPUnitと⼀緒に使うことができる• テストが書きづらい状態でも Selenium を使えば、ある程度は担保することができるようになる• QA が難しい環境でも Selenium である程度担保できる
© - BASE, Inc.Selenium はいいぞ
© - BASE, Inc.以上です
© - BASE, Inc.THANK YOU FOR YOUR LISTENING
memory1994
kypkyp
efbmzwyk999
beenos
shimabox
mascii
star_zero
ari_mharada
ivargrimstad
tonkotsuboy_com
pospome
uhooi
kotomin_m
searls
afnizarnur
bkeepers
quramy
marcelosomers
cromwellryan
kastner
keavy
jponch
malarkey
sugarenia
mza