playwright-cli

# Playwright CLI Skill

Playwright CLI を使ってブラウザ操作を自動実行するスキルです。

## Playwright CLI とは

Playwright CLI は @playwright/cli パッケージに含まれる CLI ツールで、MCP サーバー経由よりもトークン効率が良くブラウザ操作が可能です。要素の参照には snapshot で取得した ref を使用します。

## 前提条件

このスキルを使用するには、@playwright/cli がグローバルインストールされている必要があります。

```bash
npm install -g @playwright/cli@latest
```

インストール確認：
```bash
playwright-cli --help
```

## 主要コマンド

### Core（基本操作）

| コマンド | 説明 | 例 |
|----------|------|-----|
| `open <url>` | URLを開く | `playwright-cli open https://example.com` |
| `close` | ページを閉じる | `playwright-cli close` |
| `snapshot` | ページスナップショットを取得（要素ref取得用） | `playwright-cli snapshot` |
| `click <ref>` | 要素をクリック | `playwright-cli click e8` |
| `dblclick <ref>` | 要素をダブルクリック | `playwright-cli dblclick e8` |
| `fill <ref> <text>` | テキスト入力 | `playwright-cli fill e8 "Hello"` |
| `type <text>` | 編集可能な要素にテキスト入力 | `playwright-cli type "Hello"` |
| `hover <ref>` | 要素にホバー | `playwright-cli hover e8` |
| `select <ref> <val>` | ドロップダウンを選択 | `playwright-cli select e8 "option1"` |
| `check <ref>` | チェックボックスをチェック | `playwright-cli check e8` |
| `uncheck <ref>` | チェックボックスを解除 | `playwright-cli uncheck e8` |
| `upload <file>` | ファイルアップロード | `playwright-cli upload file.txt` |
| `drag <startRef> <endRef>` | ドラッグ＆ドロップ | `playwright-cli drag e8 e10` |
| `eval <func> [ref]` | JavaScriptを実行 | `playwright-cli eval "document.title"` |
| `resize <w> <h>` | ウィンドウサイズ変更 | `playwright-cli resize 1280 720` |

### Navigation（ナビゲーション）

| コマンド | 説明 |
|----------|------|
| `go-back` | 前のページに戻る |
| `go-forward` | 次のページに進む |
| `reload` | ページをリロード |

### Keyboard（キーボード）

| コマンド | 説明 | 例 |
|----------|------|-----|
| `press <key>` | キーを押す | `playwright-cli press Enter` |
| `keydown <key>` | キーを押し下げる | `playwright-cli keydown Shift` |
| `keyup <key>` | キーを離す | `playwright-cli keyup Shift` |

### Mouse（マウス）

| コマンド | 説明 | 例 |
|----------|------|-----|
| `mousemove <x> <y>` | マウス移動 | `playwright-cli mousemove 100 200` |
| `mousedown [button]` | マウスボタン押下 | `playwright-cli mou