どうも、小野です。今回はWebアプリにおけるE2Eテストツール「Playwright」を紹介します。E2Eテストと言えば、ブラウザの操作をテストコードとして実装していくイメージだと思いますが、こちらのツールを利用すると、ブラウザ操作を記録でき、それをコード化してくれます。もちろんある程度の修正は必要になりますが、１からコードを書く必要がないためとても効率的です。
環境構築
以下のアプリケーションをインストールしてください。
- VSCode
- Node.js
次にVSCodeにPlaywrightのプラグインをインストールしてください。 https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
手順
プロジェクト作成
以下のコマンドを実行します。
> mkdir test-playwright > cd test-playwright > npm init playwright@latest Getting started with writing end-to-end tests with Playwright: Initializing project in '.' √ Do you want to use TypeScript or JavaScript? · TypeScript √ Where to put your end-to-end tests? · tests √ Add a GitHub Actions workflow? (y/N) · false √ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
VSCodeで作成したフォルダを開きます。
左側のプラグイン一覧から、Playwrightを選択します。
表示されたパネルから「Record new」をクリックします。するとブラウザが表示され、操作した内容が記録されます。
操作の記録が終わると以下のようなコードが作成されました。
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
// 指定のURLを表示
await page.goto('https://www.frevo-works.co.jp/');
// 指定のリンクをクリック
await page.getByRole('link', { name: '会社概要 ABOUT' }).click();
});
このまま実装されたコードを実行してみます。先ほど操作したものが自動で実行されました。
記録されたコードにはあくまでも操作のみであり、検証するためのコードがないため自分で実装する必要があります。
今回は画面に想定した内容が正しく表示されているか検証します。
import { expect, test } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://www.frevo-works.co.jp/');
await page.getByRole('link', { name: '会社概要 ABOUT' }).click();
// 検証（追加）
await expect.soft(page.locator("dl").nth(0).locator("dt")).toHaveText("社名");
await expect.soft(page.locator("dl").nth(0).locator("dd")).toHaveText("フレボワークス株式会社 FrevoWorks, Inc.");
});
他にも様々な書き方がありますので、公式サイトを確認してください。
検証コードを追加したら実行してみます。
今度はエラーになるように変更します。
import { expect, test } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://www.frevo-works.co.jp/');
await page.getByRole('link', { name: '会社概要 ABOUT' }).click();
// 検証
await expect.soft(page.locator("dl").nth(0).locator("dt")).toHaveText("エラー"); // 変更
await expect.soft(page.locator("dl").nth(0).locator("dd")).toHaveText("フレボワークス株式会社 FrevoWorks, Inc.");
});
変更したら、実行します。
以下のようにエラーに出力されることが確認できます。
1) [chromium] › tests\test-1.spec.ts:3:5 › test ──────────────────────────────────────────────────
Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)
Locator: locator('dl').first().locator('dt')
Expected string: "エラー"
Received string: "社名"
Call log:
- expect.soft.toHaveText with timeout 5000ms
- waiting for locator('dl').first().locator('dt')
9 × locator resolved to <dt>…</dt>
- unexpected value "社名"
6 |
7 | // 検証
> 8 | await expect.soft(page.locator("dl").nth(0).locator("dt")).toHaveText("エラー");
| ^
9 | await expect.soft(page.locator("dl").nth(0).locator("dd")).toHaveText("フレボワークス株式会社 FrevoWorks, Inc.");
10 | });
at C:\Users\devel\workspace\test-playwright\tests\test-1.spec.ts:8:62
1 failed
[chromium] › tests\test-1.spec.ts:3:5 › test ───────────────────────────────────────────────────
おわりに
E2Eテストは複雑というイメージが変わったのではないでしょうか？検証コードは自分で実装が必要だとしても、操作は全て記録できるので大幅なコスト削減につながると思います。今回は割愛しましたが、GithubActionsなどのCI連携も可能です。
テスト自動化を導入して、低コストで高品質なモノを作りましょう。
