79yuuki/dotfiles/playwright-e2e

npm install -g @playwright/cli
npm install -D @playwright/test
npx playwright install chromium

.playwright-cli/

# 1. セッション付きでブラウザを開く
playwright-cli --session=test open <URL>
 
# 2. スナップショットで要素ref取得
playwright-cli --session=test snapshot
 
# 3. 要素を操作（click/fill/type）
playwright-cli --session=test click <ref>
playwright-cli --session=test fill <ref> "テキスト"
 
# 4. 操作後のスナップショットで確認
playwright-cli --session=test snapshot
 
# 5. スクリーンショットで視覚確認（必要時のみ）
playwright-cli --session=test screenshot

// e2e/example.spec.ts
import { test, expect } from "@playwright/test";
test("フロー名", async ({ page }) => {
  await page.goto("/");
  // Phase 1で取得したセレクタを使用
  await page.getByRole("button", { name: "ボタン名" }).click();
  await expect(page).toHaveURL(/expected-path/);
});

npx playwright test --headed     # ブラウザ表示付き
npx playwright test              # ヘッドレス（CI用）

import { defineConfig } from "@playwright/test";
export default defineConfig({
  testDir: "./e2e",
  timeout: 30_000,
  use: {
    baseURL: process.env.BASE_URL || "http://localhost:3000",
    screenshot: "only-on-failure",
    video: "on",
  },
  projects: [
    { name: "chromium", use: { browserName: "chromium" } },
  ],
});

playwright-cli session-stop-all
rm -rf .playwright-cli/