連載
» 2015年01月28日 18時00分 公開

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

[伊藤宏幸,テスト自動化研究会(STAR),楽天株式会社]
前のページへ 1|2|3|4|5       

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

 今回のサンプルプログラムは、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:」と表記する
  • CSSセレクターの定義に従って、当該のCSSセレクターを記載する
  • 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-AndroidによるBDDの実践

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

 次回は、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


前のページへ 1|2|3|4|5       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。