EXCELアドインのセレクタ（要素）取得テクニック

# EXCELアドインのセレクタ（要素）取得に苦戦中の方は是非ご一読ください

- 本記事では、EXCELアドインをインストールし、対象ツールの独自ダイアログのUI自動化で期待結果を得られない経験をお持ちの方向けの内容を扱います。
- [***SuperXLe***](https://www.superxle.com/) という、100超の「使える」機能が満載の無料Excelアドインをもちいて実装例を記載しています。

## 操作対象の「設定ダイアログ」（「スイッチ」タブの例）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/9f9568b2-cadd-2837-2903-dae02dc7042c.png)

### ダイアログ起動の実装例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/384bbfb8-a79b-df08-1a11-a6e0c6d11875.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/63e4d153-239c-7e6f-ffb5-456a03ab5764.png)

::: note
Excelのリボンはメニューバーでアドイン名をシングルクリックしても、次のクリック操作の前に閉じてしまいます。
このため、***対象リボンを虫ピンで固定してしまう***、または次の様な***キー操作での起動***が有効です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/0351d05b-52f9-2067-86f6-4e79ec13e7bc.png)
:::

### ラジオボタンやチェックボックスの実装例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/9910b5ab-77a9-63db-0f03-46fcca62159a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/215b5cd2-ee15-9d46-6490-cad779f16e5a.png)
要素認識できる場合、基本的には ***「クリック」アクティビティでオプションの説明文または親要素をアンカーにする*** のがおススメです。
（ダイアログに機能追加や修正が入ったときなどの変更リスクを抑えることができます。）

### ファイルパス入力の実装例

![テキストを設定.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/0fc66a86-888c-84ae-7bcf-77aa95e9f6cb.jpeg)

「文字を入力」ではなく ***「テキストを設定」アクティビティ*** の利用がおススメです。

::: note
***「文字を入力」アクティビティはユーザーが実際にキーボード入力する際の挙動となるため、1文字ずつ対象要素に値を渡します。「テキストを設定」は指定した文字列を1回で入力する***ため、外部要因（ハードやアプリの状態起因）で意図した文字列が入力されないリスク等を軽減できます。
:::

### 他と見た目が異なり、上手く要素認識しないパターン

![F4でUIフレームワークをAAにすることで取得できる_既定だと全体でしか認識できない.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/6a1c9f62-ef3d-76f7-5228-95bb7e6dec04.jpeg)

::: note
ダイアログ全体でしか要素認識しないケースでは、まず***F4ボタン***を押下しUIフレームワークの切り替えを試してください。
:::

![F4でUIフレームワークをAAにすることで取得できる.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/dace6ca7-8bd3-82bc-13dd-a981a0a95754.jpeg)

このパターンでは***UIフレームワークは『AA』に切り替える***ことで要素取得ができました。（UIフレームワークについては以下の記事などをご参考ください）

https://qiita.com/ShioriOsada/items/a09549afe37bdcb4940d

### プルダウンの実装例

以下の様に、クリックで期待結果を得られるケースはありますが、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/92edddc3-8cf1-904c-56d2-9fb79b195d9a.png)

基本的には ***「項目を選択」アクティビティ*** での実装がおススメです↓↓↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/beaee940-1d5e-6132-14e7-b2b548c14941.png)

::: note warn
個人的な経験上は、「項目を選択」アクティビティはスコープ内では単独で簡単に利用できるのがほとんどでしたが、本例のダイアログでは次の2つのエラーに遭遇しました。

■セレクタ取得時のエラー
![項目を選択アクティビティで対応できないケース.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/0bd95bcb-63eb-ad3a-238e-5a5d34719d56.jpeg)
→　こちらは、***プルダウンボタンを押下してリストが開いた状態にする***ことでセレクタ取得できました。
![項目を選択アクティビティで対応できないケース_ダイアログを開いてあげることで認識できる.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/bf8dbe87-e51f-b825-05a9-2965cfd619b8.jpeg)

■実行時のエラー
![項目を選択アクティビティで対応できないケース_ダイアログを開いてあげることで認識できる3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/326a361f-4335-8ce2-2d67-9a8438cb648b.jpeg)
→　***「項目を選択」の直前に同項目の「クリック」を挟む***ことで解消しました。
:::

なお、「項目を選択」が非対応で利用できないコンポーネントの場合、***『「フォーカスを設定」＋キー操作（上または下キー等）』*** をおススメします↓↓↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/a0ec0a4a-a37b-db6f-ed83-2d3d593e76c0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/0637adad-8118-6ce0-811a-2b1614820781.png)

::: note warn
本例のダイアログでは、コンポーネントとの相性がわるくエラーとなりました。

![フォーカスを設定.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/ef3cc252-cfd8-c12f-e1c1-b1c047340241.jpeg)
→　***「CV ドロップダウン リストから選択」アクティビティ*** を利用し実現できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/57ea172e-d5f9-d3d1-defb-1fb0a632881e.png)
![フォーカスを設定_動作不良のためCVのドロップダウンリストから選択で対処.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/8ea3203e-e0fa-7d67-c1eb-e6da4368d563.jpeg)
:::

CV は Computer Vision の略です。Orchestrator との接続がない場合にも、ローカルサーバーのオプションを True にして利用できます。

https://qiita.com/Kajiita/items/018f32677f38f9202005

### 画像からの要素認識

次の様なダイアログがあります。
![もっと詳細に要素認識したいができないケース.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/fa7e45a2-c2a5-0b3a-b813-384287a45c73.jpeg)

ターゲットとしては緑枠までしか要素認識できません。（内側はおそらく画像）
本ツールの利用にあたっては不要な技術ですが、CVアクティビティを利用すれば値の取得や操作が可能であることをおみせします↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/5378dc2b-f8da-d0e9-0cd9-b5e2502443e2.png)
![CVテキスト取得で値をとれる例3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/61fb736e-cd5f-6778-3716-6dc24eded741.jpeg)

### おまけ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/47076e42-b6ed-44fa-d33a-494039a8750c.png)
![CVテキスト取得で値をとれる例.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/a030691f-e13d-de48-8ffe-4fedf7466644.jpeg)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/4a71f5b6-56ae-36d7-c597-967854c05980.png)
![CVテキスト取得で値をとれる例2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/78b9cbd8-27f0-27ea-bd5c-def42da0bd37.jpeg)

## まとめ

***おススメの実装方法：***

■ボタンやラジオボタン、チェックボックスの操作など
　→ ***「クリック」アクティビティのアンカー利用***

■テキスト入力欄
　→　***「テキストを設定」アクティビティ***

■ドロップダウンリスト
　→　***「項目を選択」アクティビティ***
　　→　***「フォーカスを設定」＆キー操作***
　　　→　***「CV ドロップダウンリストから選択」アクティビティ***

■その他、要素認識しないパターン
　→　***F4押下のUIフレームワーク変更***
　　→　***CV（Computer Vision）アクティビティの利用***


最後までお読みいただきありがとうございますヾ(＠⌒ー⌒＠)ノ