Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

PHPer のための PHPUnit と Selenium を使った
ブラウザテストのすゝめ

memory
October 12, 2019

PHPer のための PHPUnit と Selenium を使った
ブラウザテストのすゝめ

- PHP Conference Okianwa 2019 in Japan

English Title:
Evolution for Browser Testing with the PHPUnit and the Selenium for PHP users.

memory

October 12, 2019
Tweet

More Decks by memory

Other Decks in Programming

Transcript

  1. / / PHP カンファレンス沖縄 2019 めもりー PHPer のための PHPUnit と

    Selenium を使った
 ブラウザテストのすゝめ © - BASE, Inc.
  2. © - BASE, Inc. Who am I? めもりー (@m m

    r ) BASE 株式会社の基盤チームに所属している エンジニアです。 PHP, TypeScript あたりをメインに触ってい ます。 趣味はバイナリファイルを読むことです
  3. © - 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
  4. © - BASE, Inc. 我々の抱えている課題 • JavaScript でレンダリングされるようなフォー ムのテストが⾟い •

    フロントエンドとバックエンドが密結合なた め、テストが書けない、QA が⾟い • 1 つ実装したら 2 つバグがでる
  5. © - BASE, Inc. 課題の解決⽅法 • 段階を踏んで、リファクタリングやリプレイス などを⾏っていく • Selenium

    を使うことにより、密結合になって いるサービスを分離したり、テストのリファク タリングなどが⾏えるようになる • さらに E E ⽤のテストツールとしても担える
  6. © - BASE, Inc. Selenium とは? • Web アプリケーションのテストツールのこと •

    テストツールではあるが、ブラウザにレンダリ ングされている画⾯のスクリーンショットを 撮ったりもできる • PHP で使⽤するには Facebook 社が公開してい る facebook/webdriver を⽤いる GitHub: https://github.com/facebook/php-webdriver
  7. © - BASE, Inc. Selenium で出来ること • フォーム⼊⼒の⾃動化
 • ページ遷移後のテスト

    • 各ブラウザ (IE, Firefox, Chrome など)でのレ ンダリング結果の確認 • JavaScript の実⾏
  8. © - BASE, Inc. Selenium を使うことによって得られる恩恵 • JavaScript で⽣成されるような DOM

    でもテス トできる • フロントエンドとバックエンドが密結合であっ てもテスト可能である • インテグレーションテストからリグレッション テストの⾃動化が出来る
  9. © - BASE, Inc. Selenium を使うことによって得られる恩恵 • 各ブラウザでの表⽰崩れなどをスクリーン ショットを⽐較することにより検知できる •

    ただし、 reCAPTCHA のような画像認証は難し いので、⼯夫が必要 • Standalone の Node 版の特定のバージョンだ とブラウザが起動できないバグがあるので Java 版を使うのが無難
  10. © - BASE, Inc. PHPUnit PHP Container Selenium Standalone Selenium

    Container Chrome Facebook WebDriver どういう仕組み? Web Page ( ) Hub につないだり、JSの
 実⾏や要素の探索などをする (2) セッションを作成する (3) 現在のレンダリングの
 状態を取得 (4) セッションの情報を返す ( ) PHPUnit 側に
 実⾏結果を返す (5) 実⾏結果を返す
  11. © - BASE, Inc. Selenium の導⼊ • Chrome の Standalone

    版の Selenium を使⽤ する 
 ※今回は Headless は使わない • Docker で導⼊するととても楽なので Docker を使⽤する
  12. © - BASE, Inc. composer require facebook/php-webdriver GitHub: https://github.com/facebook/php-webdriver ※

    Docker ্Ͱಈ͔͞ͳ͍৔߹͸ɺ Selenium ͷ Standalone ͕ผ్ඞཁͰ͢ɻ
  13. © - BASE, Inc. テスト対象のページをつくる • JavaScript でフォーム内に DOM を追加するよ

    うなよくあるページにする • 該当のフォームの値が送られて来ていない場 合、エラーを表⽰するようにする
  14. © - BASE, Inc. テスト対象のページをつくる 送られていなければ
 「added_by_js が送られてきていません」と
 表⽰をする。 added_by_js

    というパラメータが送られてきていれば
 「⼊⼒されたメッセージ」+「が送られてきました」 と表⽰する
  15. © - BASE, Inc. 実際にテストを書いていく • 2 パターンのテストを書く • added_by_js

    という名前のパラメータが送ら れてきた場合 • 該当のパラメータが送られてきていない場合
  16. © - BASE, Inc. エラーのあるページをチェックする • 404 や 500 のあるページを

    Selenium で検出す る • このチェックを⾏うことでリンク切れの検出 が可能になります • 他にも PHP のバージョンアップなどで動かな いページの検出などの⽤途などにも活⽤でき ます
  17. © - BASE, Inc. どういったケースで導⼊したのか? • 1 つ実装すると 2 つバグがでる状態だった。

    • フレームワークを使っているはずなのに、⼀部 の機能がなぜか、フレームワーク外の common.php 書かれていた。 • しかもその common.php はすべてのファイル に require されていた • テスト⾃体存在してない
  18. © - BASE, Inc. どういったケースで導⼊したのか? • common.php の何を使っていて何を使ってい ないのか本当に分からない。 •

    スタートアップだったため QA なんて仕組みは 1 ミリもなかった PHPUnit + Selenium を導⼊して該当箇所の テストを⾃動化して、リファクタリングを⾏う
  19. © - BASE, Inc. まとめ • Selenium は PHP でも動かせるし、PHPUnit

    と⼀緒に使うことができる • テストが書きづらい状態でも Selenium を使え ば、ある程度は担保することができるようにな る • QA が難しい環境でも Selenium である程度担 保できる