JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■応用の森　Eclipse + Cucumber + Selenium による Web　UIテスト自動化ツール
Web　UIテスト自動化ツールとしては、Seleniumが有名ですが。
バージョン1の頃から、たまぁに業務で必要になり、時々思い出したように使っていますが、
バージョンが上がるたびに、使い方も変化しており、
FireFox用の SeleniumIDE なんかは バージョン3系の現在では、ほとんど形骸化してしまっている印象です。
バージョン２系の頃は、SeleniumIDEで、VBAコードも出力可能だったので重宝していましたが、
いつの間にか、無くなってしまいました（残念）

で、また思い出したように、ちょっと業務的に必要になったので、久しぶりにSeleniumを調べていたら、
Cucumber(キューカンバー==きゅうり)とか言う、やからを見つけてしまい、
しばらくの間すっかり沼にはまってしまいました。
Cucumberとは、調べれば情報は豊富にありますが、
一番簡単にすっきりまとめてあるサイトとしては、Cucumberを使ってみるテスト当たりでしょうか？
最初は、Rubyなんか知らんぜよ！的に無視していたのですが、
調べるうちに、どうやらJavaのライブラリもあるみたいで、色々苦労して探し出しました。
で、これをEclipseに組み込んて、unitテストとしてCucumber＋Seleniumを動かせないか
あれこれ試行錯誤して、なんとなく動いたので、参考までに公開しておきます。

完成形にはまだほど遠く、自動化したいWebサイトのDOM構成によっては、まだまだ
実装するべきメソッドは数多くありそうですが、全て網羅するには多大な時間がかかりそうなので
適当な所でサンプル化しますので、興味のある人は残りは自分で勉強して拡張してみてください。

今回のサンプルとしては、Googleの検索サイトを表示して、
検索ボックスに本サイト「Spring-MVCの散歩道」を入力して検索を実行し、
検索結果一覧から、本サイトのリンクをキックして、Spring-MVCの散歩道を表示して
左側メニューのリンクを少しだけナビゲートしてブラウザを終了する。　までを自動化してみました。

 

では、早速はじめの一歩。　Eclipseのプロジェクトを新しく作ります。
プロジェクトタイプは、「Mavenプロジェクト」とします。
プロジェクト名は、「cucumberJVM」としておきます。
以下、割愛。
わからない方は、「■SpringMVC の小径　１－１）Mavenプロジェクトの生成」を見てください。
今回のサンプルプロジェクトの全体イメージを図式化しておきます。
プロジェクトマップ
Selenium用のWebドライバーは別途ネットからダウンロードします。（詳細は後述）

 

では、出来上がったプロジェクトの、pom.xml を以下の様に編集します。
pom.xml

見れば、だいたい納得できると思うので、詳細は割愛します。

 

で、次にクラスを作成する前に、Webドライバーをダウンロードしておきましょう。
(Webドライバーの各バージョンは、2017年5月　時点のバージョンです)
ちなみに実行環境は、Windows10 64bitOSで動かします。
各種ブラウザ用Webドライバーは、Selenium公式ダウンロードページからダウンロードすることができます。
○Windows IE(11) 用Webドライバー
　上記ページの中ほど。「The Internet Explorer Driver Server」にリンクされている
　Download version 3.4 for (recommended) 32 bit Windows IE or 64 bit Windows IE
　の32bit, 64bit 一応両方をダウンロードしておきましょう。
　※）ただし実際使うのは、32bit用です。64bit用を適用すると、まともに動きません。

○WindowsIE以外のWebドライバー
　同じく上記ページのもう少し下の方、
　「Third Party Drivers, Bindings, and Plugins」
　に各ブラウザ用のWebドライバーへのリンクがありますが、
　ちょっと道に迷うことがあるので、個別に記述しておきます。
　◎FireFox用Webドライバー(ver0.16.1)
　　geckodriver-v0.16.1-win32.zip、geckodriver-v0.16.1-win64.zipをダウンロードして解凍します。

　◎Chrome用Webドライバー(ver2.29)
　　Latest Release: ChromeDriver 2.29　のリンクを辿って行って、
　　「chromedriver_win32.zip」をダウンロードして解凍します。

　◎Opera用Webドライバー(ver2.27)
　　operadriver_win32.zip、operadriver_win64.zipをダウンロードして解凍します。

　◎Edge用Webドライバー(15063)
　　一応、リンク先は記述しておきますが、Edgeは現時点ではほとんどまともに動かないです。
以上各種ドライバを、Eclipseプロジェクトマップのexe/exe32bit/exe64bit フォルダに配置します。

 

ここから、テスト用Javaクラスをいくつか作成します。まず、テスト用メインクラス。
src/test/java/jp/dip/arimodoki/RunMain.java

JUnitテストで、@RunWithアノテーションを使って、Cucumberクラスを起動するだけのクラスです。

次に、各種Webドライバー制御と、SeleniumAPIを操作するためのクラス。
src/test/java/jp/dip/arimodoki/connector/WebConnector.java

setWebDriver()メソッドで、指定された種類のブラウザを初期化して起動します。
あとは、まぁ SeleniumのAPIを使って、表示されたページのDOMのセレクタ(id, name, class, HTMLタグなど)を見つけて
クリックイベントや、キータイプイベントを発行する各種メソッドがあります。
　※）サンプルなので、ごく一部のDOMのセレクタにしか対応できていません。

そして、後述するフィーチャ定義に従って、上のWebConnectorのメソッドを実行するクラス。
src/test/java/jp/dip/arimodoki/step/WebSteps.java

なにやら、恐ろしいことに日本語全角のアノテーションが使われており、
初めて目にしたときは、異様な違和感を覚えました。が、、、最近慣れてきたので気にならない(^^;)
この日本語アノテーションが、要するにCucumberが提供するテストシナリオの動作を定義するためのアノテーションです。
使用できるステップキーワードとしては、
”前提”(given)、”もし”(when)、”ならば”(then)、”かつ”(and)、”しかし” (but)などがあります。
赤字がフィーチャから投入される変数で、メソッドのパラメータに対応します。
日本語でCucumberのフィーチャ書くときのキーワード
に詳しく解説されているので、こちらを参考にしてみてください。

最後が、テスト用シナリオを定義するフィーチャファイル
src/test/resources/jp/dip/arimodoki/step/promenade.feature

"もし"とか、"ならば"のキーワードに対して、前述のWebSteps.javaのアノテーションが対応しており、
赤字が、変数となります。
ぶっちゃけ、どのケースでどのキーワードを書くのが正しいのか難解で、頭の悪い私にはよく理解できません。
日常会話で、”前提”、”もし”、”ならば”、”かつ”、”しかし”　だけを使って会話しなさい！
と言われるのは正直ちょっとつらいです（笑
なので、ここは（一応期待通り動きますが）あまり自信はありません。

 

ここまで準備ができたら、いよいよテスト実行です。
Ecipseプロジェクト「cucumberJVM」をマウス右クリックで、「実行」－「jUnitテスト」を選択すると、
テスト実行
ブラウザが起動し、フィーチャファイルで定義した動作が実行されます。

 

実際色々なページで挑戦してはいるものの、DOMの構成によっては、
うまく動かせない（単にやり方が悪い？）セレクタなども多々あったりして苦労しますが、
Webの自動テストツールとしては色々使える印象です。

 

最後になりましたが、その他いくつか参考にさせていただいたサイトをご紹介しておきます。
zephiransasのチラシの裏
SeleniumAPI 逆引き
Cucumber のフィーチャの文法
その他諸々小技集  Cucumber + Selenium による Web UIテスト自動化ツール
HOME