自動テスト

テスト自動化は、アプリケーションコードの意図した動作を検証する効率的方法です。 Electron は独自のテストソリューションを積極的には提供していませんが、このガイドでは Electron アプリでエンドツーエンドの自動テストを実行する方法をいくつか説明します。

WebDriver インターフェースを使用する

ChromeDriver - クローム向けのWebDriver:

WebDriverは、ブラウザを横断的なテストの自動化を実現するためのオープンソースツールです。このドライバはウェブページの遷移、インプット項目への入力、JavaScriptの実行などの機能を提供します。 ChromeDriverはChromium向けWebDriverのワイヤープロトコルを実装した、スタンドアローンサーバです。このドライバは、ChromiumとWebDriverチームによって開発されています。

WebDriver を使ってテストをセットアップする方法がいくつかあります。

WebdriverIO の場合

WebdriverIO (WDIO) は WebDriver でテストするための Node.js パッケージを提供するテスト自動化フレームワークです。このエコシステムには、テストのセットアップに役立つ様々なプラグイン (レポーターやサービスなど) も含まれています。

テストランナーをインストールする

まず、以下のように WebdriverIO スターターツールキットをプロジェクトのルートディレクトリで実行する必要があります。

npm
Yarn

npx wdio . --yes

npx wdio . --yes

これにより必要パッケージがすべてインストールされ、設定ファイル wdio.conf.js が生成されます。

Electron アプリを WDIO に接続する

以下のように設定ファイルの capabilities を更新して、Electron アプリのバイナリを指すようにします。

wdio.conf.js
export.config = {
  // ...
  capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
      binary: '/path/to/your/electron/binary', // Electron バイナリへのパス。
      args: [/* CLI 引数 */] // 任意、おそらく 'app=' + /path/to/your/app/
    }
  }]
  // ...
}

テストを実行する

テストを実行するには以下のようにします。

$ npx wdio run wdio.conf.js

Selenium の場合

Selenium は、多くの言語で WebDriver API へのバインディングを提供するウェブ自動化フレームワークです。この Node.js バインディングは、NPM の selenium-webdriver パッケージで提供されています。

ChromeDriver サーバーを実行する

Selenium を Electron で使用するためには、以下のように electron-chromedriver バイナリをダウンロードして実行する必要があります。

npm
Yarn

npm install --save-dev electron-chromedriver
./node_modules/.bin/chromedriver
Starting ChromeDriver (v2.10.291558) on port 9515
Only local connections are allowed.

yarn add --dev electron-chromedriver
./node_modules/.bin/chromedriver
Starting ChromeDriver (v2.10.291558) on port 9515
Only local connections are allowed.

ポート番号 9515 は後で使用するため覚えておいてください。

Selenium を ChromeDriver へ接続する

次に、以下のように Selenium をプロジェクトにインストールします。

npm
Yarn

npm install --save-dev selenium-webdriver

yarn add --dev selenium-webdriver

selenium-webdriver の Electron での使用方法は、ChromeDriver の接続方法と Electron アプリのバイナリの場所を手動で指定する必要があることを除けば、通常のウェブサイトと同じです。

test.js
const webdriver = require('selenium-webdriver')
const driver = new webdriver.Builder()
  // "9515" は ChromeDriver が開けたポートです。
  .usingServer('http://localhost:9515')
  .withCapabilities({
    'goog:chromeOptions': {
      // ここに Electron バイナリへのパスを入れます。
      binary: '/Path-to-Your-App.app/Contents/MacOS/Electron'
    }
  })
  .forBrowser('chrome') // 注: selenium-webdriver <= 3.6.0 では .forBrowser('electron') を使用します
  .build()
driver.get('http://www.google.com')
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver')
driver.findElement(webdriver.By.name('btnG')).click()
driver.wait(() => {
  return driver.getTitle().then((title) => {
    return title === 'webdriver - Google Search'
  })
}, 1000)
driver.quit()

Playwright を使用する

Microsoft Playwright は、ブラウザ固有のリモートデバッグプロトコルを使用して構築されたエンドツーエンドのテストフレームワークで、Puppeteer のヘッドレス Node.js API に似ていますが、エンドツーエンドのテストに特化しています。 Playwright は、Electron がサポートする Chrome デベロッパーツールプロトコル (CDP) を介して、Electron を実験的にサポートしています。

依存関係をインストールする

