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

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

クイックスタート

最も早く始める方法は、with-playwright例と共に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エンドツーエンドテストの作成

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 }) => {
  // インデックスページから開始（playwright.config.tsのwebServerによりbaseURLが設定されています）
  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テストを実行します。

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

継続的インテグレーション（CI）でのPlaywrightの実行

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

Playwrightと継続的インテグレーションについて、以下のリソースで詳細を学べます：