メニュー
Browser automation — navigate, click, fill, snapshot web pages. Use for UI testing, documentation scraping, OAuth flows, web research.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | playwright |
| description | Browser automation — navigate, click, fill, snapshot web pages. Use for UI testing, documentation scraping, OAuth flows, web research. |
| user-invocable | true |
| disable-model-invocation | true |
Use when: you need to interact with a web page — test a UI, scrape docs, verify a login flow, research a live API.
MCP server key: playwright — tools: mcp__playwright__*
Token cost: 🟡 LOW-MEDIUM — accessibility snapshots are structured text (no pixel cost); large pages produce verbose trees.
| Task | Use |
|---|---|
| "Test this login form end-to-end" | playwright |
| "Scrape this documentation page" | playwright |
| "Verify OAuth redirect works" | playwright |
| "Find code about auth" | cocoindex-code (semantic search) |
| "What does AuthService call?" | codebase-memory-mcp (structural graph) |
| "Is this PR safe to ship?" | code-review-graph |
mcp__playwright__browser_navigate(url) — go to URL
mcp__playwright__browser_snapshot() — accessibility tree (PREFER over screenshot)
mcp__playwright__browser_click(element, ref) — click by accessibility label
mcp__playwright__browser_fill(element, ref, val) — fill an input
mcp__playwright__browser_screenshot() — visual capture (only when structure is insufficient)
mcp__playwright__browser_evaluate(script) — run JS in page context
mcp__playwright__browser_wait_for_url(url) — wait for navigation
mcp__playwright__browser_close() — clean up when done
1. browser_navigate(url)
2. browser_snapshot() ← read the accessibility tree
3. browser_click / browser_fill ← interact by element label or ref
4. browser_snapshot() ← verify the new state
5. browser_close() ← always clean up
Never use browser_screenshot as the first action — accessibility snapshots give the same structural information at a fraction of the token cost.
browser_snapshot returns a structured accessibility tree — use element labels for clicking/fillingbrowser_evaluate for data extraction over reading the full snapshot repeatedlybrowser_close when done — open tabs accumulate contextbrowser_evaluate("document.querySelector('selector').textContent") to extract specific content without loading the full tree# Pre-install Chromium browsers (avoids download delay on first use)
npx playwright install chromium
# Full install with system dependencies (Linux CI)
npx playwright install chromium --with-deps
The MCP server (npx @playwright/mcp@latest) lazy-installs on first invocation — no manual setup required if Chromium is already installed.
Route a codebase question to the right tool — structural graph, semantic search, or risk analysis. Use when you need to find or understand code without knowing exact file names.
Auto-configure CLAUDE.md and claude/ knowledge docs for a new project. Use when setting up Brain Bootstrap in a new repository. Discovers the codebase, fills in templates, and writes project-specific configuration.
Build the project and verify it compiles cleanly. Use after making changes to confirm nothing is broken before running tests. Reads the build command from claude/build.md.
Save session state before context gets full or before ending. Writes current task state, branch, and loaded docs to claude/tasks/todo.md so the next session can resume cleanly.
Remove all git worktrees for merged branches. Accepts --dry-run to preview. Use after merging PRs or for weekly maintenance.
Clean workspace — build artifacts, dependencies, caches, Docker volumes, or temp files. Accepts arguments like build, deps, all, cache, docker, tasks, reinstall.