dot_claude/skills/playwright-cli/SKILL.md
Use when running Playwright via terminal CLI — `npx playwright test` (test runner), `codegen` (interactive recording), `screenshot` / `pdf` (one-off captures), and CI sharding. NOT for agent-driven real-time browser control (use `claude-in-chrome` MCP tools for that).
npx skillsauth add mizchi/chezmoi-dotfiles playwright-cliInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Terminal-based browser automation using npx playwright. This skill covers the CLI surface: running tests, generating test code via codegen, taking screenshots/PDFs, and CI sharding flags.
| I want to... | Use |
|---|---|
| Run E2E tests | npx playwright test (this skill) |
| Record a browser session → test code | npx playwright codegen (this skill) |
| One-off screenshot / PDF from a URL | npx playwright screenshot / pdf (this skill) |
| Write / review / tune a Playwright test suite | playwright-test skill |
| Agent-driven real-time browser control (navigate → click → read → assert) | mcp__claude-in-chrome__* tools (not this skill) |
| Interactive data scraping / SPA exploration | claude-in-chrome MCP tools or a Playwright script executed via npx playwright test |
For data scraping / SPA flows where you need to programmatically navigate, click "Load More", extract DOM, and save JSON: write a tests/*.spec.ts and run npx playwright test. See playwright-test skill for the test-authoring patterns.
# Interactive codegen (generates test code from browser actions)
npx playwright codegen https://example.com
# Run all tests
npx playwright test
# Run specific file
npx playwright test tests/login.spec.ts
# Run specific test by title
npx playwright test -g "should login"
# Debug mode (opens Playwright Inspector)
npx playwright test --debug
# UI mode (visual test runner with time-travel)
npx playwright test --ui
# Headed mode (see the browser)
npx playwright test --headed
# Specific browser
npx playwright test --project=chromium
# Generate trace
npx playwright test --trace on
# View report
npx playwright show-report
# Install browsers
npx playwright install
npx playwright install chromium --with-deps # CI-optimized
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3
# Screenshot from CLI
npx playwright screenshot --browser=chromium https://example.com screenshot.png
# PDF (Chromium only)
npx playwright pdf https://example.com page.pdf
tools
Use when working on github.com/mizchi/pkspec, especially release readiness, version bumps, GitHub Actions/Nix release checks, adapter DSL work, or the experimental Playwright/Vitest coverage presets. Covers the repo's spec gates, pkfire release flow, pkl CLI dependency gotchas, and what is intentionally still experimental.
data-ai
指定されたリポジトリ、複数リポジトリ、または GitHub organization から、ドメイン固有の専門用語、業界用語、社内・プロダクト用語、リポジトリ実装マップ、技術構成、オンボーディング向け Mermaid 構成図を抽出・生成するときに使う。ユーザーが「用語集を作る」「ドメイン辞書を作る」「オンボーディング資料にする」「repo/org を見て専門用語をまとめる」「AI が再確認しなくてよい知識ベースを作る」と依頼したら起動する。
development
Guide for writing MoonBit bindings to JavaScript using `extern "js"`. Use when adding FFI declarations against browser/Node/Deno APIs or npm packages, wrapping JS objects behind opaque types, bridging Promises with `async fn` and `Promise::wait()`, configuring `moon.pkg` exports for esm/cjs/iife output, or handling null/undefined at the JS boundary.
testing
技術記事の再現性 (読者が手元で再現できるか) を評価するスキル。subagent に「初見の読者として手元で再現を試みる」シミュレーションをさせ、足りない情報をリストアップさせる。記事ドラフトの最終チェック、または公開後フィードバック前の事前検証で使う。