Appium ＋ Node.jsでWebアプリのE2Eテストをやってみた 〜Android編〜

こんにちは。 mediba メディアシステム開発部の尾野です。

ついにブログを書く日がやって来ました・・・
良い機会なので、ここ半年くらい気になっていた「Appium」を取り上げてみたいと思います。

■Appiumとは？

http://appium.io/

概要

Appiumとは、Selenium作者のJason Huggins氏を中心に開発された
デバイステスト自動化を実現するためのテストフレームワークです。

Appiumを使えば、実機／エミュレータを使ってEnd To Endテストが出来ます。

仕組み概要

PC上のテストプログラムを実行
　　　↓　　　　　↑
PC上のAppiumから実機にリクエスト(Mobile JSON Wire Protocol)
※この時UI Automator用のアプリ等を端末に転送
　　　↓　　　　　↑
実機で動作

という流れとなってます。

UI AutomatorはAndroid OS 4.2以降（API Level 17以上）の場合です。
（Android OS 4.1以下の場合はSelendroid）

テスト対象OS

  • Android : Ver. 2.3.3以降
  • iOS : Ver. 6.0以降

特徴

実機テストができる

同じAndroidのバージョンでもメーカーによって微妙に挙動が違うことがあります。
その為多くの端末で検証をしなければならずひと苦労・・・
なんて事も多々あるかと思います。

Appiumでは機械的に実機のブラウザをエミュレートしたテスト出来るので、 人手による多端末検証の労力を抑える事が出来ます。

言語選択肢が多い

ヘッドレスブラウズE2E（ex.PhantomJS）やrubyのCapybara等、 OSSのE2Eテストソリューションは沢山ありますが、言語の選択は制限されてしまいます。

Appiumでは執筆（2016/02）時点で以下の言語が使えます。

  • Java
  • PHP
  • Perl
  • Ruby
  • Python
  • C#
  • Javascript(Node.js)

クロスプラットフォーム

実行環境はWinでもMacでもLinuxでもOK
テスト対象環境は実機でもエミュレーターでもOK
（iOSの場合はXcodeが必須なのでMac限定ですが・・・）

Selenium WebDriverのナレッジを活かせる

自動E2Eテストの代表格でもある「Selenium」の拡張版、の様なものなので、 今までSeleniumでE2Eテストやってたという方なら入りやすいと思います。

準備

環境とか

PC : Max OS X Yosemite（10.10.5）

  • NodeJS v4.2.1 Homebrew経由でインストール
  • Java(OpenJDK) v1.8.0_60
  • 環境変数 JAVA_HOME 設定済み

実機 : Galaxy Note 3 (Android 5.0)

テストコード

  • 言語　　　　　　　　　　　：Javascript(Node.js)
  • テスティングフレームワーク：mocha
  • アサーション　　　　　　　：chai ＋ assert(node標準)
  • テストレポーター　　　　　：mochawesome

実機側設定

開発者向けオプションの「USBデバッグ」を有効にする必要があります。

開発者向けオプションを表示する方法

  • [設定] -> [一般] -> [端末情報]
  • [ビルド番号]を7回タップすると「これでデベロッパーになりました！」のメッセージが表示され、開発者オプションメニューが表示されます。

USBデバッグを有効にする

  • [設定] -> [一般] -> [開発者向けオプション]
  • [USBデバッグ]にチェックをつける。

テスト実行中にロックが掛からない様にするため、 [スリープモード非設定]にもチェックをつけておいたほうが良いです。

インストール

Android Studio

ここからインストールします。

http://developer.android.com/intl/ja/sdk/index.html

Configure -> SDK Manager -> System Settings -> Android SDK

  • SDK Platformsタブ

    • Android 5.0.1（対象端末が5.0なので）

  • SDK Toolsタブ

    • Android SDK Build Tools
    • Android SDK Tools
    • Android SDK Platform-Tools

環境変数を設定

$ vi ~/.bash_profile

export ANDROID_HOME=[[Android Studioインストール先sdkフォルダパス]]
export PATH=$PATH:$ANDROID_HOME/platform-tools/:$ANDROID_HOME/tools/

PCと実機をUSBでつないで、「adb devices」コマンドを実行

$ adb devices
List of devices attached
[[端末のUDID]] device  # -> 識別NGの場合「List of devices >attached」と表示

《tips》Emulatorの作成・起動 今回は使用しませんが、Emulatorで動作確認をする場合には以下の手順で作成・起動します。 前述の「adb device」コマンドで作成したEmulatorのUDIDが表示されれば成功です。

$ android avd
Android AVD Managerが起動する -> 「create」

$ emulator -avd [[AVD名]]
Android Emulatorが起動する

Appium

インストールには２つの方法があります。

１）githubからgit cloneする

https://github.com/appium/appium 2016年2月現在 v1.4.16

