UiPath Test SuiteのMock-up環境の一つの可能性としてComputer Visionを試して見た!

# はじめに

みなさん、こんにちわ！

アプリケーションのテスト自動化のためのワークフロー開発は、そもそも操作対象のシステムが開発中だと、難しい言う課題があります。
UiPath Test Suite製品ご担当者との意見交換の中からAI Computer Visionを使った一つのアプローチを情報提供頂いたので、試しにやって見ることにしました。
簡単に言うと、本物のシステムの画面を使わないで、Mock-up画面作成段階でテスト自動化のためのUI Automationを作成しようと言う試みです。

下記の動画でも紹介されている内容ですね。（英語です:laughing:）

***UiPath Test Suite: Shift-Left Automation***
https://www.youtube.com/watch?v=WNsRdMYX6Zg&list=PLG3LgE4atuv8i18zQOf1o35D8U-GS3i0W&index=18

ただし、この動画で紹介している様な正しく認識し、動作するポンチ絵の作成が非常に難しく:joy:
ここで時間を掛けても意味がないのでMock-up画面は実際に使われるデザインで作成済みの前提にしました。
下記の様に画面のイメージデータをExcelに張り付けたもので、開発を進めたいと思います。
***＜画面仕様書を仮定：Excelに張り付けたUiDemoサイトの経費登録画面＞***
![画面レイアウト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/6ef99c28-3790-8115-0e96-6a5d3bedaaa0.png)


# AI Computer Visionとは？その仕組み
https://www.uipath.com/ja/resources/knowledge-base/ai-computer-vision-2019
「UiPath AI Computer Vision アクティビティパッケージは、従来のコンピュータビジョンを AI 技術により進化させたアクティビティを含むパッケージです。主な機能は、UI 要素を検出し、クリックや文字の入力を行うことです。AI Computer Vision は、機械学習をベースとする手法により画面イメージから UI 要素を検出するとともにOCRエンジンによりテキストを抽出して、UIを完全に認識しようとします。」

とありますが、触って見た感じだと、おそらく、CV画面スコープの画面指定時、クラウド上にホストされた機械学習サーバーに転送され画面イメージからUI要素を検出し、要素指定できる様にしたところがポイントなのだと思います。
実際に操作対象のUI要素を指定すると、下図の様にプロパティの記述子に要素の種類と座標、アンカーのテキスト(OCRで変換)と座標が入り、この情報を元に動作すると思われます。（指定後はオフラインでも動作しますので。）
![記述子.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/002dd65e-df8b-6139-df9c-ef63d5181a16.png)

アクティビティパッケージは下記の様なものがあります。

![アクティビティ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/3712c880-99c2-5b1e-89ae-cbd6f835a278.png)

# ワークフローを作成して見よう

### (1)必要なアクティビティを挿入しシーケンスを作成

![シーケンス.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/53de4705-0318-f90b-f1ce-f69cc0eacb73.jpeg)

### (2)Automation Cloudの[管理]→[ライセンス]で[コンピュータビジョン]のAPIキーをコピー
![APIキー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/0b2ea886-d674-3465-7b0d-f2c80aad1a30.png)
### (3)CV画面スコープのプロパティにAPIキーを設定
![プロパティAPIキー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/0399a739-3f0b-c1d9-47dd-fd6a2f164910.png)
### (4)CV画面スコープの画面指定でExcelに張り付けた画面イメージを指定
![CV画面スコープ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/f0791517-308d-18ae-bbd3-a7cde40a8cd9.png)
### (5)Excelに張り付けた画面イメージの「タイトル」入力項目の要素を指定
![タイトル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/b753d060-2cd5-d40a-c597-ada2abdd679c.png)
### (6)Excelに張り付けた画面イメージの「種別」選択項目の要素を指定
![種別.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/5fd36e8b-78c0-141f-b056-a5273dc413f0.png)
### (7)Excelに張り付けた画面イメージの「金額」入力項目の要素を指定
![金額.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/55724224-d86c-70b4-3145-213cc3e929f5.png)
### (8)Excelに張り付けた画面イメージの「備考」入力項目の要素を指定
![備考.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/3b8b5ab4-e2a0-dbbb-24c0-97a633ba44fb.png)
### (9)Excelに張り付けた画面イメージの「登録」ボタンの要素を指定
![登録する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/150aae62-dc9e-7d24-9ade-1e2790a690ea.png)
### (10)各アクティビティに入力するテキストを設定
![完成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/701baa78-82cb-89d9-5e8a-12cadc1c8e3b.jpeg)
### (11)最終的に、アプリケーションが完成した際、CV画面スコープを本アプリケーションの方に再設定
![本物CV画面スコープ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/7d1f8f3b-7321-7354-4751-1496697dffa2.png)
### (12)実行し、UiDemoサイトの経費登録画面で入力・登録ができたら成功
![成功.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/10f0cd56-5752-8a33-e8f5-a9e1ee46c9a1.png)


# これらの手順で上手く行かないこともあるので注意

### (1)アンカーの要素選択ができない場合があります。
CV画面スコープの画面指定でクラウド上にホストされた機械学習サーバーに転送され画面イメージからUI要素を検出しますが、これが上手く検出できずに、アンカーとしたいタイトル等が選択できない場合が多々あります。その場合は、画面の倍率を変更し、再度、CV画面スコープの画面指定をやり直すことにより検出できる場合もあります。
日本語の場合の精度ででしょうか。機械学習での今後の性能向上に期待したいところ。

### (2)座標が狂うと動きません。
CV画面スコープで抽出した要素の座標と実際の画面の要素の座標と一致していなければ、動作しません。
つまり、Excelに張り付けた画面イメージと実際の画面と同じ倍率で、かつ張り付けた画面イメージのサイズも変更しないことが前提です。
座標を正しく合わせるために、アプリケーションの画面全体でキャプチャで合わせることをお勧めします。
ちょっと、前提がシビアかな・・・

### (3)OCRの文字変換が上手く行かない場合もあります。
アンカーに入るOCRで変換されたテキストは、標準がMicrosoft OCRで精度は高くありません。
例えば、「種別*」が「種 月 ド」等で変換され、手修正が必要になる場合もあります。
今回、テキスト取得は入ってないですが、ここも同様ですね。
精度の高い日本語のOCRエンジンを使用すれば改善される可能性はありますが有料になってきそう・・・

### (4)出来るオペレーションには限界がある。
今回のオペレーション以外となりますが、Computer Visionだけでは難しいオペレーションが多々発生しそうです。

# おわりに

Computer Visionの解説になってしまったのですが、UiPath Test SuiteのMock-up環境としてComputer Visionの利用は発想、着眼点としては、面白いとは思いました。
ただし、Computer Visionでは、まだ実用性としては、前述した注意点、セレクターの様な安定稼働面で、まだハードルが高い印象です。
Test Suiteに限らずですが、実際のシステムが触れない環境であったり、対象のシステムがまだない状態であったり、そんな時に仕様書の画面イメージからでもUi Automationの開発ができれば画期的ですけどね。

「テスト自動化の歴史と現状を紐解きながら、UiPathで、この領域での新たな最適解を導き出すことが出来るのか」まだまだ続きます！

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

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

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