【Playwright】Next.js App Router で Playwright を利用する

# はじめに
この記事では、Next.js App Router で Playwright を利用する手順を記載します。

https://playwright.dev/

https://nextjs.org/docs/app

# 開発環境
開発環境は以下の通りです。

- Windows 11
- VSCode
- Next.js 14.2.7
- React 18.3.1
- TypeScript 5.5.4
- Playwright 1.46.1

# インストール
まずは Playwright をインストールします。

```powershell
npm init playwright@latest
```

インストール開始後、いくつか質問されます。今回は以下のように回答します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/532f1b88-8051-63cf-366f-d54fc5205119.png)

インストールが完了すると、テスト設定ファイルやテストサンプルファイルが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/bcf359d5-f162-c54b-3676-4db53306aea6.png)

# テスト実行1
この時点で一度テストの動作確認をします。
以下のコマンドを実行します。

```powershell
npx playwright test
```

成功すると、以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/ee60fe26-b05e-b4de-a3c4-7a74411355b8.png)

表示に従って、レポートを確認するコマンドを実行します。

```powershell
npx playwright show-report
```

ブラウザ上でレポートを確認できます。

![Playwright-Test-Report-Google-Chrome-2024-09-01-17-06-05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/6905522f-dbec-eda0-db8f-a1ca9d7b1314.gif)

# テスト対象のコードを実装
次は実装したコードのテストをするため、まずはテスト対象のコードを実装します。

Home と About の2画面作成し、お互いの画面を移動できるコードを実装します。

```app/page.tsx
import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  );
}

```

```app/about/page.tsx
import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  );
}

```

ローカルサーバーを起動します。

```powershell
npm run dev
```

![Create-Next-App-Google-Chrome-2024-09-02-08-14-57.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/4e33f93c-c560-0ed9-a216-87034cb830f7.gif)

# テストコードを実装
先ほど実装したコードのテストコードを実装します。

Home 画面のテストでは、以下の内容を確認します。

- タイトルが「Home」
- 「About」リンクをクリックすると、About 画面に遷移

```__tets__/e2e/page.spec.ts
import test, { expect } from "@playwright/test";

test("Home page should work as expected", async ({ page }) => {
  // Start from Home page
  await page.goto("http://localhost:3000/");
  // Find page title
  await expect(page.locator("h1")).toContainText("Home");
  // Find an element with the text 'About' and click on it
  await page.click("text=About");
  // The new URL should be "/about"
  await expect(page).toHaveURL("http://localhost:3000/about");
});
```

# テスト実行2
実装したテストを実行します。

```powershell
npx playwright test
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/66896f00-356d-d2e3-f70a-d227e815453f.png)

レポートを確認します。

```powershell
npx playwright show-report
```

今回実装したテストが成功したことを確認できます。

![Playwright-Test-Report-Google-Chrome-2024-09-02-09-15-10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/9297e050-b1af-2c80-55fc-c64640f7404e.gif)


:::note
テスト実行時、ローカルサーバーは起動しておく必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/4780c6e6-1131-2e0a-cd84-8d63085c57ce.png)

:::

# 参考
- [Installation](https://playwright.dev/docs/intro)
- [Setting up Playwright with Next.js](https://nextjs.org/docs/app/building-your-application/testing/playwright)