Ghost Inspector完全入門

# 概要

E2Eテストサービスである「[Ghost Inspector](https://ghostinspector.com/)」の使い方を残します。
Ghost Inspectorは**スモークテスト（簡易テスト）向けのサービス**のため、IE、Safari、Edgeを含めた厳密なテストを検討している方には向いていないサービスになります。

# 特徴のまとめ(メリット/デメリット)

[最近流行（らしい）のAutify](https://autify.com/ja/pricing)、[testingbot](https://testingbot.com/pricing)、[mabl](https://www.mabl.com/pricing)などのサービスを検証したわけではなく、価格表ベースでのデメリを紹介したいと思います。
それぞれのサービスで付加価値のつけどころが異なるので一概に比較できないのはご了承ください。

## メリット

### 価格

一番大きいな評価ポイントとして、**テストの並列実行数に応じて課金するシステムではない。**
テストの実行時間(10~20分)に制限があるが並列化することで逃げることができる。ただし、無限に並列実行できるわけではない。
他のサービスでは並列実行数に応じて課金がかかったり、そもそもテスト実行回数が少ないうえに価格が高めだったりする。

### 並列実行

デフォルトでは並列実行される。設定で直列実行に変更可能。

参照：[FAQ:Do tests run in parallel or sequentially?](https://ghostinspector.com/docs/faq/)

### テストの作りやすさ

おそらくどのサービスもそうですが、ブラウザ操作を自動記録するアドオンによって簡単にテストを作成できる。

### API

これもどのサービスも同じかと思うが、APIでテスト実行、作成などができる。
テストケースそのものをコード化すれば、バージョン管理に加えることもできる。

### 互換性

[Selenium IDEで出力したファイルをインポートまたはエクスポートする](https://ghostinspector.com/docs/selenium-import-export/)ことができる。

### テスト実行地域

[テストの実行地域](https://ghostinspector.com/docs/test-settings/#geolocation)を簡単に変えることができる。
Ghost InspectorはAWS上にあるため、AWSのリージョン別に実行が可能です。

> (Optional) Geo-location for test execution. The following options are available: us-east-1 (default), us-west-1, ca-central-1, eu-central-1, eu-west-1, eu-west-2, eu-west-3, eu-north-1, me-south-1, ap-east-1, ap-northeast-1, ap-northeast-2, ap-southeast-1, ap-southeast-2, ap-south-1, sa-east-1

### 変数が使える

静的、動的の変数が使える。また、APIのパラメータとしてリクエストすることで変数の上書きもできるので、
CI環境から動的にパラメータを変更させたい場合に役に立ちます。
例えば、テストするURL名やログインユーザ名、PWなど。

参照：https://ghostinspector.com/docs/reusing-tests-different-environments/

### [各種サービスと連携できる](https://ghostinspector.com/docs/integration/)

私もAWS CodePipelineでこのサービスの存在を知りました。
その他にAzure DevOps、Github、Slack、Circle CIなど。

### サポート

サポートの対応とレスポンスが速い。
サポートはUS時間のため、時間帯があえばすぐにレスポンスが来ます。
また、システムに改修が必要な場合もすぐに対応してくれます。

## デメリット

### 対応ブラウザ

最大なデメリットでもありますし、サービスの特性でもある。
Linux環境でChrome、Firefoxによるテストのなるため、それ以外のブラウザは利用できません。
[モバイル向けブラウザ指定](https://ghostinspector.com/docs/test-settings/#display)は可能ですが、簡易的なものだと思った方が良いと思います。

参照：[FAQ:Can I run my tests with different browsers and operating systems?](https://ghostinspector.com/docs/faq/)

※スクリーンの設定でモバイル端末に設定しても、ユーザエージェントは設定されない！

### セッションデータの引継ぎ

テスト間のCookieやセッションデータの引継ぎはできない。
テスト観点上クリーンな環境でテストすることが望ましいため、個人的にはデメリットとは思わないが、ケースによってはデメリットになるかもしれない。
また、1つのテストでブラウザを閉じ、再度開いて続きをテストすることもできません。（サポートに問い合わせした）

参照：[FAQ:Is cache, cookie or session data maintained between test runs?](https://ghostinspector.com/docs/faq/)


# テスト

前置き長くなりましたが、テストの構成、作成方法などについて説明します。
なお、以下では**Chrome**を使用した説明になります。

## 構成

テストを構成する要素は大きい順に
フォルダ、スイート、テスト、ステップになります。

- テストの実行単位はスイートとテストになります。  
  フォルダはスイートをまとめるだけでフォルダを指定したテスト実行はできない。
- スイート内のテストは並列または直列実行できる。
- テストを他のテストにインポートすることができる。
- 1テストあたり**最大10分まで**実行可能
- 1スイート当たり最大20分まで実行可能。ただし、スイート内のどれかのテストが10分を超えた場合はエラーになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/9f899409-794c-eb1c-ce20-6036d8af7609.png)

## テストを作る（その1）

以下はでgoogle.comでQiitaと検索し、Qiitaのトップ画面でリンクが「ログイン」文字列であることを確認するテストを実装します。

1. テストを記録するための[レコーダ]((https://ghostinspector.com/docs/test-recorder/))をブラウザに追加します。  
※拡張機能を入れずにテストを作ることも可能が、作るのに手間がかかます。
   - [Chrome](https://chrome.google.com/webstore/detail/ghost-inspector-automated/aicdiabnghjnejfempeinmnphllefehc)
   - [Firefox](https://addons.mozilla.org/en-US/firefox/addon/ghost-inspector/)
2. 拡張機能からログインします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/4f213a15-fb02-3e8c-cd20-67d4f426ec63.png)
3. スイートを作成します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/719a6f39-9f7f-08ef-ca9a-cdedc3342f8d.png)
4. スイートを設定します。  
[スイートの設定](#スイートの設定)を参照し、必要な設定をします。  
※言語を「Japanese」、地域を「Japan,Tokyo」に変更してください。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/538c2bc3-348b-5dae-b0e7-926a39c9b66a.png)
5. 拡張機能からテストを作成し、テスト実行します。  
レコーダで記録した各種操作はテストのステップに記録されます。   
![ghostinspector_google_search_qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/7fd506f6-d0dc-5543-33b6-d692c2be4c49.gif)
6. テスト結果の確認  
テストの実行結果は動画(テストエラーが発生した場合は、エラー箇所まで)として保存されます。  
また、最後のページのスクリーンショットも保存されます。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/3abad1e5-1748-6308-50b0-78a9833b35c0.png)

## テストを作る（その2）

テストの作り方はその1と同様ですが、google.comで画像検索するためにファイルアップロードをします。
ファイルアップロードのステップは修正必須になります。
ファイルをGhost Inspectorにアップロードします。

ファイルアップロードについては注意点がありますので、[以下を参照](#ファイルアップロード)してください。

![ghostinspector_image_upload.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/61922cfb-42ea-71ad-c45b-a81ca61842b6.gif)

## 既存のテストにステップを追加する

作成されたテストにアサートのステップを追加します。
![ghostinspector_add_assert.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/1139abbb-5fc9-cb3d-1863-6b4810d49e51.gif)

## テストエラーの対応

エラーが発生したステップではエラー原因が示されます。
以下のエラーはスイートの言語設定が日本語ではなかったため、「ログイン」ではなく「Login」が表示され、アサートエラーになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/f8147d0c-4de3-079f-f793-034a59864886.png)

## [変数](https://ghostinspector.com/docs/variables)

テスト内で使える変数の説明になります。
ユーザが定義できる変数と[テストごとに利用できる定数](https://ghostinspector.com/docs/variables/#built-in-variables)の2つあります。

変数の値はAPI実行時に渡したり、DOM要素から取得、Javascriptから取得できます。
※API実行時に渡す場合は、テスト内で予め設定した値を上書き実行します。APIで渡した値が優先されます。

### 変数による分岐処理

値によって処理を分岐させる際に、その値を一度変数に格納し、分岐条件として利用することができます。
条件分岐させたいステップの「Add condition」で分岐条件を追加します。
戻り値がtrueになるようにJavascriptコードを記述します。

※複数のステップで条件分岐させたい場合は、それぞれのステップで同じ分岐条件を設定する必要があります。
対象ステップが多い場合は別テストに実装し、そのテストをインポートすることで分岐条件を1つに抑えるテクニックもあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/862aff95-60ab-c993-91dd-ce5ff43f0c01.png)

## [API](https://ghostinspector.com/docs/api/)

APIは非常にシンプルかつ使いやすいものになっているので特筆することはないですが、非同期実行について紹介したいと思います。

スイートまたはテストを実行する際にリクエストパラメータ（GETまたはPOST）に**immediate=1を渡すことで非同期実行**になります。
例えばUIテストとインフラテストそれぞれを実行しなければならない時にUIテストしつつ、インフラテストも実行できるようになるのでテスト全体の実行時間を短縮することができます。
非同期実行時にテストが正常終了したかどうかを確認するためには、[スイートテスト結果](https://ghostinspector.com/docs/api/suites/#list-suite-results)または[テスト結果](https://ghostinspector.com/docs/api/tests/#list-test-results)で**data[x].passing=true**になっていることを確認できます。
テストID(`data[x]._id`)はテスト実行時の戻り値の`_id`になります。

※Shellで戻り値のjsonをパースするのに役に立つのは[jq](https://qiita.com/takeshinoda@github/items/2dec7a72930ec1f658af)になります。

### 注意点

- API＋同時実行でテストを実行した場合は、テスト結果の成否は前述同様`json.data[x].passing`で確認すること。テストがエラーでもリクエストそのものが正しければ`json.code=SUCCESS`になる。


## スイートの設定

スイート設定

#### [スケジュール実行(Schedule)](https://ghostinspector.com/docs/test-settings/#test-schedule)

API経由やCI/CDプラットフォーム経由で実行することも可能ですが、定期的に自動実行させることも可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/9e1cb684-cf69-a9f5-d78b-c0fcd2f9835f.png)

#### 変数の設定(Variables)  

スイート内のテストで使用する変数を設定することができます。
機密情報の場合は、「Make this value private」にチェックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30522/7f0fba3d-865a-2560-a704-d8186adac61c.png)

#### テストの基本設定(Test Defaults)
- 言語(Browser Details)
- ユーザエージェント(Browser Details)
- [ブラウザバージョン(Browser Versions)](https://ghostinspector.com/docs/test-settings/#browser-versions)  
  Chromeにはヘッドレスモードと従来モードと2つありますが、基本的にヘッドレスモードでOK。
- [画面の解像度(Display Options)](https://ghostinspector.com/docs/test-settings/#display-options)
- [各ステップの実行間隔(Step Timing)](https://ghostinspector.com/docs/test-settings/#step-timing)
  テストの実行時間の短縮につながるので、チューニングの余地はあり。
- テスト実行地域(Geolocation)
  デフォルトがVirginiaになっているので、**変えることをお勧めします**。
- JS実行エラー時の振舞(Miscellaneous)
- SSL証明書エラー時の振舞(Miscellaneous)

#### [データソース(Data Sources)](https://ghostinspector.com/docs/test-settings/#data-sources)



#### [実行順序設定(Concurrency)](https://ghostinspector.com/docs/test-settings/#miscellaneous)  
スイートを指定したテスト実行時は、デフォルトではスイート内の各テストが**並列実行**されます。
実行順序に制限がある場合は、「Enable concurrency limitation」にチェックします。

#### [通知設定(Notifications)](https://ghostinspector.com/docs/test-settings/#notifications)  
メール通知やSlack、PagerDuty、MS Teamsなどに連携できます。

Slack、PagerDutyなどに通知するには予め組織設定のIntegrationsを有効にする必要があります。 
Slack通知でしか試していないが、**テスト実行結果の成功/失敗に応じて異なるワークスペースに通知できます**。

## ファイルアップロード

- ステップでアップロードしたファイルは**フル公開状態**である！  
※URLを知っていれば誰でもアクセスできる。
- ファイルをアップロードし直すと**URLが変わる**！

以上の2点を踏まえて、自前のアクセス権限制御できるストレージ(S3など)にテスト用ファイルを保管すると安心

### テスト実行時のファイルDL

テストで使用するファイルアップロード用のファイルは、ブラウザテストが始まる前に（おそらく別のシステムから）DLされる仕組みになっています。（サポート回答より）
~~そのため、例えばS3のバケットポリシーでGhost Inspectorが公開しているIPのみを許可した際に、ファイル取得する際に403となります。（**事前のファイルDL処理は別のIP範囲から実行されている**）
サポートに問い合わせすれば、個別対応してくれます。~~ ← サポートに問い合わせしたところ全システムでIPが統一されました。

また、テスト開始前のファイルDL時にエラー（404、403など）が発生していたとしても、そのエラーを**ハンドリングできない**仕組みになっています。必ず何かしらのファイルが生成される。


# そのほか

### テストサイトが外部からアクセスできない場合は？

[ngroksによるトンネリング](https://ghostinspector.com/docs/test-local-and-firewalled-websites/)してテストします。
※社内のセキュリティポリシーに抵触する可能性がありますので、利用にはご注意ください。

### トライアル申込

[トライアルアカウント](https://app.ghostinspector.com/account/create)を作成します。
トライアルは14日間ですが、サポートに問い合わせれば、**最大2週間の延長**が可能でした。
なお、テスト実行可能数(100回/月)は増やすことはできませんでした。
運よくトライアル期間中に月を跨ぐ場合は、月初に実行回数がリセットされるので、**最大200回**まで実行可能になります。

※サポートは英語ですが、[Deepl](https://www.deepl.com/ja/translator)で翻訳した英語でも十分通用します。