検索
連載

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

本連載では、AndroidおよびiOSアプリ開発における、システムテストを自動化するツールを紹介していきます。今回は、Calabash-Androidのテストで必要になる、各種UIコンポーネントの特定・操作・検証方法を紹介し、ステップ定義の仕方やUIコンポーネントを調査するための「console」について解説します。

[伊藤宏幸，テスト自動化研究会（STAR）,楽天株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

実践例としての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


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る