UiPath

【UiPath】セレクターの修正、変数,アンカー,要素を探すによる指定方法

UiPathのロボットを安定して動作させるのにセレクターの理解は必須です、

しかし、セレクターは、UiPath独自のUI要素指定方法なので、なかなか理解しづらい概念です。

この記事では、セレクターとは何か、セレクターの修正方法、変数,相対指定,アンカー,要素を探すによる指定方法について、解説します。

 

セレクターとは

セレクターとは、アプリケーション上のボタンや文字列などのUI要素を、UiPathが認識するためにテキスト化した住所のようなものです。

セレクターを一意に指定し、操作するUI要素を特定することで、クリックやテキスト入力などの操作を安定して、動作させることができます。

ペンギンさん
ペンギンさん
セレクターは、位置指定や画像指定より、UI要素の変更の影響を受けにくいので、動作が安定する傾向があります。

 

セレクターの確認方法

セレクターの確認方法は、プロパティのセレクター、セレクターエディター、UI Explorerの3通りあります。

プロパティのセレクターで確認する

クリックや文字入力などのUI要素を指定する必要があるアクティビティのプロパティで、セレクターを確認することができます。

ラッコくん
ラッコくん
上図の赤枠で囲った[セレクター]の項目にあるテキストがセレクターだよ。

 

セレクターエディターで確認する

セレクターを構造的に確認したい場合は、セレクターエディターを使用します。

①アクティビティのプロパティのセレクターの横にある[・・・]をクリックする

②セレクターエディターが開くので、下図の赤枠内を確認する

 

 

UI Explorerで確認する

すべてのセレクターを確認したい場合は、UI Explorerを使用します。

UI Explorerは、セレクターエディターから開く方法、Studioのリボンから開く方法の2通りあります。

 

■セレクターエディターから開く方法
①セレクターエディターの[UI Explorer で開く]をクリックする

②UI Explorerが開くので、右下の赤枠部分のセレクターを確認する

ペンギンさん
ペンギンさん
セレクターエディターの上部分にチェックを入れたり外したりすることで、セレクターを追加や削除することができます。

 

■Studioのリボンから開く方法
①Studioのリボンの[UI Explorer]をクリックする

②[要素を選択]をクリックする

③セレクターを取得したい要素をクリックする

④UI Explorerの右下の赤枠部分のセレクターを確認する

ラッコくん
ラッコくん
「③セレクターを取得したい要素をクリックする」で要素を指定するときに、ホットキーのF2を押すと要素の選択を3秒間待ってくれるので、アクティブなウインドウを切り替えることができるよ

 

セレクターの構造

セレクターは階層で構造されている

セレクターは、

  1. アプリケーションのトップウインドウ
  2. 親の要素1
  3. 親の要素2
  4. ・・・
  5. UI要素

の階層構造を持っています。

 

IEの戻るボタンは下図のように、

  1. IE(アプリケーションのトップウインドウ)
  2. ナビゲーションバー(親の要素1)
  3. ツールバー内の一つ目(親の要素2)
  4. 戻るボタン(UI要素)

のセレクターで表されます。

 

セレクターは属性と値であらわされる

セレクターは、属性が赤、値が青で表示されます。

下図の1行目を例にすると、

  • 属性は、[app]、[cls]、[title]
  • 値は、[iexplore.exe]、[IEFrame]、[Yahoo! JAPAN – Internet Explorer]

になります。

ペンギンさん
ペンギンさん
1行目の「app=’iexplore.exe’ 」は、アプリがIE(インターネットエクスプローラー)であることを表しています。

 

完全セレクターと部分セレクターの2通りある

セレクターの指定方法は、

  • 完全セレクター
    最上位ウインドウ(アプリケーション)を含む、UI要素の特定に必要な要素をすべて持つセレクターのことです。
  • 部分セレクター
    最上位ウインドウ(アプリケーション)を含まず、ウィンドウにアタッチなどのコンテナ内で指定するセレクターのことです。

の2通りあります。

 

完全セレクターのサンプル
・プロセス

・「ハイライト 戻る」のセレクター

ラッコくん
ラッコくん
完全セレクターなので、最上位ウインドウのIEを含んでいるよ。

 

部分セレクターのサンプル
・プロセス

・「ウインドウにアタッチ」のセレクター

 

・「ハイライト 戻る」のセレクター

ペンギンさん
ペンギンさん
部分セレクターなので、1行目が「ウインドウにアタッチ」のセレクターから引き継がれており、修正できません。

 