Playwright はお好みの Node.js パッケージマネージャでインストールできます。 Playwright チームは、Electron アプリをテストする際に不要なブラウザのダウンロードを避けるため、PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD 環境変数の使用を推奨しています。

npm
Yarn

PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install --save-dev playwright

PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn add --dev playwright

Playwright には、エンドツーエンドのテスト用に作られた独自のテストランナー Playwright Test も付属しています。以下のとおりに、プロジェクトに開発用の依存関係としてインストールすることもできます。

npm
Yarn

npm install --save-dev @playwright/test

yarn add --dev @playwright/test

依存関係

このチュートリアルは playwright@1.16.3 と @playwright/test@1.16.3 で書かれました。 Playwright のリリースページで、以降のコードに影響を与えうる変更についてご確認ください。

サードパーティのテストランナーを使用する

別のテストランナー (Jest や Mocha など) を使用したい場合は、Playwright のサードパーティテストランナーガイドをご覧ください。

テストを書く

Playwright は _electron.launch API を介して開発モードでアプリを起動します。この API に Electron アプリケーションを指定するには、メインプロセスのエントリポイントへのパスを渡すことで可能です (ここでは main.js です)。

const { _electron: electron } = require('playwright')
const { test } = require('@playwright/test')

test('launch app', async () => {
  const electronApp = await electron.launch({ args: ['main.js'] })
  // アプリを閉じます
  await electronApp.close()
})

その後、Playwrite の ElectronApp クラスのインスタンスにアクセスします。これは、メインプロセスのモジュールにアクセスできる強力なクラスです。

const { _electron: electron } = require('playwright')
const { test } = require('@playwright/test')

test('get isPackaged', async () => {
  const electronApp = await electron.launch({ args: ['main.js'] })
  const isPackaged = await electronApp.evaluate(async ({ app }) => {
    // これは Electron のメインプロセスで実行され、この引数は常に
    // メインのアプリスクリプトでの require('electron') の戻り値です。
    return app.isPackaged
  })
  console.log(isPackaged) // false (なぜなら開発モードであるから)
  // アプリを閉じます
  await electronApp.close()
})

また、Electron の BrowserWindow インスタンスから個別の Page オブジェクトを作成することもできます。以下は、最初の BrowserWindow を取得してスクリーンショットを保存する例です。

const { _electron: electron } = require('playwright')
const { test } = require('@playwright/test')

test('save screenshot', async () => {
  const electronApp = await electron.launch({ args: ['main.js'] })
  const window = await electronApp.firstWindow()
  await window.screenshot({ path: 'intro.png' })
  // アプリを閉じます
  await electronApp.close()
})

PlayWright テストランナーを使ってこれらをすべてまとめ、単一のテストとアサーションを含む以下の example.spec.js テストファイルを作成してみましょう。

example.spec.js
const { _electron: electron } = require('playwright')
const { test, expect } = require('@playwright/test')

test('example test', async () => {
  const electronApp = await electron.launch({ args: ['.'] })
  const isPackaged = await electronApp.evaluate(async ({ app }) => {
    // これは Electron のメインプロセスで実行され、この引数は常に
    // メインのアプリスクリプトでの require('electron') の戻り値です。
    return app.isPackaged;
  });

  expect(isPackaged).toBe(false);

  // 最初の BrowserWindow が開かれるのを待機し、
  // その Page オブジェクトが返されます
  const window = await electronApp.firstWindow()
  await window.screenshot({ path: 'intro.png' })

  // アプリを閉じます
  await electronApp.close()
});

そして、Playwright テストを npx playwright test で実行します。コンソールにテストの通過が表示され、ファイルシステム上に intro.png スクリーンショットがあるはずです。

☁  $ npx playwright test

Running 1 test using 1 worker

  ✓  example.spec.js:4:1 › example test (1s)

info

Playwright テストは、.*(test|spec)\.(js|ts|mjs) という正規表現にマッチするファイルを自動的に実行します。このマッチングは、Playwright テスト設定オプションでカスタマイズできます。

カスタムテストドライバを使用する

また、Node.js 組み込みの標準入出力を介したプロセス間通信を利用して、独自のカスタムドライバーも書けます。カスタムテストドライバは、アプリのコードを追加で書く必要がありますが、オーバーヘッドが少なく、カスタムメソッドをテストスイートに公開できます。

