【OpenRPA】初心者向け操作説明書～その４．セレクタ～

今回はセレクタについて説明します。

# セレクタってなに？

セレクタとは、OpenRPAがUI要素（ウィンドウとかボタンとかテキストボックスとか）を特定するための住所のようなものです。

例えば、OpenRPAの「削除」のボタンを特定するとしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/cbeb791d-7d96-8986-384c-2b736b27418d.png)

電話越しに、この「削除」ボタンを押して！と伝えることを考えてみてください。

> **OpenRPAのウィンドウで、メニューの「一般」ってタブの中にある「削除」ボタンを押して！**

こんな感じに伝えると思います。
セレクタも同じようなもので、〇〇ウィンドウの〇〇エリアの〇〇ボタンのようなイメージでUI要素を特定しています。

# セレクタを見てみよう

[その２．レコーディング編](https://qiita.com/yoshiyuki-iwata/items/94b868b7305e7c9414ad)で作ったワークフローをベースにします。

「５」のボタンを押すアクティビティで、「セレクタを開く」を押してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/994340ac-01d4-9301-6e83-f6dcecfdec71.png)

Selectorダイアログが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/3ab41628-7423-444a-f9ae-7cf61671db55.png)

これがセレクタです。

``` xml:セレクタ
[
  {
    "isImmersiveProcess": "True",
    "applicationUserModelId": "Microsoft.WindowsCalculator_8wekyb3d8bbwe!App",
    "Selector": "Windows",
    "search_descendants": "True"
  },
  {
    "Name": "電卓",
    "ClassName": "ApplicationFrameWindow",
    "ControlType": "Window",
    "FrameworkId": "Win32"
  },
  {
    "Name": "電卓",
    "ControlType": "Window",
    "FrameworkId": "XAML"
  },
  {
    "ClassName": "LandmarkTarget",
    "ControlType": "Group",
    "FrameworkId": "XAML"
  },
  {
    "Name": "数字パッド",
    "ClassName": "NamedContainerAutomationPeer",
    "ControlType": "Group",
    "AutomationId": "NumberPad",
    "FrameworkId": "XAML"
  },
  {
    "Name": "5",
    "ClassName": "Button",
    "ControlType": "Button",
    "AutomationId": "num5Button",
    "FrameworkId": "XAML"
  }
]
```

なんだかいろいろと英語の文字列がたくさん書かれていますが、ざっくり説明すると

> 電卓アプリケーションの、「電卓」というFrameの中の、「電卓」というWindowの中の、LandmarkTagetというGroupの中の、「数字パッド」というGroupの中の、「5」というButton

を示しています。

FrameとかGroupとか、見た目からはわからないものがあるのでちょっとややこしいですが安心してください。
イチからセレクタを書くことなんてありません。
レコーディング機能などで勝手に上記の内容を生成してくれるので、「へー、こんなふうになってるんだ」くらいに思っておけば大丈夫です。

## 強調表示してみる

「強調」ボタンを押してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/c5f14258-749e-08bf-eaf1-282f630491ac.png)

すると、現在のセレクタに合致するUI要素が、赤くなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/13d52ed4-8e8f-eae7-46d1-2f9e05476378.png)

# セレクタをいじってみよう

セレクタは編集することができます。
ちょっとやってみましょう。

この部分を

``` xml:変更前
  {
    "Name": "5",
    "ClassName": "Button",
    "ControlType": "Button",
    "AutomationId": "num5Button",
    "FrameworkId": "XAML"
  }
```

こうします。

``` xml:変更後
  {
    "Name": "6",
    "ClassName": "Button",
    "ControlType": "Button",
    "AutomationId": "num6Button",
    "FrameworkId": "XAML"
  }
```

「強調」ボタンを押してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/de6dd8b0-c963-cf66-3626-87859b22efc4.png)

「６」のボタンが強調表示されましたね。
これで、このシナリオは「６＋８＝」が実行されるようになりました。

# 一覧からセレクタを変更する

手動ではなく、一覧からセレクタを変えてみます。

「５」のボタンを押すアクティビティで「セレクタを開く」を押し、Selectorダイアログを開きます。

Selectorダイアログの左のツリーを見ると、今開いているアプリケーションとそこに含まれるオブジェクト（ボタンとかテキストボックスとか）が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/54e9b06b-d283-7938-0134-39a4b2f4d76b.png)

このツリーから、目的のボタンなどを選択することができます。

`Window 電卓` > `Group unknown` > `Group 数字パッド NumberPad` > `Button 9 num9Button` を右クリックし、「要素を選択」を選択後、右下の「OK」ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/e70f262d-4f41-6eab-3c55-d6ddce05aa38.png)

これで、このシナリオは「９＋８＝」が実行されるようになりました。

# おわりに

セレクタの説明は以上です。