ページ

2012年7月12日木曜日

SeleniumとXPathのまとめ1



エレメントロケーターって?

 

Seleniumを使い始めたときに、まず最初につまづくのがElementLocatorです。
ElementLocatorとは、Selenium実行時にElement(HTMLの要素)を特定するための方法のことです。

Domで指定したり、FormのIDで指定したりといろいろな指定方法があるのですが、やはり一番便利なのはXPathです。

XPathを使えば、特定のテキストに部分一致する要素をピンポイントで抽出したり、
並列に並んだ要素の最後から2番目を持ってくるなど、特殊な条件で位置の特定が可能です。

欠点は慣れるまでに少し時間がかかることと、HTMLの構造をある程度理解している必要がある点です。

今回紹介するのは、FirebugとSeleniumIDEを使った超簡単なXPathの確認方法です。


Step by step



1.Firefoxで位置を調べたいページを開きます
2.Firebugを起動(F12)してHTMLタブを選択状態にします
3.Firebugの左上 虫アイコンの右にある「カーソル選択」アイコンをクリック
4.位置を特定したい部分をクリックすると該当のHTMLが選択状態になります


5.Firebugの窓で、選択されたHTMLの部分にカーソルを移動して右クリック
6.「xPathをコピー」を選択します



すると、こんな感じのPathが取れます。
/html/body/div/div[2]/div[3]/div/div/div[2]/div/div/ul/li/a

7.次にSeleniumIDEを起動します(自動保存はOffにします)
8.コマンドリストの一番上の部分をクリック
9. コマンドには何も入力しないで「対象」に 対象に先ほどのPathをコピーします


10.そのままだとエラーになるので  /html/body の部分を / に変更します。
結果例→ //div/div[2]/div[3]/div/div/div[2]/div/div/ul/li/aとなります。

13.SeleniumIDEの対象の右にある検索ボタンをクリックすると
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番目)が選択範囲になります。

まれにHTML構造上の理由から、上記の方法では期待する位置が特定できない場合もあります。
そのときは、XPathの最後の要素をひとつずつ消しながらIDEの「検索」ボタンと押すと、
Locatorがどこを見ているのか一目で分かります。
目当ての要素が選択範囲に含まれたら、今度はFirebugのHTMLタブをみながら、
要素をひとつひとつ追加していくと、最後には目当ての要素にたどり着くことができます。



属性を指定したり、テキスト部分一致を利用したXPathの書き方に関しては、また後日まとめたいと思います。

0 件のコメント:

コメントを投稿