Selenium
E2Eテスト

Ghost Inspector を使って E2E テストしてみる

この記事は Selenium/Appium Advent Calendar 2017 の24日目の記事です.

初めて Advent Calendar に参加します.
よろしくお願いします.

Ghost Inspector とは

テストを作成する方法

  1. Google Chrome ブラウザに Ghost Inspector の拡張機能をインストールする.
    (Selenium IDE では Firefox の拡張機能をインストールしますが,Ghost Inspector は Chrome を利用します.)
  2. "Create Test Suite" から,テスト・スイートを作成する.
  3. 作成したテスト・スイートに対し,"Create New Test" からテストを追加する.
  4. Google Chrome で実際にサイトにアクセスすることで拡張機能により操作を記録し,テストを保存する.
  5. 作成されたテストに対し,必要ならば "Edit Steps" から不要なステップを削除したり,アサーションを調整する.
    (操作時のマウスの迷いなどで不要なステップが追加されることがあるので.)

継続的インテグレーション(CI)の利用

Ghost Inspector 自体がテスト・セットを管理する機能を持っており,
GitHub, CircleCI, Jenkins などから Webhook API を通して,そのテストを実行を実行することが可能です.

Jenkins の場合は,プラグインを使った方法もあるようです.

テストの結果を Slack へ通知することも簡単な設定で可能です.

参考)
https://ghostinspector.com/docs/integration/

価格

プラン 価格 テスト実行可能回数 メンバー数
Free プラン 無料 100テスト/月 1名
Small プラン 71ドル 10,000テスト/月 5名
Medium プラン 179ドル 40,000テスト/月 20名
Large プラン 359ドル 100,000テスト/月 40名

※ 「テスト実行可能回数」はテスト・スイートに含まれているテストの数で計算されます.つまり,例えば 15 テスト含まれている 1つのテスト・スイートを実行したときは,実行回数は 15 費やされます.
※ 現在の利用回数は "Account Settings > Usage" から確認できます.

参考)
https://ghostinspector.com/pricing/

ローカルのマシンに対してテストするには

作成中のテストを,本番環境ではなく自分のローカルのマシンの開発環境に対して実行してみたくなると思います.
外部に公開されていないローカルのマシンに対してテストすることは,
ngrok を使うことで可能です.

参考)
Executing Tests on Local and Firewalled Websites
https://ghostinspector.com/docs/test-local-and-firewalled-websites/

Ghost Inspector の逆引きTips

こんなことしたい こうすればいいよ
ユーザー登録に使用するメールアドレスを一意にしたい 組み込み変数の TIMESTAMP か ALPHANUMERIC を使う https://ghostinspector.com/docs/variables/#builtin
テスト中にメールアドレス等を変数に入れて共通化したい "Set Variable" アクションを使う https://ghostinspector.com/docs/variables/#set
テスト中にスタートページに戻りたい "Go to URL" アクションで行き先を startUrl 変数にする
ユーザー登録のような複数のテストに出てくる処理をまとめたい 他のテストをインポートする機能を使う https://ghostinspector.com/docs/modularizing-tests/
User Agent を変更してモバイルでテストしたい Settings で変更できる https://ghostinspector.com/docs/test-settings/#browser
メールが送られたことをテストしたい Ghost Inspector に機能あり https://ghostinspector.com/docs/check-email/
ファイルのアップロードをしたい Ghost Inspector に機能あり https://ghostinspector.com/docs/uploading-files/
ドラッグ&ドロップしたい Ghost Inspector に機能あり https://ghostinspector.com/docs/drag-and-drop/
テストを定期的に実行したい Ghost Inspector にスケジューリング実行の機能がある https://ghostinspector.com/docs/test-schedule/
テストを任意のタイミングで実行したい Ghost Inspector に API があるのでそれを呼び出す https://ghostinspector.com/docs/api/suites/#execute
Capistrano でのデプロイ時にテストを実行したい Capistrano::Ghostinspector https://github.com/richdynamix/capistrano-ghostinspector というプロジェクトが使えるかも

Ghost Inspector 以外のクラウド型ブラウザ・テスト・サービス

Ghost Inspector の他にも,クラウド型ブラウザ・テスト・サービスがいくつか見当たります.

参考

Ghost Inspector の公式ドキュメントは,今のところ日本語のものは見当たりませんがとても充実しています.

最後に

このドキュメントは,私が所属する 株式会社うるる での開発業務における Ghost Inspector の導入経験を基に書かれました.

弊社では開発メンバーを募集しています.
https://www.wantedly.com/companies/uluru