playwright-cli
Playwright CLI
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.
Scope boundary
| 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.
Quick Reference
# 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
Sharding for CI
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3
Screenshot / PDF
# Screenshot from CLI
npx playwright screenshot --browser=chromium https://example.com screenshot.png
# PDF (Chromium only)
npx playwright pdf https://example.com page.pdf
More from mizchi/chezmoi-dotfiles
empirical-prompt-tuning
agent 向けテキスト指示(skill / slash command / task プロンプト / CLAUDE.md 節 / コード生成プロンプト)を、バイアスを排した実行者に動かしてもらい、両面(実行者の自己申告 + 指示側メトリクス)で評価して反復改善する手法。改善が頭打ちになるまで回す。プロンプトや skill を新規作成・大幅改訂した直後、またはエージェントの挙動が期待通りにならない原因を指示側の曖昧さに求めたいときに使う。
90retrospective-codify
タスク完了時に「最初に失敗した内容」と「最終的に通った解法」を対応付け、最初に知っておくべきだった知見を ast-grep ルール / skill / CLAUDE.md ルールのいずれかに言語化する。試行錯誤の末にたどり着いた解や、同じ落とし穴を将来の自分(または別エージェント)に繰り返させたくないときに使う。ユーザーから「今回の学びをルール化して」「skill にして」「lint に落として」と指示されたとき、またはタスク終了時に学びを棚卸しする場面で起動する。
17conventional-changelog
Conventional Commits 規約と CHANGELOG 自動生成の横断リファレンス。commit 書式、Keep a Changelog 形式、semver タグ運用、release-please / changesets / git-cliff / towncrier 等の生成ツール比較を含む。新規リポジトリで release フローを整備するとき、既存 repo の commit 規約を統一するとき、言語に合った changelog ツールを選ぶとき、release-please 以外の選択肢を検討するときに使う。
14playwright-test
Playwright Test (E2E) のベストプラクティスとリファレンス。テストの書き方、固定 wait 回避、ネットワークトリガー、DnD、GitHub Actions での shard/retry 設定など。Playwright テストを書く・レビュー・CI 設定するときに使用。
13ast-grep-practice
ast-grep をプロジェクト lint ツールとして運用するためのガイド。sgconfig.yml 設定、fix/rewrite ルール、constraints、transform、テスト、CI 統合、既存 linter との使い分けを扱う。汎用 linter で表現できないルールを ast-grep で書くときに使用。
13gh-fix-ci
Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions; use `gh` to inspect checks and logs, summarize failure context, draft a fix plan, and implement only after explicit approval. Treat external providers (for example Buildkite) as out of scope and report only the details URL.
10