今回のサンプルプログラムは、WebViewを利用している、いわゆる「ハイブリッドアプリ」です。
しかし、『WebViewの検証』でもお伝えしたように、WebViewは、事前に用意されている「ステップ定義」では適切に検証できません。そこで、検証用のステップを定義する必要があります。
またWebViewへ適切にアクセスするには、「Selenium」などでも使用されるCSSセレクターが必要です。
以下、uiqueryとCSSセレクターを活用して、WebViewの検証機能を構築する例を紹介します。
またWebViewの検証方法については、詳細が下記にもまとめられているので、こちらも併せて参考にしてください。
まず「{プロジェクトのルート}/features/PreviewCustomer.feature」を開き、シナリオ「Add customer information and preview it by using WebView」に下記のステップを追加します。
(中略) And go preview Then I should see "homumado@example.com" at "mail" ←追加
これは、CustomerPreviewActivity画面(「{プロジェクトのルート}/app/src/main/res/raw/customer_preview.html」)の「<div name="mail">」の値を検証するステップです。
次に、「calabash-android run {YOUR_APK_FILE}」コマンドを実行し、先ほど追加した「ステップ定義」のスケルトンを表示します。
You can implement step definitions for undefined steps with these snippets: Then(/^I should see "(.*?)" at "(.*?)"$/) do |arg1, arg2| pending # express the regexp above with the code you wish you had end
このように、Calabash-Androidのスケルトン作成機能は、引数候補を正規表現で表現できるよう動作してくれます。
続いて、consoleを起動してCustomerPreviewActivity画面まで移動し、uiqueryとCSSセレクターを活用して、WebViewの値を取得します。
今回検証したい項目は、CustomerPreviewActivity画面の「<div name="mail">」の値です。この項目を取得するために、consoleでuiqueryを発行してみます。
uiqueryでのCSSセレクターの使い方は、次の通りです。
ちなみに今回のケースは、次のいずれかとなります。
CSSセレクターの表記例 | メモ |
---|---|
query("webView css:'div[name=\"mail\"]'") | 要素名"mail"の前後に"(ダブルクォーテーション)があってもOK |
query("webView css:'div[name=mail]'") | 要素名"mail"の前後に"(ダブルクォーテーション)がなくてもOK |
query("webView css:'div[name=mail]'", "textContent") | 当該divタグのコンテンツ部分のみを取得する |
それでは実際に、consoleでuiqueryを発行してみましょう。
irb(main):011:0> query("webView css:'div[name=mail]'") [ [0] { "id" => "", "textContent" => "re", "nodeName" => "DIV", "class" => "", "html" => "<div name=\"mail\">homumado@example.com</div>", "rect" => { "center_y" => 152, "center_x" => 160, "height" => 20, "width" => 304, "bottom" => 89.265625, "left" => 8, "right" => 312, "y" => 142, "x" => 8, "top" => 69.265625 }, "nodeType" => "ELEMENT_NODE", "webView" => "previewWebView" } ] irb(main):012:0> query("webView css:'div[name=\"mail\"]'", "textContent") [ [0] "homumado@example.com" ] irb(main):013:0>
「query("webView css:'div[name=mail]'", "textContent")」で、想定通りの値「homumado@example.com」を正しく取得できたことが分かります。
最後に、上記結果を基に検証用のステップを定義します。
今回は「{プロジェクトのルート}/features/step_definitions/PreviewCustomer_steps.rb」に下記ステップを定義することとします。
# スケルトンが作成した引数名は、必要に応じて修正可能。 Then(/^I should see "(.*?)" at "(.*?)"$/) do |expected, name| # queryの戻り値は配列なので注意。 actual = query("webView css:\'div[name=" + name + "]\'", "textContent") if (actual.length != 1 || expected != actual[0]) # 検証に失敗した場合は、raiseでエラーメッセージを出力します。 raise "Expected value is #{expected} but #{actual} returned!" end end
「calabash-android run {YOUR_APK_FILE}」コマンドを再度実行し、追加したステップがパスすることを確認します。
1 scenario (1 passed) 6 steps (6 passed) 0m11.375s
今回は「ステップ定義」を使用してテストシナリオを作成する方法や、その他の機能の使い方を説明しました。
次回は、Calabashをより高度に利用する際に必要となる「BDD(Behavior-Driven Development)とシナリオの記述レベル」と、それに関連する事柄について説明します。
伊藤宏幸
楽天株式会社 開発プロセスオプティマイゼーション部 品質保証課 テスト駆動開発グループ所属 アジャイルコーチ
アジャイルコーチおよびシステムアーキテクトとして、実際に開発現場に入り、CI/CD(Jenkins)、TDD/BDDをベースとした技術基盤の構築と、それらをベースとした開発プロセスの改善支援を行っている。モットーは、開発効率の向上による「Be happy!」の実現。
2014年3月より、テスト自動化研究会(STAR)に参加。
2014年7月、アメリカで開催された世界最大のアジャイルのカンファレンス「Agile 2014」に登壇。
著書『プログラミングの教科書 かんたん UML入門』(共著/技術評論社)
ブログ「THE HIRO Says」
Twitter:@hageyahhoo
Copyright © ITmedia, Inc. All Rights Reserved.