MonacaアプリのUIテストに。Appiumを試す
アプリのテストを行う方法は幾つかあります。まず機能レベルでのテストを行うユニットテストがあります。また、サーバを使っている場合は負荷テストを行うこともあるでしょう。しかしこれらのテストだけでは分からない、実際の操作を通じて意図した通りに動いているか確認するUIテストがあります。アプリにおいてはUI/UXが大事なので特に重要なテ ストです。
Webの世界ではUIテストを行う仕組みとしてSeleniumがよく知られています。それをiOS/Androidアプリに対して適用したのがAppiumです。
今回はこのAppiumをMonacaアプリで動かす方法について紹介します。
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
今回はiOSをプラットフォームとして追加します。
$ cordova platform add ios
Adding ios project...
iOS project created with cordova-ios@3.9.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for ios
そうするとこのようなファイル構成になります。
platforms/ios 以下のファイルを Monacaプロジェクトの platforms/ios 以下に移動します。
これで準備が完了です。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 run ios
これでアプリが起動すればOKです。
デモコードを書いてみる
まずはテストまでいかず、簡易的に動かしてみたいと思います。
require 'appium_lib'
capabilities = {
app: "/path_to_app/TestApp.app",
platformName: "iOS",
deviceName: "iPhone Simulator",
showIOSLog: true,
defaultCommandTimeout:7200,
debugLogSpacing: true
}
@wd = Appium::Driver.new(caps: capabilities)
Appium.promote_appium_methods Object
@wd.start_driver
begin
@wd.texts
rescue
@wd.start_driver
end
puts @wd.texts[0].text # HelloWorld!
@wd.texts[1].click
sleep(20)
driver_quit
appオプションは先ほどビルドしてできたアプリのパスを指定してください。driver_quitを実行するとすぐに終了してしまうので20秒のスリープを入れています。clickのようなイベントも使えますのでアプリの画面を遷移しつつ操作をDOMの状態をチェックすると言ったこともできます。
後はこのコードを実行すればOKです。以下はデモで動かしたところですが、実 際にはもっと時間がかかります。
注意点
エラーについて
@wd.texts を実行したタイミングで
underlying webdriver instance does not support javascript (Selenium::WebDriver::Error::UnsupportedOperationError)
というエラーを起こす こと があります。その場合は再度実行してあげると直るようです。
ipaファイルでのテストについて
Appiumはipaファイルを使った実機テストにも対応しているのですが、うまくいきませんでした。そこでCordovaプロジェクトのスケルトンをベースにappを使ってシミュレータでテストを行っています。そのため今回の方法では実機では動きませんのでご注意ください。
ハイブリッドアプリのUIテストについては情報が多くなく、まだまだ手探りのところが多いのですが検証しつつ情報を出せればと思います。良いTipsがあればぜひ共有してください！
