Vue — Playwright (E2E)

Vue — Playwright (E2E)

install

$ pnpm create playwright

→ playwright.config.ts, tests/example.spec.ts が生成。

基本

import { test, expect } from "@playwright/test";

test("homepage", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/My Vue App/);
});

test("navigate", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("link", { name: "About" }).click();
  await expect(page).toHaveURL("/about");
  await expect(page.getByRole("heading", { name: "About" })).toBeVisible();
});

React と全く同じ API (フレームワーク非依存)。

ユーザ動線

test("login → dashboard", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill("test@example.com");
  await page.getByLabel("Password").fill("password");
  await page.getByRole("button", { name: "Login" }).click();
  await expect(page).toHaveURL("/dashboard");
});

test("create item", async ({ page }) => {
  await loginAs(page, "test@example.com");
  await page.getByRole("button", { name: "New Item" }).click();
  await page.getByLabel("Name").fill("My Item");
  await page.getByRole("button", { name: "Save" }).click();
  await expect(page.getByText("My Item")).toBeVisible();
});

設定

import { defineConfig } from "@playwright/test";

export default defineConfig({
  testDir: "./tests/e2e",
  use: {
    baseURL: "http://localhost:5173",
    trace: "on-first-retry",
  },
  webServer: {
    command: "pnpm dev",
    url: "http://localhost:5173",
    reuseExistingServer: !process.env.CI,
  },
});

webServer で自動起動。

デバッグ

$ pnpm exec playwright test --headed       # ブラウザ表示
$ pnpm exec playwright test --debug         # 1行ずつステップ
$ pnpm exec playwright test --ui            # UI モード (最強)

smoke だけに絞る

✅ ログイン → ダッシュボード
✅ メイン機能の主要動線 1〜3本
✅ お金が動くフロー
❌ 全フィールドのバリデーション (vitest+VTU で)

E2E は遅いので 網羅でなくスモークに留める。

CI

- run: pnpm install
- run: pnpm exec playwright install --with-deps
- run: pnpm exec playwright test

まとめ

• Playwright は フレームワーク非依存、React と同じ API
• 主要動線だけに絞る (smoke)
• --ui モードでデバッグ最強
• webServer で自動起動 + テスト

Vue 補強完了。

お疲れさまでした。

Vue 補強完走 — 次の進路