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

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

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

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

▲ 本記事で紹介する「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をぜひ導入してみてください。

この他にもICS MEDIAではElectronに関する技術情報をまとめています。ぜひ「Electron入門記事連載」ページを参考ください。