Calabash-Androidでテストシナリオを作成する方法：スマホ向け無料システムテスト自動化ツール（5）（5/5 ページ）

実践例としてのWebViewの検証機能の構築方法

　今回のサンプルプログラムは、WebViewを利用している、いわゆる「ハイブリッドアプリ」です。

　しかし、『WebViewの検証』でもお伝えしたように、WebViewは、事前に用意されている「ステップ定義」では適切に検証できません。そこで、検証用のステップを定義する必要があります。

　またWebViewへ適切にアクセスするには、「Selenium」などでも使用されるCSSセレクターが必要です。

　以下、uiqueryとCSSセレクターを活用して、WebViewの検証機能を構築する例を紹介します。

　またWebViewの検証方法については、詳細が下記にもまとめられているので、こちらも併せて参考にしてください。

• Calabash-Android 06 webview support（GitHub）
• How to find relative WebView elements in calabash-ios / calabash-android（StackOverFlow）

　まず「｛プロジェクトのルート｝/features/PreviewCustomer.feature」を開き、シナリオ「Add customer information and preview it by using WebView」に下記のステップを追加します。

 
（中略）
 
And go preview
 
Then I should see "[email protected]" 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:」と表記する
• CSSセレクターの定義に従って、当該のCSSセレクターを記載する
• CSSセレクターの前後はシングルクォーテーションで囲む

　ちなみに今回のケースは、次のいずれかとなります。

　それでは実際に、consoleでuiqueryを発行してみましょう。

irb(main):011:0> query("webView css:'div[name=mail]'")
[
    [0] {
                 "id" => "",
        "textContent" => "re",
           "nodeName" => "DIV",
              "class" => "",
               "html" => "<div name=\"mail\">[email protected]</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] "[email protected]"
]
irb(main):013:0>

　「query("webView css:'div[name=mail]'", "textContent")」で、想定通りの値「[email protected]」を正しく取得できたことが分かります。

　最後に、上記結果を基に検証用のステップを定義します。

　今回は「｛プロジェクトのルート｝/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-AndroidによるBDDの実践

　今回は「ステップ定義」を使用してテストシナリオを作成する方法や、その他の機能の使い方を説明しました。

　次回は、Calabashをより高度に利用する際に必要となる「BDD（Behavior-Driven Development）とシナリオの記述レベル」と、それに関連する事柄について説明します。

参考資料

• Calabasn-Androidのrdoc（0.5.2）
• The Cucumber Book
• Cucumber Recipes
• Specification by Example
• BDD in Action
• Specification By Example with Gherkin