UiPath セレクターを理解してみる【part1】

4182 ワード
UiPath UiPath テキストリンク

前回の続きです。

セレクター手動生成？

セレクターとは下図のようなものですね。
UiPathを触っている方は見たことない人はいないですね。

ちなみに、このセレクターはGoogle検索のここを指しています。

さて、みなさんXMLってご存じでしょうか。
ご存じの方はぴんと来ていると思いますが、セレクターってXMLなんですよ。

<html title='Google' />
<webctrl name='q' tag='INPUT' />

htmlタグがあって、htmlタグにはtitle属性がある。
webctrlタグがあって、webctrlタグにはname属性とtag属性がある。

このXML文字列がセレクターということは、これがどういったルールで記載されているか解析すれば、手動生成できそうです。

開発者ツールでHTMLを見て、手動生成してみる

Chromeブラウザを開いて、F12を押すと開発者ツールが開けます。

Elementsタブをクリックし、赤枠の矢印を押しましょう。

そして、Google検索の入力欄へマウスを持っていくと、こうなります。

その状態でクリックすると、該当のHTMLをハイライト表示してくれます。
赤枠のところはcss-selectorと呼ばれるものです。

試しにcss-selectorで手動生成してみましょう。
UiPathはcss-selectorに完全に対応しているわけではないので注意が必要です。
classとidはcss-selectorに指定できません。

下記のようなセレクターが作りました。
chromeで動作させたい場合は、app属性に「chrome.exe」を指定してください。
その場合、UiPathにChrome拡張機能をインストールしないと動かないので注意してください。

<html title='Google' app='iexplore.exe' />
<webctrl css-selector='html>body>div>div>form>div>div>div>div>div>input' class='gLFyf gsfi' />

では、TypeIntoアクティビティに文字列を丸ごとつっこんで実行しましょう。
赤枠の個所に""で囲んだセレクターを入力します。

iexplore.exeを立ち上げ、https://google.co.jp にアクセスした状態にしておきます。
そして、TypeIntoアクティビティを用意して、セレクターをセットしたら、実行します。

問題なく実行できると思いますので、確かめてみてください。

終わりに

かなり飛ばし飛ばしに説明しましたが、自分でセレクターを研究してみると面白いです。
HTMLやCSSといったWeb知識はもちろん、WinFormやWPF、UWPといったWindowsのGUIフレームワークについても理解しておくと、理解の手助けになります。