MonacaアプリのUIテストに。Appiumを試す

アプリのテストを行う方法は幾つかあります。まず機能レベルでのテストを行うユニットテストがあります。また、サーバを使っている場合は負荷テストを行うこともあるでしょう。しかしこれらのテストだけでは分からない、実際の操作を通じて意図した通りに動いているか確認するUIテストがあります。アプリにおいてはUI/UXが大事なので特に重要なテストです。

 

Webの世界ではUIテストを行う仕組みとしてSeleniumがよく知られています。それをiOS/Androidアプリに対して適用したのがAppiumです。

 


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

 

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

 


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

 

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があればぜひ共有してください！