自動テスト
テスト自動化は、アプリケーションコードの意図した動作を検証する効率的方法です。 Electron は独自のテストソリューションを積極的には提供していませんが、このガイドでは Electron アプリでエンドツーエンドの自動テストを実行する方法をいくつか説明します。
WebDriver インターフェースを使用する
ChromeDriver - クローム向けのWebDriver:
WebDriverは、ブラウザを横断的なテストの自動化を実現するためのオープンソースツールです。 このドライバはウェブページの遷移、インプット項目への入力、JavaScriptの実行などの機能を提供します。 ChromeDriverはChromium向けWebDriverのワイヤープロトコルを実装した、スタンドアローンサーバです。 このドライバは、ChromiumとWebDriverチームによって開発されています。
WebDriver を使ってテストをセットアップする方法がいくつかあります。
WebdriverIO の場合
WebdriverIO (WDIO) は WebDriver でテストするための Node.js パッケージを提供するテスト自動化フレームワークです。 このエコシステムには、テストのセットアップに役立つ様々なプラグイン (レポーターやサービスなど) も含まれています。
すでに WebdriverIO をセットアップしている場合は、依存関係を更新し、ドキュメントに記載されている 方法で既存の設定を検証することを推奨します。
テストランナーをインストールする
プロジェクトでまだ WebdriverIO を使用していない場合は、以下のようにプロジェクトのルートディレクトリでスターターツールキットを実行すれば追加できます。
- npm
- Yarn
npm init wdio@latest ./
yarn create wdio@latest ./
これは適切なセットアップを行うための設定ウィザードを開始し、必要なパッケージをすべてインストールし、wdio.conf.js
設定ファイルを生成します。 "What type of testing would you like to do?" という最初の質問では、"Desktop Testing - of Electron Applications" を必ず選択してください。
Electron アプリを WDIO に接続する
設定ウィザードの実行後、wdio.conf.js
にはおおよそ以下の内容が含まれているはずです。
export const config = {
// ...
services: ['electron'],
capabilities: [{
browserName: 'electron',
'wdio:electronServiceOptions': {
// WebdriverIO は、Electron Forge または electron-builder を
// 使用している場合、自動で以下のようにバンドルされている
// アプリケーションを検知できます。
// appBinaryPath: './path/to/bundled/application.exe',
appArgs: ['foo', 'bar=baz']
}
}]
// ...
}
テストを書く
WebdriverIO API を使用して、画面上の要素とやり取りしましょう。 このフレームワークは、アプリケーションの状態を簡単にアサートする以下のようなカスタム "マッチャー" を提供しています。
import { browser, $, expect } from '@wdio/globals'
describe('keyboard input', () => {
it('should detect keyboard input', async () => {
await browser.keys(['y', 'o'])
await expect($('keypress-count')).toHaveText('YO')
})
})
さらに、WebdriverIO では Electron API にアクセスしてアプリケーションの静的情報を取得できます。
import { browser, $, expect } from '@wdio/globals'
describe('when the make smaller button is clicked', () => {
it('should decrease the window height and width by 10 pixels', async () => {
const boundsBefore = await browser.electron.browserWindow('getBounds')
expect(boundsBefore.width).toEqual(210)
expect(boundsBefore.height).toEqual(310)
await $('.make-smaller').click()
const boundsAfter = await browser.electron.browserWindow('getBounds')
expect(boundsAfter.width).toEqual(200)
expect(boundsAfter.height).toEqual(300)
})
})
また、他の Electron のプロセス情報を検索できます。
import fs from 'node:fs'
import path from 'node:path'
import { browser, expect } from '@wdio/globals'
const packageJson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), { encoding: 'utf-8' }))
const { name, version } = packageJson
describe('electron APIs', () => {
it('should retrieve app metadata through the electron API', async () => {
const appName = await browser.electron.app('getName')
expect(appName).toEqual(name)
const appVersion = await browser.electron.app('getVersion')
expect(appVersion).toEqual(version)
})
it('should pass args through to the launched application', async () => {
// カスタム引数は WDIO の起動前に設定する必要があるため、wdio.conf.js ファイルにて設定します。
const argv = await browser.electron.mainProcess('argv')
expect(argv).toContain('--foo')
expect(argv).toContain('--bar=baz')
})
})
テストを実行する
テストを実行するには以下のようにします。
$ npx wdio run wdio.conf.js
WebdriverIO はアプリケーションの起動とシャットダウンを手助けします。
さらなるドキュメント
WebdriverIO の公式ドキュメント では、Electron API のモックやその他の有用なリソースを紹介しています。
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.