セレクターの修正

インデックス ( idx ) 属性はなるべく使用しない

セレクターのインデックス ( idx )属性は、選択した要素が固有の情報を持たない(複数の要素が同一のセレクターを持つ)場合、自動的に生成されます。

そのため、idxはUI要素の変更を受けやすいため、なるべく使用しない方が安定稼働するロボットを作成できます

idxのセレクターを別のセレクターへ修正する手順を紹介します。

 

サンプルプロセス
Yahooの路線情報の「出発」をハイライトする。

 

・対象の画面

・ハイライトの初期セレクター

ラッコくん
ラッコくん
idxが含まれているので、別のセレクターが取れないか、UI Explorerを開きます。

 

・修正前のUI Explorer

ペンギンさん
ペンギンさん
右上の「aaname」と「出発」を使えば要素を一意に指定出来るので、チェックを入れて、idxを削除します。

 

・修正後のUI Explorer

 

・修正後のUI Explorer2

ラッコくん
ラッコくん
修正後のハイライトセレクターで、正しく要素を認識しているか、ハイライトをクリックするよ。

 

・ハイライトクリック時のブラウザ

ペンギンさん
ペンギンさん
「出発」の部分が赤枠でハイライトされたので、問題ありませんでした。

 

・修正後のUI Explorer3

ラッコくん
ラッコくん
次に[検証]をクリックして、セレクターに問題がないか確認するよ。

 

・修正後のUI Explorer4

ペンギンさん
ペンギンさん
左上の[検証]が緑色になったので、セレクターに問題ありませんでした。右下の[保存]をクリックします。

 

・セレクターエディター

ラッコくん
ラッコくん
セレクターエディターに修正内容が反映されているので、[OK]をクリックして、完了だよ。

 

ワイルドカードを使用する

セレクターの値が、ファイル名や日付などの可変の場合は、ワイルドカードを使用します。

ワイルドカードは、

  • *
    複数文字を表します。
  • ?
    単一文字を表します。

の2種類存在します。

 

サンプルプロセス
Yahooの現在日付をハイライトする。

・対象のUI要素

 

・ハイライトの修正前のセレクター

ペンギンさん
ペンギンさん
aanameに具体的な日付が入っているので、明日以降要素を指定できなくなる可能性があります。

 

・ハイライトの修正後のセレクター1

ラッコくん
ラッコくん
年は4桁固定なので????、月と日は1桁か2桁なので*、曜日は1文字固定なので? へ修正するよ。

 

・ハイライトの修正後のセレクター2

ペンギンさん
ペンギンさん
修正後のセレクターで正常に要素を指定で来ているか、ハイライトと検証をクリックして、確認します。

 

・ハイライトの修正後のセレクター3

ラッコくん
ラッコくん
左上の検証が緑色になり、セレクターに問題はなかったので、右下のOKをクリックして、セレクタの修正は終了だよ。

 

変数を使用する

セレクター内の値が規則的に変わる場合は、セレクター内の固定値を変数に置き換えます。

修正方法は、対象アクティビティのプロパティのセレクター項目をテキストとして編集します。

ペンギンさん
ペンギンさん
セレクターエディターを使用しないことに注意してください。

 

サンプルプロセス
Yahooの天気予報の指定日付をハイライトする。

 

・対象サイトの画面

 

・ハイライト 修正前の数値固定セレクター のプロパティ

 

・ハイライト 修正後の変数セレクター のプロパティ

・実行結果

 

セレクターの修正方法
①修正対象のアクティビティのセレクターのテキスト欄をクリックする

 

②セレクターを編集する。
・修正前

・修正後

ラッコくん
ラッコくん
aaname=’23’をaaname='”+strDay+”‘ へ修正しているよ

 

・セレクターのテキスト

・修正前
"<html title='Yahoo!天気・災害 - 天気予報 / 防災情報' /><webctrl aaname='23' tag='EM' />"

・修正後
"<html title='Yahoo!天気・災害 - 天気予報 / 防災情報' /><webctrl aaname='"+strDay+"' tag='EM' />"

 

 

 

セレクターの相対指定

アンカー ベース (Anchor Base)を使用する

安定するセレクターでコンテンツを指定できない場合は、「アンカー ベース (Anchor Base)」を使用します。

コンテンツの近くにある安定するコンテンツを「アンカー ベース (Anchor Base)」内で「要素を探す (Find Element)」にて指定し、間接的にコンテンツを指定します。

「アンカー ベース (Anchor Base)」は、UIAutomation>要素>検出>アンカーベース にあります。

