【UiPath Studio】【実装Tips】「不定期に表示されるダイアログ要素」に対応した自動化をする。

# １．はじめに

WEBページやExcelなどで不定期にメッセージやダイアログが表示されるために、処理が停止してしまうケースがあるようです。
定期的な事象であれば対処は容易なのですが、不定期な事象だと工夫が必要です。

解決策はいくつか考えられますが、１つとして考えられるのが
**「並列処理」アクティビティ**の活用です。


また、類似事象の再現が難しいことがあるかと思います。

当記事では、課題として、この少し意地悪なWEBページ（html）を用意してみました。
**Javascriptによるダイアログがランダムに表示される**意地悪なページです。



#### 用意したhtmlは当記事の最後に貼りました。
ご興味があれば課題にチャレンジしてみてください。

:::note warn
不定期に表示される**Javascriptのダイアログ** が入力欄への操作を邪魔します。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/7a97bd01-f76c-0bb9-29cb-762ca43a69c5.png)

「並列処理」アクティビティを使って対処してみます。


# ２．実際の実装した動作イメージ
実際に実装してみた処理が以下です。

:::note
複数のテキストエリアに順番に **「ひらがな」を１文字ずつ入力** していく単純な処理です。
（処理は最後まで流れることを確認していますが、長いので途中までを貼ります）
:::

![不定期ダイアログ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/c1520fae-a278-f167-8d84-e54bea212795.gif)
Javascriptダイアログの認識に少し時間が掛かってしまいました。このケースでは、これ以上の調整はなかなか難しそうでした。

:::note
不定期に表示される要素に応じた調整が必要になると考えられます。
:::

### この処理を抽象化したフロー図が以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9a51ad06-18f7-ca85-c287-10a053f96405.png)
ポイントは並列処理ですが、処理の概要は以下です。
- **左の処理**：　
    - 本処理の内容を実装します。
    - 処理の終わりに **「繰り返しフラグ」** をOFFにします。
- **右の処理**：　
    - **「繰り返しフラグ」** がONの間、繰り返します。
    - ダイアログの要素がある場合、必要な処置をします。（「OK」ボタンをクリックなど）


:::note
「並列処理」は各処理が相互に流れるため、適度にログ出力をすると実装/実行の把握に役立ちます。
（特に実装初期では片方の処理に偏って処理されていないか、等を確認しながら実装すると効率が良いように感じました）

実装では意図した処理の流れになるように、左右の処理の各アクティビティのプロパティを調整しています。
（下図： **調整したプロパティの一例** ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/def4da61-68bc-d896-258c-4fda12632f86.png)
:::


# ３．まとめ
不定期に表示される要素に対応する解決方法の１つとして「並列処理」を使って解決するアイデアをご紹介しました。

意図的に用意した意地悪なWEBページに対する自動化を実現できることが確認できました。
実装の難しかった点、および 時間が掛かった点は **最終的な処理の調整（アクティビティのプロパティ調整）** でした。

ロボット全般にも言えることですが、実行環境が変わると処理順序が変わることがある点にも注意が必要です。
処理順序に依存しないように設計できると最適ですが、意外とこれがとても難しいです。
実装環境と実行環境は合わせることをお奨めします。

似た状況に困っている方のお役に立てば光栄です。



# ４．補足情報
当検証においては、手軽にWEB実装を試す目的で、
Studioのプロジェクト内にhtmlファイルを保管して開くように実装しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/42352bee-97b7-d8c0-51d8-b4645230760f.png)

ローカルにおいたhtmlを処理する場合において、
Chrome/EdgeのUiPath拡張機能に設定をしておく必要がありますので手順をご紹介します。

#### 以下、UiPathブラウザ拡張機能へローカルファイルURLにアクセス可能にする設定です。

**「ファイルのURLへのアクセスを許可する」** をONにする必要があります。

## 「ファイルのURLへのアクセスを許可する」設定手順。

１．ブラウザ上部のパズルのピースのようなアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/56287643-6beb-07ea-10d4-3f118024908e.png)

２．UiPathのブラウザ拡張機能が表示されるので、右端の3点リーダーをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/be32254d-c639-b27c-e1be-0be0c4d156ec.png)

３．「拡張機能を管理」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/02c6a526-48e1-e476-b8d7-1199895df04b.png)

４．設定の下の方の「ファイルのURLへのアクセスを許可する」のトグルをONにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/5cb70b12-7d68-41fb-6dac-84e2fdcbf6e5.png)


## 検証に使ったhtmlコードはこちらです。
以下の内容を **sample.html** としてプロジェクト内に配置して検証しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/ac97eeac-c948-d674-2979-2a26c4da27c5.png)

:::note warn
ご利用の際は自己責任でお願いいたします。
:::

:::note
**■用意したhtmlの補足**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/b3e0b895-5344-f59c-102f-7fd9d20af5f8.png)
上図の**チェックボックスをOFF**にすると、ダイアログ表示は抑制されます。
実装時にダイアログが表示されると要素認識ができない状態になるため、OFFにした状態で実装します。

ロボット実行の**前処理でチェックボックスをON**にし、**後処理にてOFF**にする実装が良さそうです。
:::

```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>UiPath Studioの並列実行テスト用</title>
</head>

<body>
<p>ランダムにダイアログが表示される！</p>


<p>ダイアログ表示ON/OFF
<input type="checkbox" id="check" />
</p>
<BR>

入力欄１：<textarea id="text1" cols="20" rows="2" ></textarea> <BR>
入力欄２：<textarea id="text2" cols="20" rows="2" ></textarea> <BR>
入力欄３：<textarea id="text3" cols="20" rows="2" ></textarea> <BR>
入力欄４：<textarea id="text4" cols="20" rows="2" ></textarea> <BR>
入力欄５：<textarea id="text5" cols="20" rows="2" ></textarea> <BR>


<BR>
<input type="text" id="time" style="color:#BBBBBB;" readonly />

<script>
// ランダムにダイアログを表示する。
function exec() {
	
	// チェックボックスのチェックを確認する
	if(document.getElementById("check").checked ) {

		// 秒単位のランダム値を生成。
		var random = Math.floor( Math.random() * 5000 + 5000 );
		// ブラウザの開発ツールでのデバッグ用
		console.log(random);
		var text = "次は…" + random + " ミリ秒後！";
		document.getElementById("time").value= text;
		
		window.setTimeout(function(){   	
	    	alert("不定期に表示されるダイアログです。    " + text );
	    	// 次のランダムを実行。※処理は終わらないので注意。
			exec();
			
		}, random);
		
	} else {
	
		// 未チェックの場合の処理：　5秒間SLEEPして処理を開始するか再チェックする。
		window.setTimeout(function(){   	
			exec();
		}, "5000");
	
	}
}
// 読み込み時に実行する。
window.addEventListener('load', function(){
	exec();
});
</script>
</body>
</html>
```