Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Power Automate for DesktopのUI要素の編集

Last updated at Posted at 2025-01-26

Power Automate for DesktopでのUI要素の編集方法を記事にします。

UI要素編集の必要性

UI要素は「UI要素の追加」よりマウス操作で取得できます。
image.png
※以前記事にしました。

しかしながら、UI要素が動的に生成され要素のIDや名前が毎回異なるWebシステムの場合や、Webページにおいてもレイアウト変更が行われる場合もあります。
このようなケースの場合、たいていUI要素が認識されずフロー実行の失敗に繋がりますが、UI要素編集を行うことで回避できる場合があります。

今回は下記ページの赤枠の詳細ボタン(日付2025-01-19) を押したものの 「Webページのボタンを押します」 アクションでエラーとなった場合の対処を記載します。
image.png
※下記の記事を拝見してCopilotにHTMLページを生成したものになります。

image.png

UI要素を確認

取得したUI要素を確認するには、赤枠の「詳細ボタン」をダブルクリックします。
image.png

すると詳細ボタンのUI要素は赤枠のようになっていることが分かります。

image.png

このUI要素を押さえておきます。

 > body > table > tbody > tr > td > button[Text="詳細"]

Chrome検証ツールで確認

どのブラウザにも検証ツールといわれるものがあるのですが、今回はChrome検証ツールを使用してHTMLファイルの中身を確認します。

検証ツールとは、Webページの構造やスタイル、動作を確認・編集できるツールです。

Chromeブラウザ上で以下手順を行います。

①詳細ボタンを右クリック
image.png

②検証をクリック
image.png

③ハイライト部分を確認
右側にHTMLコードが表示されるので、緑のハイライト部分が2025-01-19の詳細ボタンのタグであることを確認します。
image.png

④UI要素がどのHTMLタグに相当するか確認
Power Automate for Desktop上の詳細ボタンのUI要素は以下となっておりました。

 > body > table > tbody > tr > td > button[Text="詳細"]

上記のHTMLタグを「A」~「F」の記号と分類して検証ツール上でどこに相当するか確認します。

記号 HTMLタグ
A body
B table
C tbody
D tr
E td
F button[Text="詳細"]

すると「A」~「F」は以下の部分にそれぞれ記載されていることが分かります。
image.png

⑤UI要素の修正箇所を特定
Power Automate for Desktop上では「F」の部分がbutton[Text="詳細"]となっていますが、ボタンのテキストに「詳細」と記載された文字は複数あります。

2025-01-19の詳細ボタンをクリックさせるには、「F」の部分のbutton[Text="詳細"]に他の条件を追加する必要があります。

検証ツールの「F」の箇所は下記となっており、URL の「 https://weather.example.com/2025-01-19 」で2025-01-19を特定できそうです。

<button onclick="openLink('https://weather.example.com/2025-01-19')" mspad-previous-style="" style="">詳細</button>

「F」の部分を下記のとおり変更すると2025-01-19の詳細ボタンをクリックできそうです。

変更前 変更後
button[Text="詳細"] button[Text="詳細"][onclick*="https://weather.example.com/2025-01-19"]

変更後の内容について
「表示文字」=「詳細」かつ「クリック時のURL」が「 https://weather.example.com/2025-01-19 」を含むという意味になります。
※「*=」は含むという意味の演算子

UI要素を修正する

Power Automate for DesktopでUI要素を実際に修正します。
UI要素を確認した画面上で、テキストエディターの切り替えボタンをオンにすることでテキスト入力可能となるので、UI要素の内容として「[onclick*="https://weather.example.com/2025-01-19"]」を追記します。
保存ボタンをクリックすることでUI要素の編集が完了します。

image.png

動作を確認

Power Automate for Desktopを起動して2025-01-19の「詳細」ボタンがクリックされることを確認します。
image.png

【補足】検証ツールについて

検証ツールは、Webページの構造やスタイル、動作を確認・編集できるツールと紹介しました。
タグの内容を編集するにはタグ(ハイライト部分) をクリックして 「F2」キーを押すことで、擬似的にタグ内容の変更が可能です。

ブレークポイントを指定しての検証になりますが、レアケースWebデータの場合などに、擬似的にテストパターンのデータを作成するテストには有効そうです。
※本番のデータを使用したほうが良いことは言うまでもありません。

image.png

まとめ

・UI要素が動的に生成され要素のIDや名前が毎回異なるWebシステムの場合や、Webページレイアウトの修正にはUI要素の編集が必要
Chrome検証ツールを使用することで、Webページのタグを確認可能。
・Power Automate for DesktopのUI要素の確認画面でテキストエディターをオンにするとUI要素の修正可能。

UI要素を編集することで、急なWebページの変更に対処することが可能となりますのでご紹介しました。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?