Edited at

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

More than 1 year has passed since last update.

この記事は 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