Electronのe2eテストを書いてみた

SpectronとJestを使ってElectronのテストを書いてみました。

はじめに

Electronのe2eテストをずっと実施したかったので試してみました。

TypeScriptを使わないのはなぜ?

webdriverioの型定義が参照できないためです。

WebDriverIOは5系から型定義に公式対応したため、4系までで使っていた@types/webdriverioは凍結されました。しかし、Spectronが依存するWebDriverIOは4系のままであるため参照できません。

以下にIssueが作成されていますが、すぐに対応される様子ではなさそうでした。

上記を回避してJestなども含めてTypeScript対応するより、このままJavaScriptを使った方が良いと考えました。

想定する読者

以下の技術を理解していること

Node.js (npm)
Electron
Jest

環境

OS

Windows10

利用するプロジェクト

以下記事で構築した環境をベースに、UI/処理のロジックを少し変更したものを使います。

packageのバージョン

今回重要なpackageのみを記載します。
その他については先ほど紹介した以前の記事をご覧下さい。

package名	バージョン
Node.js	10.13.0
Electron	6.0.11
Spectron	8.0.0
Jest	24.9.0

Spectronとは

SpectronはElectronの統合つとを簡潔に行うフレームワークです。

Node.js環境で利用可能なテストフレームワークWebDriverIOをラップしています。

インストール

npmでインストールします。

npm i -D spectron

テストファイル作成

テストファイルを4つ作成します。

.
test
  ∟util.js           // 共通処理
  ∟pages
    ∟BasePage.js     // テストサポート用のベースクラス
    ∟TopPage.js      // テストサポート用のトップページのクラス
  ∟spec.js           // テストコード本体

公式をかなり参考にさせていただきました。

util.js

Electronのエントリポイントはmain.jsを想定しています。

const Application = require('spectron').Application;
const electronPath = require('electron');

export async function bootApp() {
  const app = new Application({
    path: electronPath,
    args: ['main.js'],
  });
  await app.start();
  return app;
}

export async function terminateApp(app) {
  await app.stop();
}

pages/BasePage.js

今回はPageの機能として以下3つの共通処理を実装しました。

要素をクリックする
要素の数を数える
要素のテキストを取得する

それぞれメソッドとして実装しています。

export class BasePage {
  static create(clz, app) {
    const ins = new clz();
    ins.app = app;
    return ins;
  }

  async waitFor(selector) {
    await this.app.client.waitForExist(selector);
  }

  async clickElement(elementSelector) {
    await this.waitFor(elementSelector);
    this.app.client.$(elementSelector).click();
  }

  async countElements(elementsSelector) {
    await this.waitFor(elementsSelector);
    return (await this.app.client.$$(elementsSelector)).length;
  }

  async getText(elementSelector) {
    await this.waitFor(elementSelector);
    return this.app.client.getText(elementSelector);
  }
}

awaitを忘れただけで正常に動作しなくなりますので、ご注意を..。

pages/TopPage.js

BasePageを実装しています。
基本的にSelectorの定義が中心になると思います。

import { BasePage } from '~/test/pages/BasePage';

export const INIT_BUTTON = '#init-db-button';
export const INFORMATION_ALERT = '#information-alert';

export const CARDS = '#card-area > *';

export class TopPage extends BasePage {
  static create(app) {
    return BasePage.create(TopPage, app);
  }
}

spec.js

本体です。

import { bootApp, terminateApp } from '~/test/util';
import { TopPage, INIT_BUTTON, INFORMATION_ALERT, CARDS } from '~/test/pages/TopPage';

const TIMEOUT = 15 * 1000;

let app;
let topPage;

beforeAll(async () => {
  app = await bootApp();
  topPage = TopPage.create(app);
}, TIMEOUT);

afterAll(async () => {
  await terminateApp(app);
});

describe('Insert records in top page.', () => {
  test('shows an initial window', async () => {
    expect(await app.client.getWindowCount()).toBe(1);
  });

  test('Initialize DB when button is clicked', async () => {
    await topPage.clickElement(INIT_BUTTON);
    expect(await topPage.countElements(CARDS)).toBe(10);
    expect(await topPage.getText(INFORMATION_ALERT)).toBe('データが入りました');
  });
});

app.clientで何ができるか分からない..調べてもうまくいかない

Spectronのapp.clientはWebDriverIOのbrowserに相当します。
SpectronのREADMEに記載があります。

注意として 上記READMEに記載されたWebDriverIOのリンクは正しくありません。

リンクをクリックすると最新の仕様書..つまり5系のページが表示されます。
しかし、Spectronで現在対応している仕様書は4系です。

そのため4系のサイトでAPI仕様書を閲覧しなければいけません。

ハマリどころでもあるのでご注意下さい。

実行

package.jsonのscriptsが以下の場合を想定します。

  "scripts": {
    "dev": "cross-env NODE_ENV=DEV electron main.js",
    "build": "rm -rf dist && nuxt build",
    "test": "jest",
    "e2etest": "jest test/spec.js"
  },

今回はNuxtを使っているため事前にビルドが必要です。
npm run devのあとにnpm run e2etestを実行しても起動に失敗します。

npm run build && npm run e2etest

実際の動作は以下のようになります。

一瞬なので瞬きしないように注意して下さいね😉

トラブルシューティング

this.timeout is not a function

Jestだと存在しないtimeoutを呼び出しているためです。
mochaのサンプルコードをコピペするとハマリます。

なお、デフォルトのタイムアウト5秒では以下のエラーになると思います。

Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

Electronアプリケーションの実行に5秒以上かかっているからです。
それを回避するため上記コードでは15秒に設定していました。

const TIMEOUT = 15 * 1000;

let app;
let topPage;

beforeAll(async () => {
  app = await bootApp();
  topPage = TopPage.create(app);
}, TIMEOUT);

Server error

nuxt buildに失敗した状態で起動すると発生します。

Renderer is loaded but not all resources are available! Please check C:\Users\syoum\tmp\nuxt-electron-typescript-sqlite3\.nuxt\dist\server existence.

SpectronやJestではなくNuxtに関する問題ですね。

総括