自動テスト
テスト自動化は、アプリケーションコードの意図した動作を検証する効率的方法です。 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 アプリのバイナリを指すようにします。
exports.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 アプリのバイナリの場所を手動で指定する必要があることを除けば、通常のウェブサイトと同じです。
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
テストファイルを作成してみましょう。
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)
Playwright テストは、.*(test|spec)\.(js|ts|mjs)
という正規表現にマッチするファイルを自動的に実行します。 このマッチングは、Playwright テスト設定オプション でカスタマイズできます。
Playwright のドキュメントにて、Electron と ElectronApplication クラスの API の詳細をご覧いただけます。
カスタムテストドライバを使用する
また、Node.js 組み込みの標準入出力を介したプロセス間通信を利用して、独自のカスタムドライバーも書けます。 カスタムテストドライバは、アプリのコードを追加で書く必要がありますが、オーバーヘッドが少なく、カスタムメソッドをテストスイートに公開できます。
カスタムドライバを作成するには、Node.js の child_process
API を使用します。 テストスイートは、以下のように Electron プロセスを spawn してから、簡単なメッセージングプロトコルを確立します。
const childProcess = require('node: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 を使用してメッセージをリッスンして返信を送信できます。
// テストスイートからのメッセージをリッスンする
process.on('message', (msg) => {
// ...
})
// テストスイートへメッセージを送る
process.send({ my: 'message' })
これで、appProcess
オブジェクトを使用してテストスイートから Electron アプリケーションに通信できます。
利便性のために、より高度な機能を提供するドライバオブジェクトで appProcess
をラップすることをお勧めします。 以下は、これを実現したサンプルです。 以下の TestDriver
クラスの作成から始めましょう。
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 呼び出しを受信するシンプルなハンドラを書けます。
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 など他の一般的な選択肢も同様に機能します。
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()
})