コンテンツにスキップ
ガイドテストPlaywright

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

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

クイックスタート

最も早く始める方法は、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のセットアップと構成に関する一連のプロンプトが表示され、playwright.config.tsファイルが追加されます。ステップバイステップのガイドについては、Playwrightのインストールガイドを参照してください。

最初のPlaywright E2Eテストの作成

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

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 }) => {
  // 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')
})

知っておくと良いこと: "baseURL": "https://:3000"をplaywright.config.tsの設定ファイルに追加すると、page.goto("/")の代わりにpage.goto("https://:3000/")を使用できます。

Playwrightテストの実行

Playwrightは、3つのブラウザ（Chromium、Firefox、WebKit）を使用してユーザーがアプリケーションを操作する様子をシミュレートします。これには、Next.jsサーバーが実行されている必要があります。アプリケーションの動作と最も近くなるように、本番コードに対してテストを実行することをお勧めします。

npm run buildおよびnpm run startを実行し、別のターミナルウィンドウでnpx playwright testを実行して、Playwrightテストを実行します。

知っておくと良いこと: または、webServer機能を使用して、Playwrightに開発サーバーを起動させ、完全に利用可能になるまで待機させることができます。

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

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

これらのリソースから、Playwrightと継続的インテグレーションについてさらに学ぶことができます