あれ、クリックできない？！UI要素取得の罠｜Power Automate for desktop
対象者：UI要素エラーでお困りの方
前提環境：Power Automate for desktop（無料版）
所要時間：約3分（作業時間の目安：約5分）
今回は、「昨日まで動いていたフローが突然動かなくなった」「UI要素が見つからない」といった場合の対処方法をご紹介します。
UI要素の情報を確認し、修復する手順を順番に見ていきましょう。
ちょっと小話…
「あれー？どうした！昨日作ったフローが動かないんだけど！」
ある日、上司から突然呼ばれました。
「エラー内容、見せてもらっていいですか？」
確認してみると、昨日取得したはずのUI要素が見つかりません。
「…フローが探しているUI要素の情報が変わっていますね。」
「えっ？そんなことあるの？」
そうなんです。Webサイトによっては、アクセスするたびに要素を識別するための情報が「動的」に変わったり、アップデートによってそのUI要素自体が変わってしまうこともあります。
そのため、昨日まで動いていたフローが突然エラーになることもあるんです。
今回は、そんな『動的に変わること』が原因で発生するUI要素取得の落とし穴について見ていきましょう。
前提条件
使用ブラウザ：Microsoft Edge
拡張機能：Microsoft Power Automate
※初回のみ、ブラウザでWeb操作を行うため、PADの［ツール］→［ブラウザー拡張機能］オプションから手動でインストールし、Microsoft Power Automate の拡張機能を追加してください。
事前準備
初めてPower Automate for desktopを操作される方は、インストール方法やフローの作成方法、アクションの追加方法などをまとめた基本操作ガイドを先にご確認ください。
本稿では、基本操作ガイドでフローの作成方法やアクションの追加方法を確認済みであることを前提に、新しいフローを作成していくところからスタートします。
利用するWebサイトについて
今回利用するサイトは、学習用に公開されている動的なWebページです。ボタンの情報が自動的に変化するため、RPAやWeb操作の学習環境として広く利用されています。
まずは上記サイトを Microsoft Edge で開いておいてください。
画面が表示されたら、ブラウザーの更新ボタンを数回クリックしてみましょう。ボタンに表示されている名前が変化することから、このボタンの情報が動的に変わっていることが確認できます。
今回は、この動的に変化するボタンを Power Automate for desktop でクリックする方法を学習します。
実習
1. Webサイトを開く
アクション名: 新しい Microsoft Edge を起動
💡最初にブラウザーを起動します。PADでは、このアクションを使って指定したWebページを自動で開くことができます。
設定する内容:
起動モード: 実行中のインスタンスに接続する
Microsoft Edge タブの一致モード: 混在
Microsoft Edge タブに接続する: URL を使用
タブの URL:https://the-internet.herokuapp.com/challenging_dom
ターゲット デスクトップ: ローカル コンピューター
ブラウザーの操作方法: ブラウザー拡張機能
※すでに開いたEdgeに接続しますので、起動モードは「実行中のインスタンスに接続する」を設定しています。
2. ボタンをクリックするアクションを追加する
アクション名: Web ページのリンクをクリック
💡Webページ上のボタンやリンクをクリックするアクションです。
今回は画面左側にある一番上の青いボタンをクリックします。
設定する内容:
Web ブラウザーインスタンス:Browser
UI要素:空のフォームをクリック＞UI要素の追加ボタンをクリック
Edgeのブラウザー上、Challenging DOMの一番上の 青いボタンへマウスカーソルを移動＞Ctrlキー+左クリックでUI要素を取得する
クリックの種類:左クリック
※UI要素はEdge上でピッカーが表示され、赤枠で対象ボタンが囲まれていることを確認してからCtrl+左クリックを行いましょう。
3. フローを実行し、UI要素エラーを発生させてみよう
さあ、今回の目的のフローが作成できました。
フローを保存し、「実行」ボタンをクリックしてみましょう。正常に実行されれば、Webサイト上のボタンがクリックされるはずです。
しかし、このサイトにはひとつ仕掛けがありました。先ほどブラウザーの更新ボタンを押した際、ボタンの名前が変化していましたね。
では、もう一度「実行」ボタンをクリックしてみましょう。すると、UI要素が見つからないエラーが発生したはずです。
4. UI要素をセレクター画面から確認する
先ほど作成した「Web ページのリンクをクリック」アクションを開き、エラーの原因を確認してみましょう。
鉛筆のマークをクリックしてください。
すると、下記のセレクター画面が開きます。この画面は、PADがどのボタンや入力欄を操作するのかを判断するための情報（セレクター）が登録されている場所です。
5. 修復機能で原因を調べてみよう
セレクター画面で「修復」をクリックしてください。
💡修復は、PADが見つけられなくなったボタンや入力欄をもう一度選択して認識させる機能です。
修復時には、以前取得したUI要素の情報と現在の情報を比較できるため、「Class」や「ID」など、何が変わったのかを確認する手がかりにもなります。
「修復」をクリックしたら、下記のように実際の画面上で青いボタンを再度選択してください。
すると、下記のような画面が開きます。
💡上記の画面では、前回取得したときの値と現在の値を比較できます。今回は、Id の値が変わっていることが確認できます。
これで、何が変わったことによってエラーになったのか分かりましたね。
PADはこの内容で修復することを提案してくれていますが、今回は別の解決方法も確認してみたいので、「キャンセル」をクリックして閉じましょう。
解決策
UI要素を「変動する値」から「変わらない値」へ変更する
今回のケースでは、原因はとてもシンプルです。
PADはボタンを識別するために「Id」を使用していました。しかし、この Id はページを更新するたびに変わってしまいます。
そのため、変動する Id ではなく、変わりにくい情報を使ってボタンを識別するように変更します。
この要素一覧は、画面全体から目的の部品へ向かって順番に並んでいます。そのため、UI要素が取得できなくなった場合は、実際に操作したいボタンやリンクを表している部分を確認することで、原因を特定できることがあります。
今回は、一番下にある要素のチェックが付いている項目をクリックしてください。なお、この要素名は変動するため、皆さんの画面では異なる名前が表示されているはずです。
エラーの原因になっている「Id」のチェックを外し、代わりに「Class」にチェックを付けます。
Class とは、その要素の種類や役割を表す情報のことです。今回の画面では、Class の値に「button」が設定されています。
「他にもボタンがある場合はどうするの？」と思った方もいるかもしれません。
実際に他のボタンのUI要素を確認してみると、それぞれ異なる Class が設定されています。そのため、この画面では Class を使って各ボタンを区別することができます。
テストで確認する
最後に「テスト」をクリックします。
💡「テスト」は、現在の設定でPADが対象のボタンや入力欄を正しく認識できるかを確認する機能です。設定を変更した後に実行することで、保存する前に設定内容が正しいかを確認できます。
対象のUI要素を正しく認識できると、下記のように緑色のチェックマークが表示されます。
緑色のチェックが表示されたら、そのUI要素は正しく指定できています。「保存」をクリックし、フローを再度実行してみましょう。
最後に
今回は、UI要素の「Id」が変わっていたことが原因でエラーが発生していました。ただし、UI要素エラーの原因はこれだけではありません。今回ご紹介した方法は、あくまで解決方法の一例です。
UI要素でエラーが発生したときは、まずセレクターの内容を確認し、「テスト」や「修復」を使って原因を調べてみましょう。原因を特定できれば、解決できるケースも少なくありません。
「エラーが出たから最初から作り直す」のではなく、「まずUI要素の情報を確認してみる」。
そんな視点を持っておくと、トラブル対応がぐっと楽になります。
▼ ご質問・記事リクエストは、こちら
note質問箱
いいなと思ったら応援しよう！
よろしければ応援をお願いします。いただいたチップは、活動費として活用し、一部は寄付に回しています。