본문으로 건너뛰기
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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

연동 도구Playwright
설치 방법 보기

포함된 파일(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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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년 10월 16일 업데이트

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년 10월 16일 업데이트

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년 10월 16일 업데이트

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년 10월 16일 업데이트

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년 10월 16일 업데이트

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년 10월 16일 업데이트

joaquimscosta의 스킬 모두 보기

이 스킬의 문제 신고