ElectronアプリにPlaywrightを導入するステップガイド【TypeScript/Windows】

SHIFT Group 技術ブログ

2024年2月7日 15:55

はじめに

こんにちは。株式会社SHIFT テスト自動化エンジニアの城間です。

今回はデスクトップアプリを作成するためのツール(Electron)の導入から、そこに自動テスト(Playwright)を組み込むまでを説明していきます。

ツール開発の参考になれば幸いです。

Electronとは

Electron（エレクトロン）は、ウェブ技術を使ってデスクトップアプリケーションを作るためのツールです。

ウェブ開発者が得意とするHTML、CSS、JavaScript（またはTypeScript）を使って、クロスプラットフォーム（Windows、macOS、Linuxなど）のデスクトップアプリを簡単に作成することができます。

Electronを使用したアプリの例としてVisual Studio CodeやDiscordなどがあります。

公式サイト https://www.electronjs.org/ja/docs/latest/

Playwrightとは

Playwright(プレイライト)は、ウェブアプリケーションの自動テストやブラウザ操作をサポートするツールです。

Google Chrome、Microsoft Edge、Firefox、Safariなど、主要なブラウザをサポートしています。これにより、クロスブラウザの動作確認が可能です。

Electronは実験的にサポートしているという位置づけになっています。

公式サイト：https://playwright.dev/

1. Electronの導入

まず最初に、WindowsにElectronを導入します。以下の手順で進めていきましょう。

1.1 Node.jsのインストール

Node.jsを下記サイトよりインストールします。

https://nodejs.org/en

インストール後、コマンドプロンプトで下記コマンドを実行し、バージョンが表示されていればインストールが正常に行われています。

node -v

1.2 Electronのプロジェクト作成

任意のディレクトリで新しいElectronプロジェクトを作成します。

mkdir my-electron-app

cd my-electron-app

npm init -y

my-electron-app配下にpackage.jsonができていることを確認します。

1.3 Electron、Typescript のインストール

Electron 及び Typescript をインストールします。

npm install -D electron typescript

1.4 TypeScriptコンパイラの設定

プロジェクトルートにtsconfig.jsonというファイルを作成し、以下の内容を追加します。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true
  }
}

tsconfig.jsonは、TypeScriptプロジェクトの構成やコンパイラの設定を定義するための設定ファイルです。詳しくは公式サイトをご覧ください。

1.5 Electronメインファイルの作成

プロジェクトルートにmain.tsという名前のファイルを作成します。

import { app, BrowserWindow } from "electron";

const createWindow = () => {
  const win = new BrowserWindow();
  win.loadFile("../index.html");
};

app.whenReady().then(createWindow);

1.6 htmlファイル作成

アプリのウィンドウに表示する index.html を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

現時点で、ディレクトリ構成は以下のようになっています。

├── index.html
├── main.ts
├── package-lock.json
├── package.json
└── tsconfig.json

1.7 スクリプトの更新と実行

package.jsonファイルのscriptsセクションを以下のように更新します。

  "scripts": {
    "start": "tsc && electron ./dist/main.js"
  }

このように記載することで、npm startを実行するだけでコンパイルとアプリケーション起動を一括で行うことができます。

npm startを実行してこのような画面が起動されたら成功です。

2.自動テストの導入

2.1 playwrightのインストール

下記コマンドを実行してplaywrightをインストールします。

npm i -D playwright @playwright/test

2.2 playwrightの設定ファイルを追加

プロジェクトルートにplaywright.config.tsという名前の設定ファイルを作成します。

"use strict"
Object.defineProperty(exports, "__esModule", { value: true});

const config = {
    testDir: 'test',
    timeout: 30 * 1000,
    use: {
        headless: true,
    },
    expect: {
        timeout: 5000
    },
};
exports.default = config;

2.2 テストスクリプトの作成

testディレクトリを作成し、その中にテストスクリプト（例：sample.test.ts）を作成します。

// test/sample.test.ts
import { ElectronApplication, Page, test, _electron } from '@playwright/test';

let electronApp: ElectronApplication;
let page: Page;

//electoronのアプリを開く
test.beforeEach(async () => {
  electronApp = await _electron.launch({
    args: ["dist/main.js"],
  });
  page = await electronApp.firstWindow();
});

//electoronのアプリを閉じる
test.afterEach(async () => {
  await electronApp.close();
});

test('Hello Worldが表示されること', async () => {
  // テストコードをここに記述
  await page.locator("text=Hello World")
});

コードについて軽く説明します。

test.beforeEach()は、テスト実行前に実行される関数を指定するPlaywrightのメソッドです。アプリの起動や初期設定を行う前処理が行われます。

await _electron.launch()は、Playwrightに含まれるElectron用の機能を使用してElectronアプリを起動しています。argsオプションは、Electronアプリの起動時に渡す引数を指定します。

await electronApp.firstWindow()は、起動したElectronアプリの最初のウィンドウを取得しています。これにより、テスト内でこのウィンドウに対して操作を行うことができます。

test.afterEach()は、テスト実行後に実行される関数を指定するPlaywrightのメソッドです。ここでは、アプリの終了処理が行われます。

await page.locator("text=Hello World");は、Playwrightの機能を使用してページ上の特定の要素を検索します。今回は、テキストが "Hello World" である要素を検索しています。

現時点で、ディレクトリ構成は以下のようになっています。

├── dist
├── test
  ├── sample.test.ts
├── index.html
├── main.ts
├── package-lock.json
├── package.json
├── playwright.config.ts
└── tsconfig.json

2.3 スクリプトの更新と実行

package.jsonファイルのscriptsセクションを以下のように変更します。

  "scripts": {
    "start": "tsc && electron ./dist/main.js",
    "test": "tsc && npx playwright test"
  }

最後に、作成したテストを実行します。下記コマンドで自動テストを実行することができます。

npm test

これで、TypeScriptを使用してElectronアプリにPlaywrightを導入し、自動テストが実行されるようになりました。

終わりに

Electronの導入から自動テスト実行までまとめてみました。

この記事を読んで、ツール開発の参考になれば幸いです。

執筆者プロフィール：城間栄樹
前職では3年ほど保守開発を経験
2021/11/01 SHIFTにテスト自動化エンジニアとして入社
【趣味】
・登山
・テニス

お問合せはお気軽に

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら

PHOTO：UnsplashのMohammad Rahmani

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。

ソフトウェア品質のプロがお伺いします。