Playwright × Nuxtで始めるE2Eテスト完全ガイド｜導入から実践・CI連携まで

npm install -D @playwright/test @nuxt/test-utils
npx playwright install

import { fileURLToPath } from 'node:url'
import { defineConfig, devices } from '@playwright/test'
import type { ConfigOptions } from '@nuxt/test-utils/playwright'

export default defineConfig<ConfigOptions>({
  testDir: './test/e2e',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
    nuxt: {
      rootDir: fileURLToPath(new URL('.', import.meta.url)),
    },
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
})

test/
├── e2e/              # Playwright E2Eテスト
│   ├── home.test.ts
│   └── auth.test.ts
├── nuxt/             # Nuxtランタイム環境テスト（Vitest）
│   ├── components.test.ts
│   └── composables.test.ts
└── unit/             # 純粋なユニットテスト
    └── utils.test.ts

import { expect, test } from '@nuxt/test-utils/playwright'

test('トップページが正しく表示される', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
})

test('ナビゲーションリンクで別ページに遷移できる', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await page.getByRole('link', { name: 'About' }).click()
  await expect(page).toHaveURL('/about')
  await expect(page.getByRole('heading', { level: 1 })).toContainText('About')
})

import { expect, test } from '@nuxt/test-utils/playwright'

test('お問い合わせフォームを送信できる', async ({ page, goto }) => {
  await goto('/contact', { waitUntil: 'hydration' })

  await page.getByLabel('お名前').fill('テスト太郎')
  await page.getByLabel('メールアドレス').fill('test@example.com')
  await page.getByLabel('お問い合わせ内容').fill('テスト用のメッセージです')

  await page.getByRole('button', { name: '送信' }).click()
  await expect(page.getByText('送信が完了しました')).toBeVisible()
})

import { expect, test } from '@nuxt/test-utils/playwright'

test('ユーザー一覧をAPIから取得して表示する', async ({ page, goto }) => {
  await page.route('**/api/users', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([
        { id: 1, name: '山田太郎' },
        { id: 2, name: '佐藤花子' },
      ]),
    })
  })

  await goto('/users', { waitUntil: 'hydration' })
  await expect(page.getByText('山田太郎')).toBeVisible()
  await expect(page.getByText('佐藤花子')).toBeVisible()
})

npx playwright codegen http://localhost:3000

import { expect, test } from '@nuxt/test-utils/playwright'

test('トップページの見た目が変わっていない', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await expect(page).toHaveScreenshot('home.png', {
    fullPage: true,
    maxDiffPixelRatio: 0.01,
  })
})

test('ダッシュボードの見た目が変わっていない', async ({ page, goto }) => {
  await goto('/dashboard', { waitUntil: 'hydration' })
  await expect(page).toHaveScreenshot('dashboard.png', {
    mask: [
      page.locator('.current-time'),
      page.locator('.random-avatar'),
    ],
  })
})

docker run --rm -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.58.0 \
  npx playwright test --update-snapshots

// playwright.config.ts
import { fileURLToPath } from 'node:url'
import { defineConfig, devices } from '@playwright/test'
import type { ConfigOptions } from '@nuxt/test-utils/playwright'

const authFile = 'test/.auth/user.json'

export default defineConfig<ConfigOptions>({
  testDir: './test/e2e',
  use: {
    nuxt: {
      rootDir: fileURLToPath(new URL('.', import.meta.url)),
    },
  },
  projects: [
    {
      name: 'setup',
      testMatch: /auth\.setup\.ts/,
    },
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: authFile,
      },
      dependencies: ['setup'],
    },
  ],
})

// test/e2e/auth.setup.ts
import { expect, test as setup } from '@nuxt/test-utils/playwright'

const authFile = 'test/.auth/user.json'

setup('ログイン状態を保存する', async ({ page, goto }) => {
  await goto('/login', { waitUntil: 'hydration' })
  await page.getByLabel('メールアドレス').fill('user@example.com')
  await page.getByLabel('パスワード').fill('password123')
  await page.getByRole('button', { name: 'ログイン' }).click()
  await page.waitForURL('/dashboard')
  await page.context().storageState({ path: authFile })
})

name: E2E Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  e2e:
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.58.0
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

npm install -D @nuxt/test-utils@latest

docker run --rm -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.58.0 \
  npx playwright test --update-snapshots