UI要素とセレクター概要

ウェブサイトやアプリケーションのウィンドウ上の要素をクリックしたりテキスト入力欄にテキストを入力したりする場合にはWebオートメーションやUIオートメーションを利用する。それらアクションを実行するにはウィンドウ上のUI要素を取得して設定する必要がある。UI要素にはセレクターが含まれており、クリックなどを実行する対象をそのセレクターで特定することとなる。

Webページのボタンを押すフローの例

Webブラウザーインスタンスを取得する

Webオートメーション実行に必須の準備アクション。例えばフォアグラウンドで開いているChromeをWebブラウザーインスタンスとして取得する。

UI要素を取得する

取得したWebブラウザーインスタンスを指定しつつUI要素を指定する。ウェブサイトのページ上の押したいボタンのUI要素を新規取得するため「UI要素」の欄の右側の下矢印を押す。

そして「UI要素の追加」ボタンを押す

押したいボタンがあるサイトを開いて、押したいボタンあたりにマウスを移動していって赤い枠が出たらCtrlを押しながらクリックする。「追跡セッション」のウィンドウ上に取得したUI要素が現れたら完了ボタンを押す。なおアクションの名称は「Webページのボタンを押します」だが特段にボタンの形状をしていなくとも問題なく、ウェブサイト上のよくある普通のリンクを押すために使える。

取得したUI要素は右ペインのUI要素の一覧に表示される。UI要素の取得が完了。

セレクターの確認

右ペインに表示されるUI要素をダブルクリックすると「UI要素"〇〇"のセレクター」というダイアログが表示される。さらにbodyとかClassとかの文字が書いてあるグレーの部分をダブルクリックする。

セレクター ビルダーが表示される。ここで押したいボタンを特定していることとなる。階層構造をしていたりbodyやdivやh3等があることから分かるとおり、目的のウェブサイトのページのHTMLの構造とタグ等の要素によって押したいボタンの場所が表現されている。

ウェブサイトのページからUI要素を取得すると上記のようにセレクターが自動的に取得される。自動的に取得されたままの状態で問題なくクリックできることがほとんどだが、ページ上のテーブルの数やClassの内容等の状態が少しかわったりするとセレクターで対象を発見できずエラーとなることがある。そのような場合には自動取得されたセレクターを編集する必要がある。どのような方針で編集していけばよいのだろうか。...「なんだか難しそうだなあ。」...「文系の私でもできるの？」... もちろん。つづいてセレクターの編集の方法やコツをお送りいたします。