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

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

Playwrightは、単一のAPIでChromium、Firefox、およびWebKitを自動化できるテストフレームワークです。これを使用して、End-to-End (E2E) テストを記述できます。このガイドでは、Next.jsでPlaywrightをセットアップし、最初のテストを書く方法を紹介します。

クイックスタート​

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

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テストを作成する​

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

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')
})

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

Playwrightテストを実行する​

Playwrightは、Chromium、Firefox、およびWebKitの3つのブラウザを使用して、アプリケーションのユーザーのナビゲーションをシミュレートします。これには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と継続的インテグレーションについて詳しく学ぶことができます：