Electronの公式テストフレームワークSpectron入門

2016年8月19日更新 / 株式会社ICS 野原のぞみ

Electron

Spectron（スペクトロン）はElectronの為のテストフレームワークで、ElectronのAPIを使用したテストが可能になります。テストを取り入れることで、「想定していた動作と違う」「作成していた機能がいつの間にか動作しない」といったことを未然に防げます。

Spectronからは実際にElectronアプリを起動することができ、「ウィンドウのタイトル」「デベロッパーツールの表示状態」といったことをElectronのAPIにアクセスして取得できます。また、「ページの画像キャプチャー」機能でデザイン崩れが発生していないかのチェックや「ページのテキスト保存」でテストに失敗した時のHTMLテキストの取得、「console.log()で書きだした内容の取得」も可能です。これらのテストは手元の開発機だけでなくJenkinsなどCI（継続的インテグレーション）サービス上でも使用できます。

Spectronの説明画像キャプチャー（公式ブログ）
▲ 本記事で紹介する「Spectron」（公式ブログのキャプチャー）

ElectronのテストフレームワークSpectronについて

Spectronは次のようなことが可能です。

CIサービスとの併用
ElectronのAPIにアクセス
複数のウィンドウの動作を確認
Promiseを使用して、非同期な動作に対応
アプリにヘルパーコマンドを追加
他のテストライブラリとの互換性

次の動画では実際にSpectronを使用したテストを実行して、エラーが出ることを確認してから、コードを修正しテストが通るようにしています。今回のテストは簡易なものですが、どのように実行するかのイメージが伝わるかと思います。

▲ Spectronでテストを実行しているところ

Spectronを実行してみよう

実際に公式で提供されているサンプルを実行してみましょう。今回のサンプルを実行するには2つほど前提条件があります。

すでにElectronアプリのプロジェクトがある ※1
Electronはプロジェクト以下にインストールしている ※2

※1 Electronのアプリ作成は記事「初めてのElectron！ HTML5でデスクトップアプリを作成しよう」を参照ください

※2 プロジェクト以下に保存する場合は、Electronのインストール時にnpm install electron-prebuilt --save-devという形で--save-devオプションを指定します。

Spectronのサンプルコードのフォルダー構成

├── package.json // electron-prebuiltがインストール済み
├── node_modules
├── index.html   // electronのメインウィンドウ
├── main.js      // electronの起動ファイル
└── test
    └── spectron_test.js

Spectronをインストール

Spectronはnpmからインストールできます。次のコマンドでElectronアプリと同プロジェクトにnpmでSpectronをインストールします。

npm install spectron --save-dev

SpectronからElectronアプリをテスト

Spectronは次のようなコードで実行できます。公式で提供されているサンプルだと、パッケージ化済みのアプリのテストというコードであり手軽に実行ができません。そのためテストコードを少し修正して、パッケージ化されていない状態のアプリをテストできるようにしています。

test/spectron_test.js

▼ Spectronの初期化部分

const Application = require("spectron").Application;
const assert = require("assert");
const path = require("path");

// Electronの実行ファイルまでのパス
//  ../node_modules/.bin/electron.cmd
const isWindows = process.platform === "win32";
const ext = isWindows ? ".cmd" : "";
const electronPath = path.join(
  __dirname,
  "..",
  "node_modules",
  ".bin",
  "electron" + ext
);

// Electronのアプリ起動パス。testフォルダーからの相対パス「../」
const appPath = path.join(__dirname, "..");

// アプリケーション
const app = new Application({
  // Electronの実行ファイルまでのパス
  path: electronPath,
  // electronを実行する際の引数
  args: [appPath]
});

▼ 実際にアプリケーションをテストしている箇所

// Promiseを使用して、非同期処理を実行している。
app
  .start()
  .then(function() {
    // ウィンドウの表示状態を取得する
    return app.browserWindow.isVisible();
  })
  .then(function(isVisible) {
    // ウィンドウが表示されているか
    assert.equal(isVisible, true);
  })
  .then(function() {
    // ウィンドウのタイトルを取得する
    return app.client.getTitle();
  })
  .then(function(title) {
    // ウィンドウのタイトルが"My App"であるか
    assert.equal(title, "My App");
  })
  .then(function() {
    // 終わったらアプリケーションを停止する
    console.info("Test Success");
    return app.stop();
  })
  .catch(function(error) {
    // エラーをキャッチしたら、テストがエラーした旨のメッセージを表示する
    console.error("Test failed", error.message);
    return app.stop();
  });

全体のソースコード – GitHub

テストの実行は次のコマンドを打ってください。

node test/spectron_test

今回のサンプルコードを使用すると、Spectronでチェックしているコードと、実際のウィンドウのタイトルが違うため、テストでエラーが発生します。

Test failed 'Hello World!' == 'My App'

Electronで起動しているindex.htmlのtitle要素内を修正することで、テストが成功します。

Test Success

Spectronを導入して、安心してコードを書こう

Spectronを導入することで、簡単にElectronアプリのテストを実行できるようになりました。Electronに限らずですが、コードの変更でいつの間にか不具合が発生していた、なんてことに遭遇した人は少なくないと思います。あとから気がついて後悔しないように、Electronアプリの開発にはSpectronをぜひ導入してみてください。