はじめに
こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。
今回はPlaywrightを使用して自動テストを作成していこうと思います。
前回の記事
Playwrightとは
Playwright は、単一の API で Chromium、Firefox、WebKit を自動化できるテスト フレームワークです。これを使用して、エンドツーエンド (E2E)テストを作成できます。このガイドでは、Next.js を使用して Playwright をセットアップし、最初のテストを作成する方法を説明します。
(引用元：https://nextjs.org/docs/pages/building-your-application/testing/playwright)
E2Eテストを様々なブラウザで自動テストができるライブラリのことのようです。
インストール
以下のコマンドでインストールします。
npm init playwright@latest
色々聞かれるので、以下のように答えました。
PS C:\develop\next-example-app> npm init playwright@latest
Need to install the following packages:
create-playwright@1.17.132
Ok to proceed? (y) y
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
√ Where to put your end-to-end tests? · tests
√ Add a GitHub Actions workflow? (y/N) · true
√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
すると、一番上の階層にtestsフォルダが作成されていて、その中にexample.spec.tsが作成されています。
実行する
以下のコマンドで実行できます。
npx playwright test
すると以下のようにサンプルとして作成されたテストが実行され、成功していることが確認できます。
PS C:\develop\next-example-app> npx playwright test
Running 6 tests using 6 workers
6 passed (5.4s)
To open last HTML report run:
npx playwright show-report
失敗させてみる
await page.goto('https://playwright.dev/');
example.spec.tsにこのような記述があるので、URLの中を空にしてみます。
await page.goto('');
この状態でテストを実行してみます。
PS C:\develop\next-example-app> npx playwright test
Running 6 tests using 6 workers
1) [webkit] › example.spec.ts:3:5 › has title ────────────────────────────────────────────────────
Error: page.goto: Protocol error (Playwright.navigate): Cannot navigate to invalid URL
Call log:
- navigating to "", waiting until "load"
3 | test('has title', async ({ page }) => {
4 | // await page.goto('https://playwright.dev/');
> 5 | await page.goto('');
このようにエラーになり、さらにブラウザでhttp://localhost:9323/が開かれます。
このように、記載したテストに対して以下３つのブラウザで実行した結果が記載されています。
・ Chrome(chromium)
・ Safari(webkit)
・ Firefox(firefox)
自分の画面をテストしてみる
count.spec.tsファイルを作成してみます。
import { test } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('http://localhost:3000/count')
});
こんな感じで作ってみました。
ただ、これだとnpm run devなどをしていないのでテストができません。
そのため、playwright.config.tsのwebServerを以下のように修正します。
webServer: {
command: 'npm run start',
url: 'http://127.0.0.1:3000',
reuseExistingServer: !process.env.CI,
},
これで実行してみます。
PS C:\develop\next-example-app> npm run playwright
> next-example-app@0.1.0 playwright
> playwright test
Running 9 tests using 8 workers
9 passed (6.7s)
To open last HTML report run:
npx playwright show-report
このように無事成功できました。
困ったこと
npm run startをすると以下のようにエラーになってしまった時がありました。
PS C:\develop\next-example-app> npm start
> next-example-app@0.1.0 start
> next start
▲ Next.js 14.1.0
- Local: http://localhost:3000
[Error: ENOENT: no such file or directory, open 'C:\develop\next-example-app\.next\BUILD_ID'] {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'C:\\develop\\next-example-app\\.next\\BUILD_ID'
}
これは以下コマンドで一度ビルドしたら通るようになりました。
npm run build
なぜbuildをしなくてはいけないのかはよくわかりませんでした。
もし知っている方いたら教えていただけると助かります。
おわりに
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました！
参考文献