はじめに
UiPathでWebサイトからセレクタを取得すると、思ったような要素が見つからないことがあります。そこで今回は、セレクタ取得で困った時に試すべきコツをご紹介します。
環境
UiPath：Studio 2025.0.176-cloud.21153 - 2025/09/18 Community License
Edge：140.0.3485.94
コツ①:UiExplorerの使用
最初に試すべきはUi Explorerの活用です。
既にご存知の方もいると思いますが、簡単におさらいします。Ui Explorerの編集画面は、下記の3つに分かれています。
- ビジュアル ツリー
- プロパティ エクスプローラー
- セレクタ エディター
ビジュアル ツリーは画面内の要素を探すときに利用します。
プロパティ エクスプローラーは選択した画面にどの要素が含まれているか確認するために利用します。
セレクタ エディターはその言葉の通りセレクタを編集する画面です。画面上部で使用するセレクタを選択し、画面下部で選択したセレクタを調整します。
セレクタ探索で最も重要なのはビジュアル ツリーです。HTMLがわからなくても、左上のアイコンが補助になります。
- ハイライト：ビジュアル ツリーで選択中の要素を対象画面で強調表示してくれます。ハイライトの位置と範囲を見て、狙っている要素かどうか確認しましょう。
- 検索オプションの表示：要素名や属性でツリーを検索できます。大量の要素から目的の候補を絞り込む際に有効です。
コツ②:開発者モードの使用
次に紹介するのはブラウザの開発者ツールです。画面の要素（DOM）を直接確認できます。
Edgeの場合、アドレスバーを選択した状態でF12またはCtrl+Shift+Iで開きます。
上記の画像のようにElementsタブでHTMLタグ（DOM）を選択すると、対応する要素が画面左側で強調表示されます。
Ui Explorerと開発者ツールを併用することで、
- DOM上の候補を開発者ツールで特定
- 候補の属性をプロパティ エクスプローラーで確認
- セレクタ エディターで検証・調整
という流れで、狙った要素のセレクタを精度良く作成できます。
参考文献