【技術やってみた】Playwrightでのダイアログ表示を含む画面のテストをしてみた

概要

E2Eの自動テストツールPlaywrightを利用して、ダイアログ表示を含む画面のテストができるか試してみた。

環境

・Mac OS Sonoma 14.4
・Visual Studio Code 1.73.1
・Node.js 20.12.0
・Next.js 14.1.4
・Playwright 1.43.1

アプリケーションは以下の記事で作成したものを利用していきます

https://hkane8.hatenablog.com/entry/2024/04/20/163148

参考

・PlaywrightのGitHubページ
https://github.com/microsoft/playwright

実行内容

Playwright用のフォルダを作成して、下記コマンドでPlaywrightをインストールする
```
npm init playwright@latest
```
インストールされたPlaywrightの定義ファイル「playwright.config.ts」を修正する
テスト実行時のスクリーンショットと動画を保存するために、use内に以下を追記
　・screenshot : 'on'
　・video:'on'
インストール後に作成されるフォルダtests（デフォルト値）配下に以下テストファイルを作成する
・tests/dialog.spec.ts

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {

await page.goto('http://localhost:3000/');

page.once('dialog', dialog => {

console.log(`Dialog message: ${dialog.message()}`);

dialog.accept();

});

await page.getByRole('button', { name: 'ダイアログ表示' }).click();

await expect(page.getByText('移動後画面')).toBeVisible();

console.log(`WAIT!`);

// 最後にsleepを入れtないと、画面遷移後のスクリーンショット取得ができないことがあったので、処理を入れた

const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );

await sleep( 1000 )

.then( ()=>{

// 5秒停止後の処理

console.log(`GO!`);

});

});
テストを実行してみる
npx playwright test

passedで成功している。
テスト結果を表示してみる
npx playwright show-report
ブラウザに以下画面が表示される
試しに、chroniumをクリックすると結果が表示された
（対象ブラウザはplaywright.config.tsに記載されている。実行時のオプションで対象を指定できる）
結果画面を下にスクロールすると、スクリーンショットも確認できた
さらに下にスクロールすると実行時の画面遷移がビデオでも確認できた
０：００最初のアクセス画面

０：０１ダイアログのOK押した後の画面
さらに下にスクロールすると、サーバ側の標準出力が確認できた

テストは正常実行できている。
試しにダイアログの操作をキャンセルにするように、
tests/dialog.spec.tsファイルのaccpetをdismissに修正してテストを実行してみた。

// dialog.accept();

dialog.dismiss();

npx playwright test
を実行すると、以下のようなエラーが表示された

さらに、自動でブラウザが起動して、エラーレポートが表示された

choromiumをクリックすると、どこでテストエラーになったかを表示された