Appiumを使ってモバイルアプリのテストを実行するための環境を構築してみます。
今回テストで使った環境は以下のレポジトリにプッシュしてあります。
webdriverio-typescript
Yarnのインストール
JavaScriptのパッケージマネージャーにYarnを使いますのでインストールします。
今回はグローバルにインストールしています。
[code lang=bash]
# Yarnをグローバルにインストール
npm install -g yarn
# バージョンが表示されればOK
yarn -v
[/code]
npmとコマンドが若干違いますのでyarnを使ってみたを随時参照するとよいと思います。
AppiumとWebdriverIOのインストール
適当にプロジェクトディレクトリを作成しAppiumとWebdriverIOをインストールします。
AppiumはAppium-Desktopという非常に便利なアプリがあるのですがAppium自体はnodejsで起動できますので今回はアプリではなくパッケージとしてインストールします。
ただAppium-Desktopは便利なのでインストールしておくとよいと思います。
[code lang=bash]
# AppiumとWebdriverIOのインストール
yarn add appium --dev
yarn add webdriverio --dev
# テスト実行時にAppiumを起動してくれる（テスト前にAppiumを起動しておかなくてもよくなる）
yarn add wdio-appium-service --dev
# Testing環境をインストール
yarn add mocha --dev
yarn add chai --dev
yarn add wdio-mocha-framework --dev
# レポーターをインストールする
yarn add wdio-spec-reporter --dev
[/code]
動作確認のため起動する
一旦この状態で端末を操作してみます。
AndroidのエミュレーターにAppiumのテスト用アプリをインストールしてアプリを起動してみます。
テスト用のアプリはAppiumのサンプルコードで使われているアプリを使用します。
エミュレーターは事前に作成しておくか実機でも問題ないです。
adb devicesで端末idを調べておきます。
テストに使用するアプリはAppiumが自動的にインストールしてくれるので事前にインストールする必要はありません。
WebdriberIOの設定ファイルを準備します。
[code lang=bash]
mkdir config
vim config/wdio.config.js
[/code]
設定ファイルはconfig/wdio.config.jsとしますがAndroidエミュレーターもしくは実機によって設定を変更する必要があります。
capabilitiesのplatformVersionとdeviceNameは随時変更してください。
exports.config = {
debug: false,
specs: [
'./test/specs/*.js',
],
reporters: ['spec'],
host: '127.0.0.1',
port: 4730,
maxInstances: 1,
capabilities: [
{
appiumVersion: '1.8.1',
browserName: 'Android-Emulator',
platformName: 'Android',
app: 'https://github.com/appium/sample-code/blob/master/sample-code/apps/ApiDemos/bin/ApiDemos-debug.apk?raw=true',
platformVersion: '8.1',
deviceName: 'emulator-5554',
waitforTimeout: 30 * 60000,
commandTimeout: 30 * 60000,
newCommandTimeout: 30 * 60000,
}
],
services: ['appium'],
appium: {
waitStartTime: 6000,
waitforTimeout: 30 * 60000,
command: 'appium',
logFileName: 'appium.log',
args: {
address: '127.0.0.1',
port: 4730,
commandTimeout: 30 * 60000,
sessionOverride: true,
debugLogSpacing: true
}
},
logLevel: 'silent',
coloredLogs: true,
framework: 'mocha',
mochaOpts: {
ui: 'bdd'
},
onPrepare: function () {
console.log('Testing Started');
},
onComplete: function () {
console.log('Testing Finished');
}
};
次にテスト用のspecファイルを作成します。
TypeScriptで作成し最終的にJavaScriptにトランスパイルするのですが、まだ設定してないので動作確認用のJavaScriptファイルを準備します。
[code lang=bash]
vim test.js
[/code]
test.js
describe('first', () => {
it('testing', () => {
browser.pause(3000);
});
});
ではいよいよ起動してみます。
[code lang=bash]
yarn wdio config/wdio.config.js --spec test.js
[/code]
起動して何やらAPI Demosという画面が表示されたと思います。
TypeScriptを導入する
続いてTypeScriptを導入します。
今回はTypeScriptで書いてトランスパイルしてtest/specsディレクトリに出力します。
[code lang=bash]
yarn add typescript --dev
# 型定義をインストールする
yarn add @types/chai --dev
yarn add @types/mocha --dev
yarn add @types/webdriverio --dev
[/code]
TypeScriptの設定ファイルを作ります。
[code lang=bash]
vim tsconfig.json
[/code]
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "test/"
},
"exclude": [
"node_modules"
],
"compileOnSave": false
}
続いてTypeScriptでテストコードを書きます。
AppiumのGetting Startedで書かれているコードを実行してみます。
テストコードはsrc/specs/ディレクトリ以下に書きます。
今回はdemo.tsとしました。
またtsファイルはVisual Studio Code等で補完ができるようになっていると思います。
[code lang=bash]
mkdir -p src/specs
vim src/specs/demo.ts
[/code]
describe('api demos', () => {
it('open Alert Dialogs', () => {
browser.click(`~App`)
.click(`~Alert Dialogs`)
.pause(3000);
});
});
続いてトランスパイルします。
[code lang=bash]
yarn tsc
# demo.jsが生成されている
ls -la test/
[/code]
では実行してみます。
[code lang=bash]
yarn wdio config/wdio.config.js --spec test/demo.js
[/code]
画面遷移できることが確認できたと思います。
まとめ
今回はAppiumをつかってモバイルネイティブアプリのテストを実行するための環境を作りました。
Appiumは各言語ごとにクライアントが用意されております。
選択肢があることは迷うことにはなりますが無いよりはよいことだと思います。
今回はサンプル的なアプリですが、いろいろできますのでまた書きたいと思います。