Next.js で Playwright をセットアップする方法

Playwright は、Chromium、Firefox、WebKit を単一の API で自動化できるテストフレームワークです。エンドツーエンド (E2E) テストを記述するために使用できます。このガイドでは、Next.js で Playwright をセットアップし、最初のテストを記述する方法を説明します。

クイックスタート

最も簡単な開始方法は、with-playwright サンプルを使用して create-next-app を実行することです。これにより、Playwright が設定済みの Next.js プロジェクトが作成されます。

Terminal

npx create-next-app@latest --example with-playwright with-playwright-app

手動セットアップ

Playwright をインストールするには、次のコマンドを実行します:

Terminal

npm init playwright
# または
yarn create playwright
# または
pnpm create playwright

これにより、プロジェクトに Playwright をセットアップして設定するための一連のプロンプトが表示され、playwright.config.ts ファイルが追加されます。詳細な手順については、Playwright インストールガイドを参照してください。

最初の Playwright E2E テストを作成する

2つの新しい Next.js ページを作成します:

app/page.tsx

import Link from 'next/link'

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

app/about/page.tsx

import Link from 'next/link'

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

次に、ナビゲーションが正しく機能していることを確認するテストを追加します:

tests/example.spec.ts

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

test('should navigate to the about page', async ({ page }) => {
  // インデックスページから開始 (baseURL は playwright.config.ts の webServer で設定)
  await page.goto('http://localhost:3000/')
  // 'About' というテキストを持つ要素を見つけてクリック
  await page.click('text=About')
  // 新しい URL は "/about" になる (baseURL が使用される)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // 新しいページには「About」という h1 が含まれているはず
  await expect(page.locator('h1')).toContainText('About')
})

知っておくと便利:

playwright.config.ts に "baseURL": "http://localhost:3000" を追加すれば、page.goto("http://localhost:3000/") の代わりに page.goto("/") を使用できます。設定ファイルを参照してください。

Playwright テストの実行

Playwright は、Chromium、Firefox、Webkit の3つのブラウザを使用してアプリケーションのナビゲーションをシミュレートします。これには Next.js サーバーが実行されている必要があります。アプリケーションの動作をより正確に再現するために、本番コードに対してテストを実行することをお勧めします。

npm run build と npm run start を実行し、別のターミナルウィンドウで npx playwright test を実行して Playwright テストを実行します。

知っておくと便利: 代わりに webServer 機能を使用して、Playwright に開発サーバーを起動させ、完全に利用可能になるまで待機させることもできます。

継続的インテグレーション (CI) で Playwright を実行する

Playwright はデフォルトでヘッドレスモードでテストを実行します。すべての Playwright 依存関係をインストールするには、npx playwright install-deps を実行します。

Playwright と継続的インテグレーションについて詳しくは、以下のリソースをご覧ください: