Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
テスト
Appium

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



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




Appiumのサイト

Appiumのサイト



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



CLI版Monacaの準備



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



  1. $ npm install monaca -g

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



  1. $ monaca login

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



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

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



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



  1. $ npm install cordova -g
  2. $ cordova create HelloCordova
  3. $ cd HelloCordova

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



  1. $ cordova platform add ios
  2. Adding ios project...
  3. iOS project created with cordova-ios@3.9.1
  4. Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
  5. Fetching plugin "cordova-plugin-whitelist@1" via npm
  6. Installing "cordova-plugin-whitelist" for ios

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




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

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



platforms/ios 以下のファイルを Monacaプロジェクトの platforms/ios 以下に移動します。




ファイルの移動

ファイルの移動



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



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



Appiumのインストール



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



  1. $ npm install appium@beta -g

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



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

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



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



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

これで準備は完了です。



アプリをビルドする



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



  1. $ monaca run ios

これでアプリが起動すればOKです。




アプリの起動

アプリの起動



デモコードを書いてみる



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



  1. require 'appium_lib'
  2. capabilities = {
  3.    app: "/path_to_app/TestApp.app",
  4.    platformName: "iOS",
  5.    deviceName: "iPhone Simulator",
  6.    showIOSLog: true,
  7.    defaultCommandTimeout:7200,
  8.    debugLogSpacing: true
  9. }
  10. @wd = Appium::Driver.new(caps: capabilities)
  11. Appium.promote_appium_methods Object
  12. @wd.start_driver
  13. begin
  14.   @wd.texts
  15. rescue
  16.   @wd.start_driver
  17. end
  18. puts @wd.texts[0].text # HelloWorld!
  19. @wd.texts[1].click
  20. sleep(20)
  21. driver_quit

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



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







注意点



エラーについて



@wd.texts を実行したタイミングで



  1. underlying webdriver instance does not support javascript (Selenium::WebDriver::Error::UnsupportedOperationError)

というエラーを起こす こと があります。その場合は再度実行してあげると直るようです。



ipaファイルでのテストについて



Appiumはipaファイルを使った実機テストにも対応しているのですが、うまくいきませんでした。そこでCordovaプロジェクトのスケルトンをベースにappを使ってシミュレータでテストを行っています。そのため今回の方法では実機では動きませんのでご注意ください。






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