「要素を探す (Find Element)」は、UIAutomation>要素>検出>要素を探す にあります。

 

サンプルプロセス
Yahooの天気予報の金沢の天気をハイライトする。

・対象のサイト

・「要素を探す」のプロパティ

ラッコくん
ラッコくん
セレクターで「金沢」を指定しているよ。

 

・「ハイライト」のプロパティ

ペンギンさん
ペンギンさん
「要素を探す」で金沢を指定しているので、相対的に天気を指定するセレクターになります。

 

・実行結果

 

相対セレクターを使用する

安定するセレクターでコンテンツを指定できない場合は、アンカー ベース以外に相対セレクターを使用する方法があります。

コンテンツの近くにある安定するセレクターを指定し、間接的にコンテンツを指定します。

相対セレクターは、UI Explorerを使って作成します。

 

サンプルプロセス
Yahooの天気予報の金沢の天気をハイライトする。

・対象のサイト

・「ハイライト 修正前 通常のセレクター」のプロパティ

ペンギンさん
ペンギンさん
金沢を指定する情報がなく、UiPathが自動生成するidxが含まれているため、不安定なセレクターです。

 

・ハイライト 修正後 相対セレクター

ラッコくん
ラッコくん
金沢を見つけた後、相対的に天気を指定しているので、安定したセレクターです。

 

・実行結果

 

セレクターの修正方法
①セレクターの[・・・]をクリックする。

②[UI Explorer]をクリックする。

③[アンカーを選択]をクリックする。

ペンギンさん
ペンギンさん
安定するセレクターがないので、アンカーでセレクターを指定していきます。

 

④[金沢]を指定します。

⑤アンカー指定のセレクターが作成されたことを確認します。

⑥aanameの曇りをワイルドカードの*へ修正する。

ラッコくん
ラッコくん
天気は晴れや雨が考えられるので、複数文字のワイルドカードの*を使用します。

 

⑦[ハイライト]と[検証]をクリックします。

ペンギンさん
ペンギンさん
修正したセレクターに問題がないか、ハイライトと検証で確認しています。

 

⑧[保存]をクリックします。

⑨[OK]をクリックします。

以上で、セレクターの修正は完了です。

 

子要素を探す(Find Children)を使用する

指定セレクター内のコンテンツを子要素のセレクターを指定するのは、「子要素を探す(Find Children)」を使用します。

「子要素を探す(Find Children)」で子要素を取得し、「繰り返し (コレクションの各要素) (For Each)」で子要素のセレクターに対してアクティビティを実行します。

「子要素を探す(Find Children)」は、UI Automation>要素>検出>子要素を探す にあります。

 

サンプルプロセス
Yahooの天気予報の日付をハイライトする。

・対象のサイト

・「子要素を探す」のプロパティ

ラッコくん
ラッコくん
セレクターで左上の日付の枠を指定しているよ。
ペンギンさん
ペンギンさん
出力の子は、「Uipath.Core.UIElement」型を設定しています。

 

・「繰り返し (コレクションの各要素)」のプロパティ

ラッコくん
ラッコくん
その他のTypeArgumentに「子要素を探す」で出力された「Uipath.Core.UIElement」を指定しているよ。

 

・変数

・実行結果

 

まとめ

  • セレクターとは、アプリケーション上のボタンや文字列などのUI要素を、UiPathが認識するためにテキスト化した住所のようなものです。
  • セレクターの修正は、プロパティのセレクター、セレクターエディター、UI Explorerから行えます。
  • セレクターは、ワイルドカードや変数で指定することもできます。
  • セレクターの相対指定は、アンカー ベース (Anchor Base)、相対セレクター、子要素を探す(Find Children)の3通りあります。

 

最後に関連記事を紹介します。

↓UiPath Studioのプロセス作成方法、アクティビティの使い方、開発時のチップスを網羅的に説明した記事です。

【UiPath】プロセス作成方法やアクティビティの使い方のまとめ記事UiPath Studioでのプロセス作成方法やアクティビティの使い方を体系的に学びたい方向けに、UiPath Studioのプロセス作成方法、アクティビティの使い方、開発時のチップスを分かりやすく説明します。...

https://penrako.com/uipathstudiosummary/(別ウインドウ)

 

↓使用頻度の高いアクティビティについて、アクティビティで出来ることと、アクティビティガイドへのリンクを一覧で解説した記事です。

https://penrako.com/activitylist/

https://penrako.com/activitylist/(別ウインドウ)