Skip to main content

playwright-cli

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

インストールへ移動

ソース情報

リポジトリ
arisng/github-copilot-fc
ソースの最終更新活動
2026年2月27日 02:53
検出された SKILL.md の言語
英語
スター
5
フォーク
0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー
8 ファイル

SKILL.md を表示中

SKILL.md
ソースの指示 · 読み取り専用プレビュー
name
playwright-cli
description
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
allowed-tools
Bash(playwright-cli:*)
metadata
{"version":"1.1.0"}
# Browser Automation with playwright-cli ## Why playwright-cli? Modern coding agents increasingly favor CLI–based workflows exposed as SKILLs over MCP because CLI invocations are more token-efficient: they avoid loading large tool schemas and verbose accessibility trees into the model context, allowing agents to act through concise, purpose-built commands. This makes CLI + SKILLs better suited for high-throughput coding agents that must balance browser automation with large codebases, tests, and reasoning within limited context windows. This CLI is a skill for AI coding agents. ## Quick start ```bash playwright-cli open https://playwright.dev playwright-cli click e15 playwright-cli type "page.click" playwright-cli press Enter ``` ## Core workflow 1. Navigate: `playwright-cli open https://example.com` 2. Interact using refs from the snapshot 3. Re-snapshot after significant changes ## Commands ### Core ```bash playwright-cli open https://example.com/ playwright-cli close playwright-cli type "search query" playwright-cli click e3 playwright-cli dblclick e7 playwright-cli fill e5 "user@example.com" playwright-cli drag e2 e8 playwright-cli hover e4 playwright-cli select e9 "option-value" playwright-cli upload ./document.pdf playwright-cli check e12 playwright-cli uncheck e12 playwright-cli snapshot playwright-cli eval "document.title" playwright-cli eval "el => el.textContent" e5 playwright-cli dialog-accept playwright-cli dialog-accept "confirmation text" playwright-cli dialog-dismiss playwright-cli resize 1920 1080 ``` ### Navigation ```bash playwright-cli go-back playwright-cli go-forward playwright-cli reload ``` ### Keyboard ```bash playwright-cli press Enter playwright-cli press ArrowDown playwright-cli keydown Shift playwright-cli keyup Shift ``` ### Mouse ```bash playwright-cli mousemove 150 300 playwright-cli mousedown playwright-cli mousedown right playwright-cli mouseup playwright-cli mouseup right playwright-cli mousewheel 0 100 ``` ### Save as ```bash playwright-cli screenshot playwright-cli screenshot e5 playwright-cli pdf ``` ### Tabs ```bash playwright-cli tab-list playwright-cli tab-new playwright-cli tab-new https://example.com/page playwright-cli tab-close playwright-cli tab-close 2 playwright-cli tab-select 0 ``` ## Troubleshooting ### Command not found (Windows) If you get an error saying `playwright-cli` is not recognized, your global npm directory (typically `%AppData%\npm`) is likely missing from your `PATH`. #### Permanent Fix (Command Line): Run this in PowerShell, then **restart your terminal**: ```powershell $npmPath = (npm config get prefix); if ($env:Path -notlike "*$npmPath*") { [Environment]::SetEnvironmentVariable("Path", [Environment]::GetEnvironmentVariable("Path", "User") + ";$npmPath", "User"); Write-Host "Added $npmPath to User PATH. Restart terminal to apply." -ForegroundColor Green } ``` #### Verification: ```powershell playwright-cli --version ``` ### Where to get the path? The playwright-cli is usually installed globally via npm (e.g., npm install -g playwright-cli). After installation, you can find the absolute path to the binary using the following commands: WSL / Linux: Use which playwright-cli Windows: Use where.exe playwright-cli ### DevTools ```bash playwright-cli console playwright-cli console warning playwright-cli network playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])" playwright-cli tracing-start playwright-cli tracing-stop playwright-cli video-start playwright-cli video-stop video.webm ``` ### Configuration ```bash # Configure the session playwright-cli config --config my-config.json playwright-cli config --headed --isolated --browser=firefox # Configure named session playwright-cli --session=mysession config my-config.json # Start with configured session playwright-cli open --config=my-config.json ``` ### Sessions ```bash playwright-cli --session=mysession open example.com playwright-cli --session=mysession click e6 playwright-cli session-list playwright-cli session-stop mysession playwright-cli session-stop-all playwright-cli session-delete playwright-cli session-delete mysession ``` ## Example: Form submission ```bash playwright-cli open https://example.com/form playwright-cli snapshot playwright-cli fill e1 "user@example.com" playwright-cli fill e2 "password123" playwright-cli click e3 playwright-cli snapshot ``` ## Example: Multi-tab workflow ```bash playwright-cli open https://example.com playwright-cli tab-new https://example.com/other playwright-cli tab-list playwright-cli tab-select 0 playwright-cli snapshot ``` ## Example: Debugging with DevTools ```bash playwright-cli open https://example.com playwright-cli click e4 playwright-cli fill e7 "test" playwright-cli console playwright-cli network ``` ```bash playwright-cli open https://example.com playwright-cli tracing-start playwright-cli click e4 playwright-cli fill e7 "test" playwright-cli tracing-stop ``` ## Specific tasks * **Request mocking** [references/request-mocking.md](references/request-mocking.md) * **Running Playwright code** [references/running-code.md](references/running-code.md) * **Session management** [references/session-management.md](references/session-management.md) * **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md) * **Test generation** [references/test-generation.md](references/test-generation.md) * **Tracing** [references/tracing.md](references/tracing.md) * **Video recording** [references/video-recording.md](references/video-recording.md)
GitHubで見る