[メリット]

  • Ver.はこちらのほうが進んでる
  • ソフトウェアメンテナンスが容易
  • 複数プロセス起動＆実行が可能

[デメリット]

  • git clone後のセットアップに時間が掛かる(mavenやantも必要)
  • CUIベースになるのでコマンド使いはじめるまでに学習コストが掛かる
  • インスペクタ(Nativeアプリの要素解析機能)が無い

２）デスクトップアプリをダウンロードする

https://bitbucket.org/appium/appium.app/downloads 2016年2月現在 v1.4.13

[メリット]

  • 必要なコンポーネント群が内包されている
  • GUI付属
  • インスペクタ付属

[デメリット]

  • Ver.はこちらのほうが遅れている
  • 複数起動が出来ない

今回は２）の方法でインストールしたものを使います。

Appium.appを立ち上げるとこんな感じのツールが立ち上がります。

①・・・各種設定
（左から）
Android設定（後述）
iOS設定
Appium本体の設定
開発者設定（Node.jsのパス変更等）
Robot Framework用設定

②・・・インスペクタ
Nativeアプリの要素解析用ツール

③・・・appium-doctor
Appiumが実行可能かどうかを検査してくれるツール
「✔ All Checks were successful」のメッセージが表示されれば実行可能

実行用設定

Android

Capabilitiesブロック
「Platform Name」・・・Android
「Automation Name」・・・Appium
「Platform Version」・・・5.0 Lollipop

※Automation NameはAndroid OSのVer.が4.1以下（API Levelが16以下）の 場合に「Selendroid mode」に変更します。

実行テスト対象

スマートフォン版スマートパスTOPページを対象にテスト実行してみます。

https://auone.jp/

１）auone.jpにアクセス出来る事
２）正しくログイン出来る事

を検証してみたいと思います。

Appium起動

右上の「Launch」を押下すると・・・

起動している感じがする・・・

テストコード（一部抜粋）

１）auone.jpにアクセス出来る事

it("TOPページアクセス", function() {
    return driver
      .sleep(10000)  // 描画完了まで（念のため）時間とっとく
      // スクショを撮る
      .saveScreenshot(saveScreenDir + "TOPページアクセス")
      //ページタイトルが正しいか？
      .title()
        .should.eventually.include("auスマートパス");
});

２）正しくログイン出来る事

it("TOPページからログインしてみる", function() {
  return driver
    // ログイン認可Cookie削除
    .deleteCookie("【ログイン認可Cookie】")
    .elementByLinkText("ログイン").click()
    .sleep(10000)
    .saveScreenshot(saveScreenDir + "ログイン")

    // ログイン画面のタイトル検証
    .title()
      .should.eventually.include("au IDログイン")

    // ID/PW入力
    .elementById("loginAliasId").sendKeys("【ログインID】")
    .elementById("loginAuonePwd").sendKeys("【ログインPW】")
    .submit()
    .sleep(10000)
    .saveScreenshot(saveScreenDir + "[ログイン済]TOPページアクセス")

    // TOPに戻ってきた事をタイトルで検証
    .title()
      .should.eventually.include("auスマートパス")

    // 認可Cookieの存在を確認してログイン済か検証
    .allCookies()
      .then(function (cookies) {
          cookies.length.should.not.equals(0);

          for (var iii = 0; iii < cookies.length; ++iii) {
              if (cookies[iii].name === "【ログイン認可Cookie】") {
                  return driver;
              }
          }

          assert.fail("doesn't exists 【ログイン認可Cookie】 cookie.");
      })
});

テスト実行

以下のコマンドを実行

  • レポート出力形式にmochawesomeを指定（–reporter mochawesome）

  • レポートオプションに以下を指定

    • 出力先： ./report/html/以下（reportDir=./report/html/）
    • レポートファイル名：auonejp_test_sample（reportName=〜）
    • レポートタイトル：auonejp_test_sampletitle（reportTitle=〜）
    • 一枚完結ページにするか否か：inlineAssets=true

    $ mocha –reporter mochawesome \ –reporter-options \ “reportDir=./report/html/, reportName=auonejp_test_sample, reportTitle=auonejp_test_sampletitle, inlineAssets=true” \ appium_app_test.js

Appiumコンソールにログが出力されています。

端末上のブラウザも起動し、以下の様に画面遷移してます。

テスト完了

テスト結果がターミナル上に表示

スクリーンショットもちゃんと撮れてます。

mochawesomeレポート
html形式で出力されます。
テストケース２件とも成功しております。

詳細は以下参照 http://adamgruber.github.io/mochawesome/

感想

Appiumはまだ触り始めて間もないですが、そこまで導入敷居も高くない様に感じました。

まだまだ実験段階なので、いつかのテスト自動化運用を見据えつつも、 ツールを過信しすぎない程度に継続的な調査をしていきたいと思います。

また、AWS Device Farmとも連携してみたりするともっと世界が広がりそうですね。

https://aws.amazon.com/jp/device-farm/