【Next.js】Playwrightを使って自動テストをする

# はじめに

こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

今回はPlaywrightを使用して自動テストを作成していこうと思います。

前回の記事

https://qiita.com/keitaMax/items/bb33ef21ca0ae9c266d0

# 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
```

# 失敗させてみる

```ts
await page.goto('https://playwright.dev/');
```
`example.spec.ts`にこのような記述があるので、URLの中を空にしてみます。

```ts
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/`が開かれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/5db24c0f-9b36-9419-0dc6-ca42d19e1514.png)

このように、記載したテストに対して以下３つのブラウザで実行した結果が記載されています。
・ Chrome(chromium)
・ Safari(webkit)
・ Firefox(firefox)

# 自分の画面をテストしてみる

`count.spec.ts`ファイルを作成してみます。
```ts: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`を以下のように修正します。

```ts:playwright.config.ts
  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をしなくてはいけないのかはよくわかりませんでした。
もし知っている方いたら教えていただけると助かります。


# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！


# 参考文献

https://github.com/microsoft/playwright

https://playwright.dev/docs/writing-tests

# 次の記事