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

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

クイックスタート

最も簡単な開始方法は、with-playwright exampleを使用して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ページを作成します：

pages/index.ts

import Link from 'next/link'

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

pages/about.ts

import Link from 'next/link'

export default function About() {
  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と継続的インテグレーションについて詳しくは、以下のリソースを参照してください：