扇風機

そろそろ夏休みって方も多いかと思いますが、みなさまいかがお過ごしでしょうか~?

どうも、こんにちわ、WEB・スマホエンジニアの西間木です。

仕事が終わらないから、夏休みが取れない~~~。なんて、最悪ですよね。

仕事を早く終わらせて、夏休みに遊びにいくためには・・・自動化でしょ!!
ってことで、今日はテストの自動化などブラウザをプログラムで操作できる ”Selenium” の基本的なことについてご紹介します。

『Selenium-WebDriverを使ってGoogleChromeをラクラク自在に操作してみよう!』


■ Selenium-WebDriver

今回は、JavaベースのSelenium-WebDriverを使ってブラウザ操作をしていきます。

”WebDriverは、ウェブアプリケーションのテストを自動化、特にそれが予期したように動作する事を確認するためのツールです。Selenium RC 1.0 の API より簡単に理解でき使いこなせるフレンドリーな API を提供し、テストを、より読みやすく保守しやすいものにすることを目指しています。特定のフレームワークに紐付けられておらず、単体テストや旧来の “main” メソッド の使用でどこでも同じようにうまく動作します。”

参照:Seleniumドキュメント(翻訳版)

selenium document


■ 基本的な実装フロー

Seleniumを使って自動的にブラウザを操作して、テストをする場合などは
基本的に下記のような実装フローになります。

(1) Webブラウザの初期化処理
(2) 対象要素(HTML)の取得
(3) 対象要素に対する操作(リンククリック、フォーム入力・送信など)
(4) 操作結果を想定値と比較する(JUnit)
(5) 終わり処理


■ 動かす準備をする。

・ 環境を準備する。

  • Java(JDKをインストール)
  • Maven

今回は、Mavenを使ってやってみます。
Mavenは、Seleniumのバージョンを指定すれば必要なJARを自動で探して取ってきてくれます。

環境変数の設定もしておきましょう。

  • Path : {Mavenルート}\bin
  • JAVA_HOME : {JDKルート}

コマンドラインで”mvn -version”と打って、下記のように表示できればOKです。
maven環境

詳しい設定方法などは、下記サイトを参考にしました。
http://bokuibi.blogspot.jp/2011/12/selenium-2-maven.html

・ Chrome Driver

Google Chromeを動かすために、Chrome Driverの準備をします。

下記サイトより、Chrome Driverをダウンロードしてください。
Chrome Driverをダウンロードする。

Chrome Driverを使えるようにMavenの設定をします。
システムプロパティにChrome Driverのpathを設定するように、pom.xmlに記述します。


■ Google Chromeを操作してみる。

今回は、以下のような操作をGoogle Chromeで行う処理を実装します。

 1. Utage Blogのサイトにアクセス
 2. 一覧の記事をクリックし、記事詳細ページに遷移
 3. 正しく遷移されたか確認する

・ (1) WEBブラウザの初期化

まずは、WebDriverのインスタンスを作成して、Webブラウザの初期化処理を行います。
このとき、Cookieの読み込みができたり、またスマホサイトのチェックがしたい場合などは、UserAgentの設定もできたりします。

また、chrome driverの設定をpom.xmlにしていない場合は、ここで直接システムプロパティに設定します。

・ WebDriverインターフェース

・ (2) 対象要素(HTML)の取得

dirver.get(url)で、Utage Blogページへアクセスします。
そのあと、driver.findElement()で対象要素を取得しています。

ブログ記事一覧から、記事IDが227の”article”要素を取得しています。
要素を取得するときは、xpathやCSS SelectorやJavaScriptのノードの指定方法も使えます。

・ By
・ xpathの書き方例

・ (3) 対象要素に対する操作(リンククリック、フォーム入力・送信など)

(2)で取得した記事の要素から、アンカータグを取得してリンクをクリックして、記事詳細ページに遷移します。そのときWebElementのclick()メソッドを使っています。

・ WebElement

ほかにも同じ要領でフォーム入力や、セレクトボックスを選択して、フォームを送信したりもできます。
セレクトタグについての扱いは、Selectクラスを使います。

・ Selectクラス

・ (4) 操作結果を想定値と比較する(JUnit)

遷移先の記事詳細ページのタイトルが、正しいことを確認します。
結果の比較には、JunitのassertEquals(msg, arg1, arg2)メソッドを使っています。
期待値と等しくなかった場合は、結果がFailureになります。

・ (5) 終わり処理

ブラウザを閉じて、自動操作のテストを終了します。

・ 実行してみる。

それでは、実際に実行してみましょう。
今回は、eclipseを使ってないのでコマンドラインからmvnコマンドを実行しています。

mvn 実行

 

正常に実行されると、処理が実行され、Google Chromeブラウザが起動して自動操作が行われます。
記事のリンクをクリックして、記事詳細ページへの遷移が自動で実行されました。

mvn capture utage blog

 

結果をコンソールで確認してみましょう。
ページ遷移先のページタイトルが、期待している値と等しかったのでテストが成功しました!

実行結果

 

せっかくなので期待値を変えて、わざとテストを失敗させてみましょう。
コンソールを確認すると、Failureになっています。

実行失敗の場合

・ Seleniumについての課題

Seleniumの苦手なことって何なのか考えてみた。
レイアウト系の確認は、やっぱり人の目じゃないと困難ですよね。

  • レイアウトは、要素の座標が分かるけど座標の管理が難しい。
  • レイアウト崩れなどの確認は、画面キャプチャを撮って結局人間の目で確認。
  • データに依存する操作などは、事前にちゃんとテストデータを用意する必要あり。

ちなみに、非同期処理を待機する方法なんてのは、抑えておいたほうが良いでしょう。

・ 非同期処理を待機する方法


■ まとめ

みなさま、いかがでしたでしょうか?
今回は、Selenium-WebDriverを使ってGoogle Chromeを自動で操作して検証する方法をご紹介しました。

今回ご紹介したものは、基本的なコードですので、是非ご自分でいろいろ試して応用していただければと思います!!

テストやブラウザ操作など、どんどん自動化させてラクして早く仕事を終わらせて、夏休みを満喫しましょう~~~~♪
それでは、また。

主に、女性向けのWEBサイトやスマホアプリの新規サービス構築に従事。自ら企画をして、数々のサービスやアプリも立ち上げている。企画・開発からプロモーションまで幅広く活躍。2009年、株式会社ヘッドウォータース入社。 / リーンスタートアップ / AI / 画像解析 / GoogleBigQuery / ライフログ / ヘルスケア / ファッション / ビューティ / Misfit / SynAppsTablet / Monaca / エバンジェリスト
このエントリーをはてなブックマークに追加