Spectron で Electron アプリのテストをする

Electron が Ver.1.0 になり、関連ツールもいくつかリリースされました。Spectron はその一つで、Electron の API 部分をテストできるようになるフレームワークです。

これまでも ChromeDriver を使ってテストを書くことはできましたが、あくまで WebDriver でしかなかったわけで、ブラウザとして実現できる部分のテストくらいしか書くことができませんでした。しかしこれからはアプリ全体のテストをすることもできるようになると期待できますね。

参考

electron/spectron: Test Electron apps using ChromeDriver

正直 README.md がすべてな印象です。

環境

Electron 1.0.2
Spectron 3.0.1

導入

npm install --save-dev spectron

Electron と Spectron のマイナーバージョンを揃える必要があります (Electron 1.0.x であれば Spectron 3.0.y)。package.json を必ず編集してバージョン指定に ~ を使いましょう。

実装

Spectron の README.md に書かれているサンプルをどうぞ。

test.js

var Application = require('spectron').Application
var assert = require('assert')

describe('application launch', function () {
  this.timeout(10000)

  beforeEach(function () {
    this.app = new Application({
      path: '/Applications/MyApp.app/Contents/MacOS/MyApp' // あるいは electron-prebuilt の実行ファイルを指定し、`args` にソースコードのパスを与える
    })
    return this.app.start()
  })

  afterEach(function () {
    if (this.app && this.app.isRunning()) {
      return this.app.stop()
    }
  })

  it('shows an initial window', function () {
    return this.app.client.getWindowCount().then(function (count) {
      assert.equal(count, 1)
    })
  })
})

new Application() にアプリの実行ファイルのパスを渡すだけでよいので、ChromeDriver + WebDriverIO の組み合わせよりもずっと楽に扱えます。app.start() の呼び出しでアプリが起動してくるので、あとは WebdriverIO と Electron(Spectron) の API を駆使してテストケースの作成を頑張る、という感じです。

Electron アプリを起動するだけあってかなり遅いので、簡単にテストがタイムアウトして失敗します。mocha であれば this.timeout() で各テストのタイムアウトを余裕を持って伸ばしておくと無難です。

雑感

ChromeDriver で Electron を動かすまでの面倒な部分が一掃されており、非常に使いやすくなっていると感じました。また app.client が WebdriverIO の API と統合されているため、既に WebdriverIO を使用しているのであれば楽に移行できると思います。実際やってみたところ、テスト本体は殆ど変わっていません (むしろ変わっていたらおかしいのですが)。

今すぐにテストを追加しなくとも、とりあえず Spectron を使える状態にしておくというのもありかと思います。