本文へ移動
cccskills
無料GitHub で公開

playwright-cli

Browser automation via Playwright CLI for navigating pages, interacting with elements, capturing screenshots, and testing web applications through shell commands. Use when user mentions "playwright", "browser automation", "take a screenshot", "browser testing", "headless browser", "web testing", "fill out a form", "e2e test", or needs to automate browser workflows from the command line. This is a pre-installed CLI tool — do NOT install anything via npx or npm. Invoke this skill first, then use playwright-cli bash commands.

インストール方法を見る

含まれるファイル(10)

  • SKILL.md6.1 KB
  • EXAMPLES.md5.5 KB
  • references/request-mocking.md2.1 KB
  • references/running-code.md5.6 KB
  • references/session-management.md4.3 KB
  • references/storage-state.md5.3 KB
  • references/test-generation.md2.4 KB
  • references/tracing.md3.7 KB
  • references/video-recording.md1.0 KB
  • TROUBLESHOOTING.md4.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Playwright CLI

Automate browsers through shell commands via the Bash tool.

Core Workflow

Every interaction follows this pattern:

  1. Open a page: playwright-cli open <url>
  2. Snapshot to discover elements: playwright-cli snapshot
  3. Interact using refs from the snapshot: playwright-cli click <ref>
  4. Verify the result: playwright-cli screenshot or playwright-cli snapshot

Always run snapshot before interacting — element refs come exclusively from snapshot output and become stale after navigation.

Command Reference

Navigation

CommandDescription
open <url>Open URL in new page
goto <url>Navigate current page
go-back / go-forwardBrowser back/forward
reloadReload current page
closeClose the browser

Interaction

CommandDescription
click <ref>Click an element
dblclick <ref>Double-click an element
fill <ref> <text>Clear field, then type text
type <text>Type into focused element (appends)
check <ref> / uncheck <ref>Toggle checkbox
select <ref> <values>Select dropdown option(s)
hover <ref>Hover over element
drag <start> <end>Drag between elements
upload <ref> <paths>Upload file(s) to file input
eval "<js>"Evaluate JavaScript on page
eval "<js>" <ref>Evaluate JavaScript on element
dialog-accept [text]Accept dialog (optional prompt text)
dialog-dismissDismiss dialog
resize <w> <h>Resize browser window

Output

CommandDescription
screenshot [ref] [--filename=f]Capture PNG screenshot (page or element)
snapshot [--filename=f]Accessibility tree — structured, token-efficient
pdf [--filename=f]Generate PDF of the page

Important: --filename resolves relative to the working directory, NOT outputDir. When using --filename, always prepend the project's outputDir value (check .playwright/cli.config.json; defaults to .playwright-cli). Example: playwright-cli screenshot --filename=<outputDir>/my-screenshot.png

Tabs

CommandDescription
tab listList open tabs
tab create [url]Open new tab
tab select <index>Switch to tab
tab close [index]Close tab

Keyboard

playwright-cli press Enter          # Enter, Tab, Escape, ArrowDown, etc.
playwright-cli keydown Shift         # Hold key down
playwright-cli keyup Shift           # Release key

Mouse

playwright-cli mousemove 150 300     # Move to coordinates
playwright-cli mousedown [button]    # Press button (left/right)
playwright-cli mouseup [button]      # Release button
playwright-cli mousewheel 0 100      # Scroll (deltaX deltaY)

Sessions

  • Default session — all commands share one session automatically
  • Named sessions — playwright-cli -s=<name> open <url> for parallel browsers
  • List sessions — playwright-cli list
  • Close one — playwright-cli -s=<name> close
  • Close all — playwright-cli close-all
  • Force kill — playwright-cli kill-all
  • Persistent profile — playwright-cli open <url> --persistent
  • Custom profile — playwright-cli open <url> --profile=/path/to/dir
  • Delete data — playwright-cli delete-data or playwright-cli -s=<name> delete-data
  • Environment variable — PLAYWRIGHT_CLI_SESSION=my-project

Configuration

