Setting up Playwright with Next.js

Playwright は、Chromium、Firefox、そして WebKit を一つの API で自動化できるテストフレームワークです。End-to-End(E2E)テストの記述に使用することができます。このガイドでは、Next.js と Playwright をセットアップし、初めてのテストを書く方法を示します。

Quickstart

最速で始める方法は、with-playwright example を使用してcreate-next-appを使用することです。これにより、Playwright が設定された Next.js プロジェクトが作成されます。

npx create-next-app@latest --example with-playwright with-playwright-app

Manual setup

Playwright をインストールするには、次のコマンドを実行してください：

npm init playwright
# or
yarn create playwright
# or
pnpm create playwright

これにより、プロジェクトのセットアップと Playwright の設定を行う一連のプロンプトが表示されます。これには、playwright.config.tsファイルの追加が含まれます。詳しい手順については、Playwright のインストールガイド をご参照ください。

Creating your first Playwright E2E test

二つの新しい 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>
  )
}

次に、test を追加して、あなたのナビゲーションが正しく動作していることを確認してください:

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('http://localhost: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('http://localhost:3000/about')
  // The new page should contain an h1 with "About"
  await expect(page.locator('h1')).toContainText('About')
})

Good to know:

page.goto("http://localhost:3000/") の代わりに page.goto("/") を使うことができます。これは、playwright.config.ts 設定ファイル に "baseURL": "http://localhost:3000" を追加した場合に限ります。

Playwright テストの実行

劇作家は、Chromium、Firefox、Webkit の 3 つのブラウザを使用してアプリケーションを操作するユーザーをシミュレートします。これには、Next.js server が稼働していることが必要です。アプリケーションの動作をより正確に模擬するために、production code に対してテストを実行することをお勧めします。

npm run buildとnpm run startを実行し、その後、別の window でnpx playwright testを実行して Playwright のテストを実行します。

Good to know: 代わりに、Playwright が開始して developmentserver が完全に利用可能になるまで待つようにwebServer 機能を使用することもできます。

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

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

以下のリソースから Playwright および Continuous Integration について詳しく知ることができます：

• Next.js と Playwright の例
• あなたの CI プロバイダ上のPlaywright
• Playwright Discord