メインコンテンツまでスキップ

Next.jsとPlaywrightのセットアップ

Playwrightは、単一のAPIでChromium、Firefox、WebKitを自動化できるテストフレームワークです。これを使ってEnd-to-End（E2E） テストを書くことができます。このガイドでは、Next.jsでPlaywrightをセットアップし、最初のテストを書く方法を説明します。

クイックスタート​

最も早く始める方法は、create-next-appとwith-playwrightの例を使うことです。これにより、Playwrightが設定されたNext.jsプロジェクトを作成できます。

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

手動セットアップ​

Playwrightをインストールするには、以下のコマンドを実行してください：

Terminal
npm init playwright
# または \{#or}
yarn create playwright
# または \{#or}
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 }) => {
  // indexページからスタート（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')
})

Good to know:

playwright.config.tsの設定ファイルに"baseURL": "http://localhost:3000"を追加することで、page.goto("/")をpage.goto("http://localhost:3000/")の代わりに使用できます。

Playwrightテストを実行する​

Playwrightは三つのブラウザ、Chromium、FirefoxおよびWebKitを使用してアプリケーションへのユーザーのナビゲーションをシミュレーションします。これには、Next.jsサーバを稼働させておく必要があります。テストを運用コードに対して実行することをお勧めします。これは、アプリケーションの実際の動作に近づけるためです。

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

Good to know: 代わりにwebServer機能を使用して、Playwrightが開発サーバを起動し、完全に利用可能になるまで待つこともできます。

継続的インテグレーション（CI）上でPlaywrightを実行する​

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

これらのリソースからPlaywrightと継続的インテグレーションについてさらに学ぶことができます：