Next.jsでPlaywrightをセットアップする
Playwrightは、単一のAPIでChromium、Firefox、WebKitを自動化できるテストフレームワークです。**エンドツーエンド(E2E)**テストを作成するために使用できます。このガイドでは、Next.jsでPlaywrightをセットアップし、最初のテストを作成する方法を説明します。
クイックスタート
最も早く始める方法は、with-playwright例と共にcreate-next-app
を使用することです。これにより、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をセットアップおよび設定するための一連のプロンプトが表示され、playwright.config.ts
ファイルが追加されます。詳細な手順については、Playwrightインストールガイドを参照してください。
最初のPlaywrightエンドツーエンドテストの作成
2つの新しいNext.jsページを作成します:
import Link from 'next/link'
export default function Home() {
return (
<div>
<h1>Home</h1>
<Link href="/about">About</Link>
</div>
)
}
import Link from 'next/link'
export default function About() {
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 }) => {
// インデックスページから開始(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と継続的インテグレーションについて、以下のリソースで詳細を学べます: