UiPath Test Suiteのイメージバリデーションテンプレートを作成して見た！ #1

# はじめに

みなさん、こんにちわ！

UiPath Test Suiteは多くの自動テストの専門家が工夫し、組み上げてきた最適なテスト環境をパッケージ化したオールインワンソリューションです！
加えて、もっともお金をかけて開発したGUIテストの自動化ツールだとも言えます！（笑）

今回は、そのUiPath Test Suiteでイメージバリデーションは出来るの？と聞かれることが多くなってきたので、記事を書くことにしました。
UiPath.Testing.Activitiesには入っていませんが、UiPathマーケットプレースのコンポーネントを活用することで、勿論、出来ます！
これを実現するテンプレートをUiPathマーケットプレースに公開しましたので、合わせてご利用ください！

https://marketplace.uipath.com/ja/listings/uipath-test-suite-image-validation-template

#１．概要
UiPath Test Suiteのイメージバリデーションを実現するための、テンプレートです。
このテンプレートは、Webアプリケーション「UiBank」を使用していますので、これをベースにテスト対象のアプリケーション向けにカスタマイズして使用してください。


依存関係
・UiPathTeam.ImageComparison.Activities 2.1.0
 ![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/80dc22ef-ca81-e8d4-4393-61fe54c91ae5.png)

互換性
・UiPath.Studio Pro 20.10.2


 

#２．テンプレート実行手順

###(1) Data-Driven Loan.xamlを開きます。

 ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/cce527d0-36ad-9781-094d-f16bbd01433e.png)


###(2) デザインメニューの「Debug File」>「Run file with data variations」をクリックします。
 ![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/8cdffdc6-ccd2-c766-f72a-2d35b714a54d.png)



###(3) 全データを選択し「Run」をクリックします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/e66db29b-8522-28fa-83f0-e18929338ffa.png)

 

###(4) データドリブンでテストが実行されます。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/09c01ecf-2b5b-b779-d055-c72dcaa81044.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/cc084062-ed86-668a-2a02-7f394b4305c8.png)

          

 
 

###(5)ImageDataフォルダにイメージデータファイルが格納されています。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/787abe58-ea53-e189-34de-9e1e40cbc344.png)

 

###(6) (2)の手順から再度、実行してください。実行が終了するとOutputパネルに検証結果が全て成功で表示されています。
 ![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/f5fd3161-62c7-104f-ca7a-e67e29299ab3.png)

 

###(7) Loan Quotes.xlsxを開き、セルのC3の値を10なら3、3なら10に変更して保存します。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/00545cdc-0c79-1172-8acf-63b08f4d0e58.png)

 

###(8) Data-Driven Loan.xamlを選択し、右クリックでメニューを開き、「Remove Test Data」を選択します。
 ![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/d090eca1-6cdb-469b-5432-afd7de3a1a0e.png)


###(9) Data-Driven Loan.xamlを選択し、右クリックでメニューを開き、「AddTest Data」を選択します。
 ![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/57250869-6a58-745c-b3e8-c46bfdb3cf7e.png)


###(10) Variation Fileの「Loan Quotes.xlsx」を再度セットします。
 ![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/3f01256e-f27d-4e83-9f14-5f18ce50374d.png)

 
###(11) (2)の手順から再実行してください。実行が終了するとOutputパネルに失敗が１つ表示されます。
 ![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/79429929-844a-9ea4-6036-0566c1e81f77.png)


###(12) ImageDataフォルダにExpectedImage2_NG.pngが格納されています。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/0fc8e8c1-fc15-416c-adde-6676acc3e7de.png)

 

###(13) ExpectedImage2_NG.pngを開きます。
差異のある部分を赤で強調された画像が保存されています。
 ![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/e050889c-d8b8-bb8f-750d-18e8fe1eed50.png)

 
#３．解説

###(1) ファイルの説明
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/63652c5b-0fb4-aed1-08ae-5f4ec04085ed.png)



###(2) Variation File「Loan Quotes.xlsx」の説明
LoanEmail、LoanAmount、LoanTerm、LoanIncome、LoanAgeは、登録データです。
LoanGrantedは登録の結果です。ワークフローではローン承認の結果の分岐で使用しています。
ExpectedImagePathは、期待画像のファイルパスを入れます。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/a1d5b5d7-acc4-8a47-12fe-5ab8769cae65.png)

 

###(3) 検証処理の説明
引き渡されたデータのLoanGrantedがNoの場合は、ローンの承認ができない画面が表示されます。
期待画像と比較する要素の画像をイメージバリデーション機能のサブワークフローに渡して検証します。
※比較する画像はスクリーン全体ではなく、必要な部分に絞った要素にしておくことをお勧めします。
　　　　　　　 
 ![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/9efbac59-b709-ac5a-bcf9-a4b062b3b41a.png)


引き渡されたデータのLoanGrantedがYesの場合は、ローンの承認の画面が表示されます。
期待画像と比較する要素の画像をイメージバリデーション機能のサブワークフローに渡して検証します。ただし、ローンIDが動的に生成/表示されるため、この部分は事前にマスクしておきます。
　　　　　　　　 
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/b1742699-c223-6090-91fd-14d2080787d2.png)

 
###(4) イメージバリデーション機能の説明
期待画像のファイルが見つからない場合は、引き渡されてきた画像データを次回実行時に比較する期待画像として保存します。
初回は保存された期待画像の目視確認は必要ですが、一度、実行すれば期待画像を自動的に取得し保存する便利な仕組みです。期待画像ファイルを削除しておくと、期待画像の取り直しが可能となります。

「Compare Two Image Files Using Threshold」アクティビティで引き渡されてきた画像データと期待画像を比較します。ピクセル単位の比較では、スクリーンショットの１ピクセルの差異で失敗し、検証が安定しないケースが多いため、閾値が指定できる本アクティビティを利用しています。差異部分を強調する画像出力も可能になっています。
※閾値や検証アクティビティでDistortionと比較している値は必要であれば調整してください。

　　　　　　　　　　　　 ![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/24bdc0ed-bd3f-e5be-50e9-f28a1493bb4d.png)

# まとめ
UiPath.Testing.Activitiesに検証アクティビティはありますが2020.10.2の時点で検証機能は入ってません。ただUiPathマーケットプレースには検証機能の作成で有用なコンポーネントがいくつもあります！
例えば、Webアプリの文字の色やボタンの背景色を検証したりとか、色々（笑）！

今回は、テスト自動化で誰もが実現を検討するイメージバリデーションの対応策をご紹介させて頂きました！

UiPath Test Suiteによるアプリケーションテスト自動化については、下記コラムもご参考に！

https://www.fsi.co.jp/blog/5942/

https://www.fsi.co.jp/blog/5963/