SeleniumとXPathのまとめ１

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

 

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をコピー」を選択します

すると、こんな感じの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となります。

１３．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の書き方に関しては、また後日まとめたいと思います。

Selenium IDEの実行とログ保存ガイド

Selenium IDEの実行とログファイルを保存する方法をまとめます。

（初心者向けに書きました）

・ テストケースを実行

１. Selenium IDEを起動して、ファイル（F）→テストケースを開く（O）をクリック

２．テストスクリプトを選択して開く

３．テストケースが読み込まれることを確認

４．実行ボタンとクリック

５．テストケースが全て実行できて失敗しなければ、Runs:1と Failures:0　と表示される

・ログウィンドウからコピーする場合

１．スクリプト実行後にフィルタしたいログ情報を選択

２．ログウィンドウにカーソルを移動して範囲選択（Ctrl+A）してコピー（Ctrl+C）する

特定の情報のみログとして出したい場合は、一度変数に格納して、
Jsから警告として表示させることで、きれいに情報を取り出すことができます。

※デバック、情報、エラーだと、ほかの情報と混在する可能性が高いので、警告が一番無難です。

例）
storeEval LOG.warn(storedVars['STORED_VAL']);

※log.debug、log.info なども有効です。

・ログが保存できて何がうれしいのか？


Seleniumの利用方法を考えたときに、テストだけでなくWebの情報を自動収集することにも応用できます。
（例えば特定クエリで表示されるGoogleのランキングを上位n件まで表示する　など。）


PythonやJavaでゴリゴリ書きますってひとには、あまり価値のない情報ですね、、、＾＾；


しかし、プログラムを全く知らない人でも、やり方さえわかればWebの情報収集が半自動化できることがSeleniumのいいところです。

5分でできるWebテスト自動化 - Jenkins x Selenium

いろいろあって、しばらく投稿さぼってました、、、＾＾；
ここ最近アウトプットをさぼり気味なので、今日からまた再開します。


さて、テストクラスタの方やWeb系エンジニアであれば、SeleniumというWebテストの自動化ツールについて聞いたり、実際に利用したことがあると思います。


Selenium IDEなどを使ってテストスイート単位で自動化することもできますが、JenkinsというCIツールを使えば、テスト実行およびレポーティングまで完全自動化することができます。


JenkinsはWindowsマシンでも簡単に構築できます。
今回はツールのセットアップ（Windows版）と基本的な使い方まとめたいと思います。


尚、Seleniumはスタンドアローン版がセットアップされていることを前提にしています。
（セレマニア｛注：Seleniumオタク｝のひとは、特に説明不要だと思うので、JavaやPythonなど、各自好きな言語でかかれたテストコードを直接起動してください＾＾； ）

環境構築

 

参考サイト

JenkinsにSelenium Html Reportをいれてみた。 | SeedsLight:

http://seedslight.com/wp/archives/185

１.JDKインストール＆環境変数設定

https://www.google.co.jp/search?q=JDK

※JREではなく、JDKが必要なので注意（DL前にOracleに登録が必要）

JAVA_HOME=C:\Program Files\JavaFX\javafx-sdk1.3

SDK直下のbinにもパスを通す。

２．JenkinsのDL

http://jenkins-ci.org/

Windows版をDL

３．ダウンロードした jenkins.war を直接起動

java -jar jenkins.war

→デフォルトでは　http://localhost:8080　にサーバーが立つので、ブラウザからアクセスして確認。

※セキュリティーソフトなどでブロックされる場合は、適宜設定変更してください。

ジョブ作成

次に自動実行のためのジョブを作成します。

１．新規ジョブ作成

とりあえずフリースタイルを選択します。

２．作業用フォルダの設定

スクリプトを実行する場合は、カスタムワークスペースを設定。
※スクリプトをフルパスで指定する場合は必要ないかもしれませんが、一応設定します。

３．ソースコード管理

利用しない場合は「なし」を選択

４．ビルドトリガ設定

ここではスクリプトの実施タイミングを設定します。

     
↓書き方の例（詳細はJenkinsのヘルプを参照）

# 1分ごとに
* * * * *
# 毎時5分(1時間に一度)

5 * * * *

# 30分に一回
*/30 * * * *

５．ビルド手順追加

Windowsバッチからのスクリプト実行の場合は、「Windowsバッチコマンド」を選択する。

以下はSeleniumスタンドアロンサーバーの例。

rem Firefox

java -jar selenium-server-standalone-2.18.0.jar -htmlSuite "*chrome" "http://www.google.com" "C:\selenium\suite02.html" "c:\selenium\result01.html"

rem Chrome(日本語が化ける？)

java -jar selenium-server-standalone-2.18.0.jar -htmlSuite "*googlechrome" "http://www.google.com" "C:\selenium\suite03.html" "c:\selenium\result02.html"

＊＊＊

手始めに以下のようなサンプル用コマンドを書いて、ジョブの実施のみを確認してもOKです。

echo im enjoying testing with Jenkins!

date /T

＊＊＊

６．成果物保存

作業ディレクトリにあるスクリプト実行結果ファイルをバッチ実行毎にアーカイブする場合は、「成果物を保存」にチェックを入れて、

**/result*.html

のような形式で保存ファイルを指定します。

上記例ではファイル名がresultで始まり、拡張子がhtmlであるファイル（サブディレクトリも含む）をアーカイブします。

実行結果確認

１．ルートメニューで確認

２．プロジェクトメニュー

直近のビルド成果物や、即時実行、設定などが可能です。

３．ビルドログ

プロジェクトメニューの左側ににある「ビルド履歴」から遷移します。

「コンソール出力」でこのビルド実施時に出力されたコンソールのログ情報が確認できる。

また、「ビルドの成果物」で、バッチ毎に保存したファイルがDLできる。

最後に

JDKインストールに時間がかかるかもしれませんが、びっくりするぐらい簡単に自動テスト環境が構築できますので、ぜひ試してみてください。

いやー　このシステムは開発してくれた神プログラマに感謝感激ですね。