App Router で experimental playwright を使って E2E テストをやってみる • nonoakij's blog

はじめに

experimental/testmode/playwright を試そうと思ったのですが、断片的な情報が多く、Next.js のリポジトリにも Example がなかったので、一通り試してみました。

この記事は、上記リポジトリの内容を振り返られるようにまとめたものです。従って、playwrightやmswの使い方の説明など触れていません。

具体的な実装は下記のリポジトリを参照してください。
https://github.com/nonoakij/next-experimental-playwright
! nsw の実装も含まれていますが、現状うまく動かすことができなかったのでコメントアウトされています。

今回やった内容は、以下のようなものです。

Next の Example (with-playwright) をベースに単純な E2E テストができることを確認する
snapshot をとって Visual Regression Test を行う
experimental/testmode/playwright を使って、API を Mock して E2E テストを行う

ディレクトリとファイル構成

tree
.
├── app
│   ├── about
│   │   └── page.tsx
│   ├── api
│   │   └── product
│   │       └── [name]
│   │           └── route.ts
│   ├── layout.tsx
│   ├── page.tsx
│   └── product
│       ├── [name]
│       │   └── page.tsx
│       └── page.tsx
├── e2e
│   ├── app.spec.ts
│   └── testmode-playwright.spec.ts
└── playwright.config.ts

! 重要な部分のみ抜粋してます

基本的には Example の構成をそのまま使っています。
これから追記した部分の説明をします。

app/product/[name]/page.tsx

ページ内で route handler (app/api/product/[name]/route.tsx) から、タイトルを取得して表示するようにしています。

app/api/product/[name]/route.tsx

npm run dev で、Next を立ち上げているときに、/product/:name にアクセスすると、name に応じたタイトルを返すようにしています。E2E テストの際に、testmode-playwright.spec.ts で、この API を Mock しています。

e2e/testmode-playwright.spec.ts

API を Mock して E2E テストを行う部分のテストを書いています。

e2e/app.spec.ts

基本的に Example のままですが、snapshot をとる部分を追記しています。

まとめ

experimental/testmode/playwright を使わなくても、snapshot をとることで、Visual Regression Test を行うことができる。 experimental/testmode/playwright を使うことで、API を Mock して E2E テストを行うことができる。

Reference