Power Automate for DesktopのUI要素の編集（複数の場合）

Power Automate for DesktopのUI要素編集の必要性と方法について、前回記事を投稿しました。

https://qiita.com/Masayanf/items/4361e7ae06b0df4a4d7c

UI要素(単一)の場合、上記記事の方法で編集可能です。
UI要素(複数) の場合、上記記事の方法を一つ一つ対応していく必要がありますが、大量の場合は時間が掛かります。

今回は**単一**の**UI要素** の登録で、**複数ボタン**を順番にクリックする方法を投稿します。

### UI要素(複数)の場合
前回は2025年1月19日の詳細ボタンでしたが、下記赤枠すべての詳細ボタンの取得を取る方法を記載します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/3f330cc5-bb32-59d9-6701-3704b009d760.png)

※下記の記事を拝見してCopilotにHTMLページを生成したページです。

 https://qiita.com/maekawawawa/items/369a8dcc025dbe66a1df
 
### Chrome検証ツールで確認
詳細ボタン(複数)のUI要素はA~Fのようになっています。
※先頭から3つ目迄を検証
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/b334a7d9-6aaa-1aa4-6c3b-9a0401648c74.png)
※Chrome検証ツールで確認。確認方法は以下記事を参照

https://qiita.com/Masayanf/items/4361e7ae06b0df4a4d7c

Fの部分を確認すると3つとも「詳細」の文字がありますが、以下HTMLタグの指定では何番目の詳細ボタンか認識できずエラーとなります。
※Fの **Text="詳細"** では何番目かを指定できない。
|記号|HTMLタグ|
|---|---|
|A|body|
|B|table|
|C|tbody|
|D|tr|
|E|td|
|**F**|**button[Text="詳細"]**|

### Ordinal属性を使う
ボタンの名前が同じ場合は、順序を示す**Ordinal属性**を使用することで解決できます。
Ordinal属性は、同じ条件で特定できるUI要素が存在した場合、**同条件**の**何番目か**を指定できる属性です。
**:eq**で指定します。

以下HTMLタグの指定は、**1番目**の1/19の詳細ボタンを取得します。
※Fの:eq(0)… 1番目を取得（0から開始のため）
|記号|HTMLタグ|
|---|---|
|A|body|
|B|table|
|C|tbody|
|D|tr|
|E|td|
|**F**|**button[Text="詳細"]:eq(0)**|

以下HTMLタグの指定は、**2番目**の1/18の詳細ボタンを取得します。
※Fの:eq(1)… 2番目を取得（0から開始のため）
|記号|HTMLタグ|
|---|---|
|A|body|
|B|table|
|C|tbody|
|D|tr|
|E|td|
|**F**|**button[Text="詳細"]:eq(1)**|

以下HTMLタグの指定は、**3番目**の1/17の詳細ボタンを取得します。
※Fの:eq(2)… 3番目を取得（0から開始のため）
|記号|HTMLタグ|
|---|---|
|A|body|
|B|table|
|C|tbody|
|D|tr|
|E|td|
|**F**|**button[Text="詳細"]:eq(2)**|


### 変数を使う
:eq()の括弧内は、数字をそのまま指定する以外に**変数**を使用できます。

以下のようにFの部分を変更します。

|記号|HTMLタグ|
|---|---|
|A|body|
|B|table|
|C|tbody|
|D|tr|
|E|td|
|**F**|**button[Text="詳細"]:eq(%Number%)**|

この変数%Number%の値を0、1、2、3…と増やしていくことで詳細ボタンを順番にクリックすることが可能です。
### フローの修正
以下の手順でフローを修正します。
#### UI要素を修正
先程の表に基づいて詳細ボタンのUI要素を修正して保存ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/3339514f-9590-5917-0893-2523f81e1726.png)

変数%Number%が設定されていないため、エラーが出ますが一旦無視します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/e8db8354-e163-db0b-a1b8-632e09f1602e.png)

#### 「Loop」アクションを追加
続いて「Webページのボタンを押します」アクションの前に「Loop」アクションを追加します。

一旦以下のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/afb641e8-b105-784e-3e1e-fb2884ac0be2.png)

そして、「Webページのボタンを押します」アクションを「Loop」～「End」アクションの中に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/4f3b455c-ae61-9c0b-a987-7c43737670ab.png)

これでエラーが消え、500番目まで順番に詳細ボタンをクリックされます。

ただ、この「Loop」アクションの「終了」の500は仮に決めたため、詳細ボタンの数分としたいです。

#### 「Webページからデータを取得する」アクションを追加
「Loop」アクションの前に「Webページからデータを取得する」アクションを追加します。
以下のとおり指定して、この状態で取得するWebページを表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/68a84228-e27e-3a4e-1870-af725e8c6d62.png)

そうすると、「ライブWebヘルパー -Webページからデータを抽出」のポップアップが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/8d7c56fe-9b7e-ac19-38a1-d91d72bb6d64.png)

WEBページを表示して詳細ボタン上にマウスカーソルを合わせると赤枠が表示されるので、詳細ボタンを右クリックして「要素の値を抽出」→「テキスト：（'詳細'）」の順にクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/fa617edf-8ee6-1c56-421f-34cca470fcad.png)

「ライブWebヘルパー -Webページからデータを抽出」に詳細ボタンが１つだけ登録されますが、詳細ボタンの個数が知りたいのでさらに操作を進めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/8beab975-2821-6cfa-6b37-5b899c2ce64b.png)

2個目の詳細ボタンに、マウスカーソルを合わせると赤枠が表示されるので、同じように詳細ボタンを右クリックして「要素の値を抽出」→「テキスト：（'詳細'）」の順にクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/dfc4a332-2e1f-d9f2-1b4a-a720a7dd6bbd.png)

「ライブWebヘルパー -Webページからデータを抽出」に詳細ボタンの内容が1列で取得されます。
※同じ要素を2個登録することで、ライブWebヘルパーが詳細ボタンを1列分取得する操作と判断してHTMLタグが取り込まれます。

このまま終了ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/695a2a2b-3995-7041-d6ae-17075246dfe3.png)

「Webページからデータを抽出」アクションのデータの結果は、「DataFromWebPage」に格納されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/89d9aef7-40d3-49e4-977e-fec2994e2fb1.png)

#### 「Loopアクション」のパラメータ「終了」を変更
Loopアクションのパラメータ「終了」を500から「%DataFromWebPage.RowsCount%」に変更します。
※%DataFromWebPage.RowsCount%は、取得したデータの行の数。つまり詳細ボタンの個数です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/cccd4d17-cb5b-8d33-3c34-23889c19e9cd.png)

### 動作を確認
フローは以下のとおりです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/e3bcaeeb-6bfc-5525-ebdd-8016d4695e20.png)

動作を確認して詳細ボタンが順番にクリックされることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/bff974e6-6519-477d-4f4e-07fb0a767c61.png)

### まとめ
・同条件で特定できるUI要素が存在した場合、**Ordinal属性**を用いることで、**何番目か**を指定できる。
・Ordinal属性のeq:()の括弧内に**変数**を指定し、その変数をLoopアクション等によりカウントアップすることで**順番**に同条件のUI要素を指定可能。
・Webページからデータを抽出するアクションの**Webライブヘルパー**を使用することで対象UI要素の**総数**の確認が可能。（総数は「.RowsCount」で確認）

### 参考文献
この記事は、以下書籍を一部参考にして記載しました。

はじめてのPower Automate Desktop―無料&ノーコードRPAではじめる業務自動化

https://books.rakuten.co.jp/rb/16841474/

動的なUI要素の編集方法についてわかりやすく書かれており、良書です。