MonacaアプリのUIテストに。Appiumを試す（Android編）

前回のiOSシミュレータに続いて今回はAndroidエミュレータを使ってAppiumを試してみたいと思います。AppiumはWeb開発時のUIテストでよく知られているSeleniumをiOS/Androidアプリに対応させたソフトウェアです。

 


Appiumのサイト

 

今回はこのAppiumをMonacaアプリ（Android）で動かす方法について紹介します。

 

CLI版Monacaの準備

 

Appiumはローカルで動かしますのでMonaca.ioではなくCLI版のMonacaを使います。そのためnode.js/npmはインストールされているものとします。

 


$ npm install monaca -g

 

インストールしたらログインを行います。

 


$ monaca login

 

ログインしたら新しいプロジェクトを作成してみましょう。今回はHelloWorldアプリにしました。

 


$ monaca create Hello
Which project template do you want to use?
1: Hello World App
2: Minimum Template
  :
21: NIFTY Cloud mobile backend
22: Onsen UI Minimum Template for Universal App
Type number>1
Project created successfully.

 

Cordovaコマンドのインストール

 

次にCordovaコマンドをインストールして、適当なプロジェクトを作成します。

 


$ npm install cordova -g
$ cordova create HelloCordova
$ cd HelloCordova

 

今回はAndroidをプラットフォームとして追加します。

 


$ cordova platform add android

 

そうするとこのようなファイル構成になります。

 


Cordovaプロジェクトのファイル構成

 

まずCordovaプロジェクト上でビルドをします。

 


$ cordova build android

 

そうすると platforms/android/src 以下に com というディレクトリが作られているはずです（ない場合はMonacaプロジェクトのAndroidManifest.xmlをCordova上のものに差し替えた後、cordova build androidをMonacaプロジェクト上で実行してください）。その後、platforms/android 以下のファイルを Monacaプロジェクトの platforms/android 以下に移動します。Monacaアプリでも同名のディレクトリもありますので、元々入っているものは消さずに、その中身は移動するようにしてください（res以下のXMLファイルなど）。ファイルの配置が変わってしまうとMonaca IDEでビルドできなくなる可能性があります。Appiumで使うコードは元のコードから分離し（Gitでcloneするなど）、元々のMonacaプロジェクトには影響しないようにしてください。

 


ファイルの移動

 

これで準備が完了です。CordovaプロジェクトとMonacaプロジェクトの互換性が向上していることでこのような流用が可能になっています。

 

ただし、Monacaプロジェクト上にこれらのファイルがあるのは良くないので、MonacaプロジェクトをGitに登録してこれをcloneし、そこにCordovaプロジェクトのファイルを入れつつ.gitignoreで元のMonacaプロジェクトには影響しないようにしておくのが良いかと思います。

 

Appiumのインストール

 

AppiumはiOS9への対応が進められているベータ版を使っています。

 


$ npm install appium@beta -g

 

Xcode7にするとインストール時に library not found for -lgcc_s.10.5 というエラーが発生する可能性があります。その時には下記コマンドを実行することで回避することができます（自己責任でお願いします）。

 


$ cd /usr/local/lib  & & sudo ln -s ../../lib/libSystem.B.dylib libgcc_s.10.5.dylib

 

Rubyライブラリのインストール

 

今回はRubyでテストコードを書いてみます。まずRubygemsでライブラリをインストールします。

 


$ gem install --no-rdoc --no-ri appium_lib

 

これで準備は完了です。

 

アプリをビルドする

 

テストを行うにあたって一旦ビルドを行う必要があります。Monacaアプリのディレクトリに移動して実行します。

 


$ monaca build android

 

これでアプリがビルドされればOKです。

 

デモコードを書いてみる

 

まずはテストまでいかず、簡易的に動かしてみたいと思います。

 


require 'appium_lib'
capabilities = {
   app: "/path_to/platforms/android/build/outputs/apk/android-debug.apk",
   platformName: "Android",
   deviceName: "Android",
   defaultCommandTimeout:7200,
   debugLogSpacing: true
}
@wd = Appium::Driver.new(caps: capabilities[:android])
Appium.promote_appium_methods Object
@wd.start_driver
sleep(5)
@wd.set_context("WEBVIEW_com.example.helloworld")
h1 = @wd.find_elements(:xpath, '//h1')[0]
puts h1.text
a = @wd.find_elements(:xpath, '//a')[0]
a.click
sleep(20)
driver_quit

 

appオプションは先ほどビルドしてできたアプリのパスを指定してください。driver_quitを実行するとすぐに終了してしまうので20秒のスリープを入れています。clickのようなイベントも使えますのでアプリの画面を遷移しつつ操作をDOMの状態をチェックすると言ったこともできます。

 

後はこのコードを実行すればOKです。以下はデモで動かしたところですが、実際にはもっと時間がかかります。

 

 

注意点

 

エラーについて

 

Androidではセッションがたびたび切れることがあります。そうした時には @wd.start_driver を再度実行してください。

 

iOSとの違いについて

 

AndroidではXPathを使ったオブジェクトの取得になります。また、コンテキストをWEBVIEW_〜ではじまるものにセットする必要があります。そのため似たような処理をテストする場合においてもiOS/Android版で共通のテストにはしづらそうです。

 

実機でのテストについて

 

Androidはエミュレータなので実機を接続してもさほど変わらずテストが行えるはずです（未検証）。エミュレータはIntel版にしても速度が遅くなってしまうので実機テストの方が良いかもしれません。

 

 

ハイブリッドアプリのUIテストについては情報が多くなく、まだまだ手探りのところが多いのですが検証しつつ情報を出せればと思います。良いTipsがあればぜひ共有してください！