エレメントロケーターって？ |
Seleniumを使い始めたときに、まず最初につまづくのがElementLocatorです。
ElementLocatorとは、Selenium実行時にElement（HTMLの要素）を特定するための方法のことです。
Domで指定したり、FormのIDで指定したりといろいろな指定方法があるのですが、やはり一番便利なのはXPathです。
XPathを使えば、特定のテキストに部分一致する要素をピンポイントで抽出したり、
並列に並んだ要素の最後から2番目を持ってくるなど、特殊な条件で位置の特定が可能です。
欠点は慣れるまでに少し時間がかかることと、HTMLの構造をある程度理解している必要がある点です。
今回紹介するのは、FirebugとSeleniumIDEを使った超簡単なXPathの確認方法です。
Step by step
１．Firefoxで位置を調べたいページを開きます
２．Firebugを起動（F12）してHTMLタブを選択状態にします
３．Firebugの左上 虫アイコンの右にある「カーソル選択」アイコンをクリック
4．位置を特定したい部分をクリックすると該当のHTMLが選択状態になります
５．Firebugの窓で、選択されたHTMLの部分にカーソルを移動して右クリック
６．「xPathをコピー」を選択します
６．「xPathをコピー」を選択します
すると、こんな感じのPathが取れます。
/html/body/div/div[2]/div[3]/div/div/div[2]/div/div/ul/li/a
７．次にSeleniumIDEを起動します（自動保存はOffにします）
８．コマンドリストの一番上の部分をクリック
９. コマンドには何も入力しないで「対象」に 対象に先ほどのPathをコピーします
１０．そのままだとエラーになるので /html/body の部分を / に変更します。
結果例→ //div/div[2]/div[3]/div/div/div[2]/div/div/ul/li/aとなります。
結果例→ //div/div[2]/div[3]/div/div/div[2]/div/div/ul/li/aとなります。
１３．SeleniumIDEの対象の右にある検索ボタンをクリックすると
Yahooトップページのトピックの最上位の部分が点滅します。
Yahooトップページのトピックの最上位の部分が点滅します。
これだけです。
HTMLの構造を一切意識しないでXPathを使うことができました。
さらに進んだ使い方
XPathは相対指定ができるので、例えば
//div/div[2]/div[3]/div/div/div[2]/div/div/ul/li/a/../../li[2]
のように書くと、トピックの最上位の<a>を起点に
2階層移分上に移動した場所にある、2番目の<li>（トピックの2番目）が選択範囲になります。
のように書くと、トピックの最上位の<a>を起点に
2階層移分上に移動した場所にある、2番目の<li>（トピックの2番目）が選択範囲になります。
まれにHTML構造上の理由から、上記の方法では期待する位置が特定できない場合もあります。
そのときは、XPathの最後の要素をひとつずつ消しながらIDEの「検索」ボタンと押すと、
Locatorがどこを見ているのか一目で分かります。
目当ての要素が選択範囲に含まれたら、今度はFirebugのHTMLタブをみながら、
要素をひとつひとつ追加していくと、最後には目当ての要素にたどり着くことができます。
属性を指定したり、テキスト部分一致を利用したXPathの書き方に関しては、また後日まとめたいと思います。
