Karma, Jasmine のテストコードを，Appium, Protractor を用いてiPhone Simulatorで動かす．

前提・検証環境

OS X Yosemite 10.10.5
Xcodeがインストールされていること
関連記事: 【Grunt + Karma + Jasmine】CoffeeScriptの開発環境を構築する

Appiumの設定

npmでインストールする

$ npm install -g appium
$ appium -v
=> 1.4.13

シミュレータへのアクセスを許可する

$ authorize_ios

設定チェック

$ appium-doctor

今回はAndroidでは検証しないので「iOS checks were successful. 」だけ表示されればおｋ．

JSプロジェクトの設定

package.json

$ npm install grunt-contrib-connect --save-dev
$ npm install protractor --save-dev
$ npm install grunt-protractor-runner --save-dev

E2Eのテストフレームワーク protractor を使用する．
AngularJS向けのフレームワークだが，Angularを用いてないJSプロジェクトでも使用できる．

protractorはv3.0.0以上だと，テスト実行時にエラーが発生する可能性がある．
protractor Bug bug when started

そのため，v2.x系のバージョンに変更する．

package.json

"devDependencies": {
  "protractor": "^2.5.1"
}

protractor.conf.coffee

protractorの設定ファイルを新規作成する．

protractor.conf.coffee

exports.config =
  seleniumAddress: 'http://localhost:4723/wd/hub',

  capabilities:
    browserName: 'safari'
    'appium-version': '1.4.13'
    platformName: 'iOS'
    platformVersion: '9.2'
    deviceName: 'iPhone 5'

  framework: 'jasmine2'
  specs: [
    'spec/e2e/**/*.coffee'
  ]
  baseUrl: 'http://localhost:9000'
  jasmineNodeOpts:
    showColors: true
    defaultTimeoutInterval: 30000

'appium-version' はインストールしたappiumのバージョンを，platformVersion, deviceName はマシンにインストールされているシミュレータのバージョンを指定しないとテストが実行できない．

Gruntfile.coffee

connect:
      options:
        open: true
      e2e: options:
        open: false
        port: 9000
 protractor:
      options:
        keepAlive: true
        noColor: false
      e2e:
        options:
          configFile: 'protractor.conf.coffee'

grunt.loadNpmTasks 'grunt-contrib-connect'
grunt.loadNpmTasks 'grunt-protractor-runner'

grunt.registerTask 'spec-e2e', ['connect:e2e', 'protractor:e2e']

テストコード

spec/e2e/spec.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=0" name="viewport" />
    <title>E2E template</title>
</head>
<body style="padding:0; margin:0">
<h1 id="title">E2E tempalte</h1>
</body>
</html>

spec/e2e/e2eSpec.coffee

describe 'E2E', ->
  describe 'Verify', ->
    beforeEach ->
      browser.ignoreSynchronization = true
      browser.driver.get('http://localhost:9000/spec/e2e/e2e-template.html')

    it 'should have title', ->
      expect(browser.driver.getTitle()).toEqual('E2E template')