Asial Blog

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

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

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

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




Appiumのサイト

Appiumのサイト



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



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

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



  1. $ cordova platform add android

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




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

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



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



  1. $ 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への対応が進められているベータ版を使っています。



  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 build android

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



デモコードを書いてみる



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



  1. require 'appium_lib'
  2. capabilities = {
  3.    app: "/path_to/platforms/android/build/outputs/apk/android-debug.apk",
  4.    platformName: "Android",
  5.    deviceName: "Android",
  6.    defaultCommandTimeout:7200,
  7.    debugLogSpacing: true
  8. }
  9. @wd = Appium::Driver.new(caps: capabilities[:android])
  10. Appium.promote_appium_methods Object
  11. @wd.start_driver
  12. sleep(5)
  13. @wd.set_context("WEBVIEW_com.example.helloworld")
  14. h1 = @wd.find_elements(:xpath, '//h1')[0]
  15. puts h1.text
  16. a = @wd.find_elements(:xpath, '//a')[0]
  17. a.click
  18. sleep(20)
  19. driver_quit

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



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







注意点



エラーについて



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



iOSとの違いについて



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



実機でのテストについて



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






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