KatalonStudioで自動テストのビデオキャプチャを取得

# はじめに
前提）KatalonStudioを使用したWebテスト
テストのキャプチャを動画で取得したい場合、Katalonには2種類のビデオキャプチャが用意されています。

1. [画面ベースのビデオキャプチャ](https://docs.katalon.com/docs/analyze/reports/generate-test-reports/generate-screen-based-videos-in-katalon-studio-reports)
　画面全体を動画にします。デスクトップや別ウィンドウで何か操作をしている場合動画に映ります。
　ヘッドレス実行は映りません。並列実行は記録できません。
2. [ブラウザベースのビデオキャプチャ](https://docs.katalon.com/docs/analyze/reports/generate-test-reports/generate-browser-based-videos-in-katalon-studio-reports#install-ffmpeg-library)
　自動テストをしているブラウザ内を動画にします。ヘッドレス実行の場合も状況が見える動画にすることができます。
　新規ウィンドウ、タブ切り替えなどに弱いです。並列実行を記録できます。

# 画面ベースのビデオキャプチャを取得する
## プロジェクトの設定
``Project``>``Settings``>``Execution``を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/b67e4fa8-6af7-cb61-4a23-dd2edf8247d4.png)
`` Record Video during execution.``をONにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/4ee28872-10c9-c1ab-e546-9ee93ca7dc79.png)
``Screen Recorder``を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/478807e6-632e-3935-c837-13acc0d46bcf.png)

#### 動画取得するタイミングについて選択します

Record if test case passed - テストが成功のとき
Record if test case failed - テストが失敗のとき

#### 動画ファイルの拡張子を選択します
AVI - windowsで再生する場合おすすめ
MOV - macで再生する場合おすすめ

#### 動画ファイルの画質を選択します
Low - 低
Medium - 中
High - 高
こだわらなければファイルサイズの軽い「低」がおすすめされています。

忘れずに``Apply and Close``（設定を保存して閉じる）をクリックして設定終了します。

これでTestSuite、TestCollectionを実行した場合に動画のキャプチャを取得できます。（TestCase実行のときは動画キャプチャは取得しません）

## 取得した動画を再生する
動画の再生には[K-Lite codec](https://www.codecguide.com/download_k-lite_codec_pack_basic.htm)というアプリケーションが推奨されています。
他のアプリケーションでも再生ができましたが、推奨アプリケーションだとTestCase内にテストの説明を記載している場合、字幕のように説明表示が見れました。
以下に動画再生までの流れを記載します。

TestSuite、またはTestCollectionを実行後``Result``タブを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/bbf78c77-c721-2e09-011c-1ddc812c137c.png)

Videoのボタンが表示されるのでクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/a5fd7079-9d1c-e0bb-9789-a3dd3a274385.png)

以下のように動画確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/a7610631-6b03-9949-84b8-9e0c964bc87d.png)



# ブラウザベースのビデオキャプチャを取得する
## プロジェクトの設定
``Project``>``Settings``>``Execution``を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/b67e4fa8-6af7-cb61-4a23-dd2edf8247d4.png)
`` Record Video during execution``をONにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/4ee28872-10c9-c1ab-e546-9ee93ca7dc79.png)
``Browser-based Recorder``を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/f7789193-a845-627a-278f-7f65f9410898.png)



#### 動画取得するタイミングについて選択します

All Test Cases - テストの成功/失敗に関わらず全ての結果を記録
Only failed Test Cases - テストが失敗のときのみを記録

#### ブラウザの設定をします
``Desired Capabilities`` > ``Web UI``を開き、使用ブラウザを選択します。
（Chrome、 Chrome Headless、 Edge Chromiumのいずれか）
``Add``ボタンをクリックして``List``タイプの変数``args``を追加、中に
``--window-size=1500,1000``,``--remote-allow-origins=*``の値を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/e86b77b3-ba56-3ac1-13f5-ce3c1120c170.png)




忘れずに``Apply and Close``（設定を保存して閉じる）をクリックして設定終了します。

#### FFmpegをインストールします。

1. [FFmpeg ダウンロードページ](https://ffmpeg.org/download.html)へ行きます
2. Windows用パッケージをダウンロードします
3. FFmpeg実行ファイルへのパスを環境変数に追加します
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/1e902c25-ebc5-424d-f5c7-e8b8560a8be5.png)

4. Katalon Studioを開き直します

これでTestSuite、TestCollectionを実行した場合に動画のキャプチャを取得できます。（TestCase実行のときは動画キャプチャは取得しません）

:::note warn
新規タブの録画ができない
ブラウザベースのビデオを再生したところ、サイトで新規タブなどを開いて操作した際に古いタブを見たままで新規タブの録画がされませんでした。この件について、解決方法などが分かれば記載したく思います。
:::

以上、お疲れ様でした。