セレクターは何をセレクトしようとしているのか
ウェブページ上のクリックする対象を確実にセレクターで特定するにはウェブページの構造を確認することが必要となる。その際には多くのブラウザーに備わっているHTML確認ツールを利用するとよい。以下Chromeの「検証」の機能を使って確認する。
1. ChromeのHTML確認ツールを起動する。目的のウェブページでなにもないところを右クリックし「検証」を選択する。
2. Chromeの右ペインに目的のウェブページのHTML構造が表示される。
3. Webページのボタンを押すフローをつくる。アクション「Webページのボタンを押します」にてMSNのサイトのニュース欄の一つのリンクのUI要素を取得してみる。
4. UI要素を取得した結果自動的に以下のようなセレクターが取得された。
5. 取得したリンクの場所をChromeで探す。右ペイン上でマウスを上下に動かすと左ペインのウェブページ上で該当する箇所がハイライトされるので探しやすい。
6. 取得したリンクについてウェブページ上の位置関係を詳しく確認する。
7. ウェブページ上のタグと下記の自動取得されたセレクターとを比較すると、同一の構造をしていることがわかる。セレクターはClassの値などをもれなく指定している。
main[Id="main"] > div[Class="stripecontainer"]:eq(0) > div[Class="news stripeouter"] > div[Class="stripe full-width"] > div[Class="paging-container"] > div[Class="newlist stripeheadlinelinklist"]:eq(0) > div[Class="one-col"] > ul[Class="col"] > li[Class="hdlist primary"]:eq(0) > a[Class="contentlink"]
UI要素を取得した際にセレクターが何を自動取得しているのかが分かり、セレクターとウェブページとの対応関係が分かればこっちのもの。セレクターを編集して柔軟に目的の場所を指定することができる。
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の内容等の状態が少しかわったりするとセレクターで対象を発見できずエラーとなることがある。そのような場合には自動取得されたセレクターを編集する必要がある。どのような方針で編集していけばよいのだろうか。...「なんだか難しそうだなあ。」...「文系の私でもできるの？」... もちろん。つづいてセレクターの編集の方法やコツをお送りいたします。