playwright-cli open <url> --browser=chromium    # chromium (default), firefox, webkit, chrome, msedge
playwright-cli open <url> --headed              # Visible browser window
playwright-cli open <url> --config=config.json  # Custom config file
playwright-cli open <url> --extension           # Connect via browser extension

Create .playwright/cli.config.json in the project for persistent settings:

{ "browser": { "browserName": "chromium", "launchOptions": { "headless": true } }, "outputDir": ".playwright-cli", "timeouts": { "action": 5000, "navigation": 60000 } }

Other options: network.allowedOrigins, network.blockedOrigins, saveVideo. Environment variables use PLAYWRIGHT_MCP_ prefix (e.g., PLAYWRIGHT_MCP_BROWSER=firefox).

Common Pitfalls

  • Interacting without snapshot — refs are unknown until snapshot runs
  • Stale refs after navigation — re-run snapshot after goto, link clicks, or form submissions
  • fill vs type — fill clears the field first; type appends to current content
  • Stuck sessions — run playwright-cli kill-all to force-close all browsers

Resources

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

adr

無料

Create, review, and manage Architecture Decision Records (ADRs) with auto-numbering, template detection, quality review, and index maintenance. Use when user mentions "ADR", "architecture decision", "document this decision", "create ADR", "review ADR", editing ADR files (docs/adr/, doc/adr/, .adr/), or discussing architectural choices and tradeoffs.

日本語の概要は準備中です。原文の説明を表示しています。

joaquimscosta/arkhe-claude-plugins212026年8月14日 更新

architect

無料

Analyze system architecture, module structure, API contracts, data models, and code patterns. Use when designing systems, reviewing module boundaries, evaluating API designs, analyzing data models, checking pattern conformance, tracing decisions, or reviewing frontend architecture. Triggers: "architecture", "module design", "API design", "data model", "boundaries", "patterns", "decisions", "frontend architecture".

日本語の概要は準備中です。原文の説明を表示しています。

joaquimscosta/arkhe-claude-plugins212026年8月14日 更新

Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts. Use when creating, refining, or validating design directives for Google Stitch. Use when user says "create a Stitch prompt", "optimize this for Stitch", "convert this spec to a Stitch prompt", "write a UI prompt", or mentions Google Stitch prompt authoring. Follows Stitch best practices with short, directive prompts focused on screens, structure, and visual hierarchy.

日本語の概要は準備中です。原文の説明を表示しています。

joaquimscosta/arkhe-claude-plugins212026年8月14日 更新

Zero-dependency live-preview server providing an agent↔browser bidirectional companion. Watches a content directory, wraps HTML fragments in a frame template, broadcasts live-reload over WebSocket, and captures browser-side click events to a JSONL file. Use when an agent needs to show HTML to the user in a browser and react to clicks — mockups, design exploration, gallery browsing, multi-select choices, prototype iteration. Triggered by "live preview", "browser companion", "preview server", "browser mockup", "show in browser", "arkhe-preview", or any skill that wants to write HTML fragments and have the user see them reload in real time.

日本語の概要は準備中です。原文の説明を表示しています。

joaquimscosta/arkhe-claude-plugins212026年8月14日 更新

Deletes merged git branches (local and remote) and flags stale unmerged branches for manual review. Use when user mentions "cleanup branches", "delete merged branches", "prune old branches", "remove stale branches", "branch cleanup", or runs /cleanup-branches command.

日本語の概要は準備中です。原文の説明を表示しています。

joaquimscosta/arkhe-claude-plugins212026年8月14日 更新

Interactive Claude Code environment setup wizard. Detects existing configuration, guides through best-practice setup for Global CLAUDE.md, project scaffolding, MCP servers, hooks, custom agents, keybindings, and settings. Use when user runs /devtools:code-env-setup, mentions "setup claude code", "configure claude", "claude code setup", "environment setup", or "initialize claude code".

日本語の概要は準備中です。原文の説明を表示しています。

joaquimscosta/arkhe-claude-plugins212026年8月14日 更新

joaquimscosta のスキルをすべて見る

このスキルの問題を報告する