ビヘイビアの河又です。今日は、RPAで頻出する「セレクター」についてです。RPAにおけるセレクターとは、画面内の個々の要素を表す住所のようなものです。代表的な「CSSセレクター」を紹介します。
セレクターはWebページ内の住所です
RPAにおけるセレクターとは、画面内の個々の要素を表す住所のようなものです。Webページに「URL」があるように画面内の見出しやボタン等にもそれぞれ住所があり、それをセレクターと呼びます。Webの世界では今回紹介する「CSSセレクター」が最もよく使われており、その他にも複雑な指定が可能な「XPathセレクター」等があります。
Webページ内要素を指定する「CSSセレクター」
上記の図は、Google Chromeでサイトを開いて右クリックし「検証」を押すと出てくる「Chrome開発者ツール」で、Yahooのロゴを選択し、CSSセレクタを呼び出している様子です。「Copy selector」を押すと、以下がクリップボードにコピーされます。
#masthead > h1 > a > img
これは、YahooのロゴがCSSセレクター的に以下の住所にあることを示しています。
- mastheadというIDが付いている何らかの要素の中の
- H1(見出し)要素の中の
- A(リンク)要素の中の
- IMG(画像)
この場合、IMGは3つの親要素に依存しているので、例えば一番上の要素が別のIDになったりH1がH2になるとセレクターは動作しなくなります。
このようなWebサイト側の構造変更は防ぎようがありませんが、なるべく壊れにくいRPAを設計するコツとして、親子関係への依存を最小限としたセレクターを指定するというものがあります。
上記のYahooのロゴまわりのHTMLを切り出すと以下のようになっています。
IMGタグにはIDもClassもないというRPA的には厳しい仕様ですが、alt属性で指定することで一応、IMGタグひとつだけに依存した状態にすることができます。(正直、これも不安定なセレクターですが、、)
img[alt='Yahoo! JAPAN']
このCSSセレクターをChrome開発者ツールの「Console」から叩いてみると以下のように正しく指定できることが確認可能です。
独自のセレクターを持つRPAもあります
今回紹介した「CSSセレクター」はWeb標準に基づいていますが、RPAソフトによっては独自のセレクターを持っているものもあります。特にWindowsアプリ等のWeb以外の場所を操作する場合は、RPAソフトが独自に用意しているセレクターを使ったり画像認識で対応したりします。
Robotic CrowdでもCSSセレクターが利用可能です
弊社が正規代理店として推奨するクラウド型RPAツール Robotic Crowd でも、CSSセレクターを使ってWeb上の要素を特定し、クリック等の操作を実行することができます。
