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
# または
yarn create playwright
# または
pnpm create playwright

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

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

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

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

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

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

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

補足: "baseURL": "http://localhost:3000"をplaywright.config.ts設定ファイルに追加すれば、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とContinuous Integrationについてさらに学ぶことができます：

• PlaywrightによるNext.jsの例
• CIプロバイダーでのPlaywright
• Playwright Discord