Playwright CLIとClaude Code Skillsで効率的なブラウザテストを実現する

# どちらでもOK
npm install -g @playwright/cli
# または
npm install -g playwright-cli

playwright-cli --version
# 0.0.61（2026/01/30時点の最新）

mkdir -p .claude/commands

---
description: Automates browser interactions for web testing, form filling, screenshots, and data extraction
allowed-tools: Bash
---

# playwright-cli

Browser automation CLI tool.

## Quick Start

\`\`\`bash
playwright-cli open https://example.com/
playwright-cli snapshot
playwright-cli click e3
\`\`\`

## Core Workflow

1. `open` to navigate to a page
2. `snapshot` to get element refs
3. `click`, `fill`, `type` to interact

## Commands

### Core
\`\`\`bash
playwright-cli open <url>              # open url
playwright-cli close                   # close the page
playwright-cli click <ref>             # perform click
playwright-cli fill <ref> <text>       # fill text
playwright-cli type <text>             # type text
playwright-cli snapshot                # capture page snapshot
playwright-cli screenshot [ref]        # take screenshot
\`\`\`

### Sessions
\`\`\`bash
playwright-cli --session=<name> open <url>  # open with named session
playwright-cli session-stop-all             # stop all sessions
\`\`\`

### DevTools
\`\`\`bash
playwright-cli tracing-start           # start trace recording
playwright-cli tracing-stop            # stop trace recording
playwright-cli console [min-level]     # list console messages
\`\`\`

# playwright-cli
.playwright-cli/

/playwright-cli カテゴリ選択からサブカテゴリページへの遷移を確認したい

# セッション付きでブラウザを開く
playwright-cli --session=test --headed open http://localhost:3000（Skillで指定していれば他のPORTで開けます）

# snapshotで要素を確認
playwright-cli --session=test snapshot

- button "カテゴリ選択" [ref=e39] [cursor=pointer]
- generic "カテゴリを選択してください" [ref=e6]
- generic "決定" [ref=e15] [cursor=pointer]

# モーダルを閉じる
playwright-cli --session=test click e15

# カテゴリ選択ボタンをクリック
playwright-cli --session=test click e39

# snapshotで選択肢の要素を確認
playwright-cli --session=test snapshot

# カテゴリAを選択
playwright-cli --session=test click e370

# サブカテゴリのリンクをクリック
playwright-cli --session=test click e60

# スクリーンショットで確認
playwright-cli --session=test screenshot

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

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

export default defineConfig({
  testDir: "./e2e",
  timeout: 30_000,
  use: {
    baseURL: "http://localhost:3000",（）
    screenshot: "only-on-failure",
    video: "on",
  },
  projects: [
    {
      name: "chromium",
      use: { browserName: "chromium" },
    },
  ],
});

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

test("初期アクセス → モーダル決定 → カテゴリ選択 → サブカテゴリ遷移", async ({
  page,
}) => {
  // 1. 初期アクセス
  await page.goto("/");

  // 2. 選択モーダルの「決定」ボタンをクリック
  const modal = page.locator("text=カテゴリを選択してください");
  await expect(modal).toBeVisible();
  await page.locator("text=決定").click();
  await expect(modal).toBeHidden();

  // 3. カテゴリ選択ボタンをクリックしてカテゴリAを選択
  await page.getByRole("button", { name: "カテゴリ選択" }).click();
  await page.locator("text=カテゴリA").first().click();
  await expect(page).toHaveURL(/categoryId=1/);

  // 4. サブカテゴリのリンクをクリック
  await page.getByRole("link", { name: "サブカテゴリX" }).click();
  await expect(page).toHaveURL(/subCategoryId=10/);
  await expect(page).toHaveTitle(/サブカテゴリX/);
});

npx playwright test --headed

# セッション停止と作業ファイルの削除
playwright-cli session-stop-all
rm -rf .playwright-cli/