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

この記事は [Selenium/Appium Advent Calendar 2017](/advent-calendar/2017/selenium) の24日目の記事です．

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

# Ghost Inspector とは

* GUIでWebアプリケーションのテスト機能を作成できるクラウド型ブラウザ・テスト・サービス
* 公式サイト： https://ghostinspector.com/
  * ドキュメント： https://ghostinspector.com/docs/getting-started/ （英語．日本語は見当たらない．）
  * ブログ https://ghostinspector.com/blog/

# テストを作成する方法

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

# 継続的インテグレーション（CI）の利用

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

* GitHub : https://ghostinspector.com/docs/integration/github/
* CircleCI： https://ghostinspector.com/docs/integration/circle-ci/
* Jenkins： https://ghostinspector.com/docs/integration/jenkins/

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

テストの結果を [Slack へ通知する](https://ghostinspector.com/docs/integration/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](https://ngrok.com/) を使うことで可能です．

参考）
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 の他にも，クラウド型ブラウザ・テスト・サービスがいくつか見当たります．

* Sauce Labs  
  https://saucelabs.com/
* BrowserStack  
  https://www.browserstack.com/
* TestingBot  
  https://testingbot.com/
* Nerrvana ... [Selenium IDE](http://www.seleniumhq.org/projects/ide/)ベース   
  http://www.nerrvana.com/
* Gridlastic  
  https://www.gridlastic.com/
* CrossBrowerTesting  
  https://crossbrowsertesting.com/selenium-testing


# 参考

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

* Ghost Inspector Documentation  
  https://ghostinspector.com/docs/
* スピード重視の開発体制を実現するためのUIテスト自動化  
  http://tech.plaid.co.jp/2016_08_24_uitest_automation/
* Automated Browser Testing During Continuous Integration with Ghost Inspector, CircleCI and ngrok  
  https://ghostinspector.com/blog/automated-browser-testing-continuous-integration-circleci-ngrok/
* 失敗からはじめるSelenium  
  http://blog.cybozu.io/entry/5499

# 最後に

このドキュメントは，私が所属する [株式会社うるる](http://uluru.jp) での開発業務における Ghost Inspector の導入経験を基に書かれました． 

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