カスタムドライバを作成するには、Node.js の child_process API を使用します。テストスイートは、以下のように Electron プロセスを spawn してから、簡単なメッセージングプロトコルを確立します。

testDriver.js
const childProcess = require('child_process')
const electronPath = require('electron')

// プロセスの生成
const env = { /* ... */ }
const stdio = ['inherit', 'inherit', 'inherit', 'ipc']
const appProcess = childProcess.spawn(electronPath, ['./app'], { stdio, env })

// アプリからの IPC メッセージをリッスン
appProcess.on('message', (msg) => {
  // ...
})

// アプリへ IPC メッセージを送る
appProcess.send({ my: 'message' })

Electron アプリケーション内からは、Node.js の process API を使用してメッセージをリッスンして返信を送信できます。

main.js
// テストスイートからのメッセージをリッスンする
process.on('message', (msg) => {
  // ...
})

// テストスイートへメッセージを送る
process.send({ my: 'message' })

これで、appProcess オブジェクトを使用してテストスイートから Electron アプリケーションに通信できます。

利便性のために、より高度な機能を提供するドライバオブジェクトで appProcess をラップすることをお勧めします。以下は、これを実現したサンプルです。以下の TestDriver クラスの作成から始めましょう。

testDriver.js
class TestDriver {
  constructor ({ path, args, env }) {
    this.rpcCalls = []

    // 子プロセスの開始
    env.APP_TEST_DRIVER = 1 // メッセージをリッスンする必要性をアプリに知らせる
    this.process = childProcess.spawn(path, args, { stdio: ['inherit', 'inherit', 'inherit', 'ipc'], env })

    // RPC レスポンスのハンドリング
    this.process.on('message', (message) => {
      // ハンドラを除去
      const rpcCall = this.rpcCalls[message.msgId]
      if (!rpcCall) return
      this.rpcCalls[message.msgId] = null
      // 拒否/解決
      if (message.reject) rpcCall.reject(message.reject)
      else rpcCall.resolve(message.resolve)
    })

    // ready を待つ
    this.isReady = this.rpc('isReady').catch((err) => {
      console.error('Application failed to start', err)
      this.stop()
      process.exit(1)
    })
  }

  // 簡単な RPC 呼び出し
  // to use: driver.rpc('method', 1, 2, 3).then(...)
  async rpc (cmd, ...args) {
    // rpc リクエストを送信します
    const msgId = this.rpcCalls.length
    this.process.send({ msgId, cmd, args })
    return new Promise((resolve, reject) => this.rpcCalls.push({ resolve, reject }))
  }

  stop () {
    this.process.kill()
  }
}

module.exports = { TestDriver };

アプリのコードでは、RPC 呼び出しを受信するシンプルなハンドラを書けます。

main.js
const METHODS = {
  isReady () {
    // ここで必要なセットアップをします
    return true
  }
  // ここで RPC 可能なメソッドを定義します
}

const onMessage = async ({ msgId, cmd, args }) => {
  let method = METHODS[cmd]
  if (!method) method = () => new Error('Invalid method: ' + cmd)
  try {
    const resolve = await method(...args)
    process.send({ msgId, resolve })
  } catch (err) {
    const reject = {
      message: err.message,
      stack: err.stack,
      name: err.name
    }
    process.send({ msgId, reject })
  }
}

if (process.env.APP_TEST_DRIVER) {
  process.on('message', onMessage)
}

すると、テストスイートでは、TestDriver クラスを任意のテスト自動化フレームワークで使用できます。以下の例では ava を使用していますが、Jest や Mocha など他の一般的な選択肢も同様に機能します。

test.js
const test = require('ava')
const electronPath = require('electron')
const { TestDriver } = require('./testDriver')

const app = new TestDriver({
  path: electronPath,
  args: ['./app'],
  env: {
    NODE_ENV: 'test'
  }
})
test.before(async t => {
  await app.isReady
})
test.after.always('cleanup', async t => {
  await app.stop()
})

自動テスト

WebDriver インターフェースを使用する​

WebdriverIO の場合​

テストランナーをインストールする​

Electron アプリを WDIO に接続する​

テストを実行する​

Selenium の場合​

ChromeDriver サーバーを実行する​

Selenium を ChromeDriver へ接続する​

Playwright を使用する​

依存関係をインストールする​

テストを書く​

カスタムテストドライバを使用する​