コンテンツにスキップ
アプリケーションの構築テストPlaywright

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

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

クイックスタート

最も早く始めるには、create-next-app を with-playwright の例 と一緒に使用します。これにより、Playwright が構成された Next.js プロジェクトが作成されます。

ターミナル
npx create-next-app@latest --example with-playwright with-playwright-app

手動セットアップ

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

ターミナル
npm init playwright
# or
yarn create playwright
# or
pnpm create playwright

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

Playwright E2E テストの作成

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

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 }) => {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('https://:3000/')
  // Find an element with the text 'About' and click on it
  await page.click('text=About')
  // The new URL should be "/about" (baseURL is used there)
  await expect(page).toHaveURL('https://:3000/about')
  // The new page should contain an h1 with "About"
  await expect(page.locator('h1')).toContainText('About')
})

知っておくと良いこと: playwright.config.ts 設定ファイルに"baseURL": "https://:3000"を追加すれば、page.goto("https://: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 と継続的インテグレーションについては、以下のリソースを参照してください。