10.Pitalium Explorerを使用してテスト結果を確認する
Pitaliumの補助ツールとして、テストの実行結果をブラウザ上で一覧できるアプリケーション「Pitalium Explorer」を合わせて提供しています。
ここでは、Pitalium Explorerを使ってテスト結果を閲覧する手順を説明します。
前提条件
本チュートリアルは、以下が用意された環境で実行することを想定しています。
- Tomcat 7
Pitalium Explorerの起動
- Pitalium ExplorerはPitaliumに同梱されています。
Pitalium（ダウンロードページ）
pitalium.zipを解凍したフォルダのpitalium_x.x.x/pitalium-explorer-x.xx.x/にアクセスします。 - pitalium-explorer.warを ${Tomcatのホームディレクトリ}/webapps フォルダにコピーします。
- ${Tomcatのホームディレクトリへのパス}/bin/startup.bat を実行し、Tomcatを起動します。
- ブラウザを開き、http:localhost:8080/pitalium-explorer/list.html にアクセスします。
Pitalium Explorerの画面が表示されればOKです。
テスト結果データのインポート
- Pitaliumのテスト実行結果ファイルを用意します。置き場所は任意です。
テスト結果フォルダ以下の全てのファイルが必要です。テスト結果フォルダは次のような構成になっています。
results（任意に指定したテスト結果フォルダ。デフォルトはpitalium/results）
├ テスト結果ID（デフォルトはタイムスタンプ）
│└ テストメソッド名
│ ├ スクリーンショットID.png
│ └ スクリーンショットID.json
└ currentExpectedIds.json - ${Tomcatのホームディレクトリ}/webapps/pitalium-explorer/WEB-INF/classes/explorerPersisterConfig.json を任意のテキストエディタで開きます。
- "resultDirectory" のパスを、Pitaliumのテスト実行結果ファイルのある場所のパスに書き換えます。
"resultDirectory"は複数指定することができ、result1, result2, ... にそれぞれ"resultDirectory"を指定できる。
ここで指定したフォルダの直下にテスト結果IDのフォルダが存在するようにしてください。
ex) 1. の例であれば、C:/workspace/mytest（パスは自身の環境に合わせてください）/results のように指定します。 - Tomcatを再起動します。
${Tomcatのホームディレクトリへのパス}/bin/shutdown.bat を実行して一度停止した後、
${Tomcatのホームディレクトリへのパス}/bin/startup.bat を実行して再び起動して下さい。 - ブラウザを開き、http:localhost:8080/pitalium-explorer/list.html にアクセスします。
テスト結果のリストが表示されていれば、正しく設定できています。
Pitalium Explorerの画面の見方
リスト画面（list.html）
テスト結果一覧
http://localhost:8080/pitalium-explorer/list.html にアクセスすると、指定したフォルダに置かれているテスト結果がリスト表示される。
テスト結果サマリー
ページを開いた直後は、テスト結果のサマリーのみが一覧で表示される。表示内容は次の通り。
【1】タイムスタンプ（テストID）
【2】テスト成功数/テスト実行総数
【3】【1】をバーで表示したもの
【4】結果マーク
- 結果マーク… チェック：全テスト成功、×：失敗テストあり、無印：SET_EXPECTEDモードで実行
【5】任意の画像比較画面を表示
- 比較ページについては＜任意の画像比較画面＞を参照
【6】表示する結果フォルダの切り替え
- explorerPersisterConfig.jsonに記述してあるresultDirectoryを切り替える
スクリーンショット毎のテスト（画像比較）結果
「テスト実行結果」と「ブラウザ間比較」でタブ切り替えを行える。
タブ選択で「テスト実行結果」を選択。サマリーをクリックすると、その回のテストの全ての実行結果が一覧表示される。表示内容は次の通り。
【1】テストクラス名
【2】テストメソッド名
【3】スクリーンショットID
【4】OS
【5】ブラウザ
【6】ブラウザのバージョン
【7】結果マーク
リストの各行をクリックすると、画像比較ページが開く。（比較ページについては＜画像比較画面の見方＞を参照）
ブラウザ間の比較
「テスト実行結果」と「ブラウザ間比較」でタブ切り替えを行える。
タブ選択で「ブラウザ間比較」を選択。正解結果と比較対象の結果を選択して「Run」をクリックすると、選択した画像同士の類似度計算を行う。表示内容は次の通り。
【1】結果画像
【2】類似度
【3】相違数
【4】ブラウザ間比較画面を表示
「Detail」をクリックすると、ブラウザ間比較ページが開く。（ブラウザ間比較ページについては＜ブラウザ間比較画面＞を参照）
画像比較画面（diff.html）
リスト画面で任意の実行結果をクリックすると、テスト結果画像の比較画面が表示される。
結果ツリー
【1】左側に、その回に実行したテスト（選択したブラウザ分のみ）がツリー表示される。
表示内容は次の通り。
テストクラス
└ テストメソッド
└ スクリーンショットID 画像アイコン
# 画像アイコン… 青が正解画像、赤が今回の結果画像。
どちらかしか存在しない場合は、存在する画像のみアイコンが濃くなっている。
画像比較
比較結果情報
右側上部の「Result Information」部分に、比較結果の詳細が表示される。表示内容は次の通り。
【2】Comparison Result：選択中の画像の比較結果。一致（=テスト成功）ならチェック、不一致なら×、画像が一方しかなく比較できない場合は-。
【3】Expected：比較対象の正解画像の情報。
【4】Actual：今回の実行結果の情報。
ターゲット
【5】Pitaliumでは、一度の撮影で複数のターゲットを指定できる。
比較結果情報の下のセレクトボックスで、撮影時に指定したどのターゲットを表示するか指定できる。
画像比較ビュー
正解画像と実行結果画像を5つのビューで比較できる。2枚の画像が一致しない場合は、差分がある場所に赤い枠が表示される。
ビューの種類は次の通り。
【6】Quick flipping：上部の「Expected」「Actual」のタブをクリックすることで、表示する画像を切り替える。
【7】2-up：2枚の画像を左右に並べて見る。
【8】Swipe：スライダーの左右で画像が切り替わる。右に動かすとACTUAL、左に動かすとEXPECTEDが表示される。
【9】Onion skin：スライダーを動かすと徐々に画像が切り替わる。右に動かすとACTUAL、左に動かすとEXPECTEDが表示される。
【10】Edge overlapping：2枚のエッジ（輪郭）だけを抽出した画像が重ねて表示される。線が黒い部分は一致、青い部分はExpectedのみ、赤い部分はActualのみ。
任意の結果同士を比較
【11】ページ上部の「Actions」ボタンを押し、「Select Executions」を選択すると、結果選択ウィンドウが表示される。
使い方は次の通り。
1) 正解画像とする結果の「Expected」ボタンを押す。
2) 比較対象とする結果の「Actual」ボタンを押す。
3) 「Select」ボタンを押す。
4) 1)と2)で指定したもの同士の比較結果が表示される。
ブラウザ間比較画面（browserDiff.html）
リスト画面で任意の実行結果をクリックすると、テスト結果画像のブラウザ間比較画面が表示される。
ブラウザ間比較
差分がある場所に赤い枠が表示される。
【1】表示する相違箇所のカテゴリを選択
- Shift… 配置の相違
- Missing… 欠落による相違
- Object size… オブジェクトサイズの相違
- Font style… フォントの種類やサイズの相違
- Ambiguous… あいまいな相違
【2】相違箇所の色の濃さを調整
【3】画像サイズを調整
【4】表示する相違箇所の閾値を調整
任意の画像比較画面（fileDiff.html）
【1】「Executions」ボタンを押すと、結果選択ウィンドウが表示される。
【2】比較したい画像をクリックする。EXPECTEDとACTUALで指定したもの同士の比較結果が表示される。
また、任意の画像を右側のビューにドラッグ＆ドロップすることで画像をアップロードして比較することができる。
画像比較ビュー
正解画像と実行結果画像を5つのビューで比較できる。2枚の画像が一致しない場合は、差分がある場所に赤い枠が表示される。
ビューの種類は次の通り。
【3】Quick flipping：上部の「Expected」「Actual」のタブをクリックすることで、表示する画像を切り替える。
【4】2-up：2枚の画像を左右に並べて見る。
【5】Swipe：スライダーの左右で画像が切り替わる。右に動かすとACTUAL、左に動かすとEXPECTEDが表示される。
【6】Onion skin：スライダーを動かすと徐々に画像が切り替わる。右に動かすとACTUAL、左に動かすとEXPECTEDが表示される。
【7】Edge overlapping：2枚のエッジ（輪郭）だけを抽出した画像が重ねて表示される。線が黒い部分は一致、青い部分はExpectedのみ、赤い部分はActualのみ。