アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

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





Appiumのサイト



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



CLIMonacaの準備



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 androidMonacaプロジェクト上で実行してください)。その後、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があればぜひ共有してください!