7.8 KiB
sidebar_position, title, description, hide_table_of_contents, displayed_sidebar
| sidebar_position | title | description | hide_table_of_contents | displayed_sidebar |
|---|---|---|---|---|
| 5 | ローカルClaude Code + Playwright CLIでブラウザ自動化エージェントを作る | Claude Code + Playwright CLIで安定したブラウザ自動化環境を構築する方法 | false | null |
ローカルClaude Code + Playwright CLIで「自分だけのブラウザ自動化エージェント」を作る
はじめに
前回の記事で、Claude Codeをローカルで動かす方法を紹介しました。
今回はその続き。Playwright CLIを組み合わせて、ブラウザを自動操作できるエージェントを作ります。
何ができるようになる？
- ✅ 「このサイトの情報を集めて」→ 自動でスクレイピング
- ✅ 「ログインしてデータをダウンロード」→ 認証も自動
- ✅ 「このフォームに入力して送信」→ ブラウザ操作を自動化
- ✅ 「E2Eテストを書いて実行」→ テストコード生成＆実行
しかも完全ローカル。データはどこにも送られません。
なぜMCPではなくCLI？
ブラウザ自動化には2つの方式があります：
| 方式 | 特徴 | 成功率 |
|---|---|---|
| Playwright MCP | リアルタイム状態管理 | △ 不安定なことがある |
| Playwright CLI + SKILLS | トークン効率が良い | ◎ 安定して動く |
:::tip CLI方式をおすすめする理由
- トークン効率が良い - 巨大なツールスキーマやアクセシビリティツリーをコンテキストに読み込まない
- 安定している - シンプルなコマンド実行なので失敗しにくい
- デバッグしやすい - 同じコマンドを手動でも実行できる :::
前提条件
- Claude Codeのローカル環境が動作済み
- Node.js 18以上
セットアップ
Step 1: Playwright CLIをインストール
```bash npm install -g @playwright/cli@latest ```
確認：
```bash playwright-cli --help ```
Step 2: SKILLSをインストール
```bash playwright-cli install --skills ```
これでClaude Codeが自動的にPlaywright CLIのスキルを認識します。
Step 3: 動作確認
```bash claude-local # ローカルモデルで起動 ```
Claude Codeで：
```
playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って ```
公式SKILLSリファレンス
Playwright CLIには公式のSKILLSファイルがあります。以下は主要なコマンド：
Quick Start
```bash
ブラウザを開く
playwright-cli open
URLに移動
playwright-cli goto https://playwright.dev
スナップショットの要素ref（e15等）を使ってクリック
playwright-cli click e15
テキスト入力
playwright-cli type "page.click"
Enterキー
playwright-cli press Enter
スクリーンショット
playwright-cli screenshot
ブラウザを閉じる
playwright-cli close ```
Core Commands
```bash playwright-cli open https://example.com # ページを開く playwright-cli goto https://example.com # URLに移動 playwright-cli type "検索キーワード" # テキスト入力 playwright-cli click e3 # 要素をクリック（refで指定） playwright-cli fill e5 "user@example.com" # 入力欄に値を設定 playwright-cli select e9 "option-value" # セレクトボックス選択 playwright-cli check e12 # チェックボックスON playwright-cli uncheck e12 # チェックボックスOFF playwright-cli upload ./document.pdf # ファイルアップロード playwright-cli snapshot # ページ構造を取得 playwright-cli screenshot # スクリーンショット ```
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 ```
Tabs
```bash playwright-cli tab-list # タブ一覧 playwright-cli tab-new # 新しいタブ playwright-cli tab-new https://example.com # URLを指定して新しいタブ playwright-cli tab-select 0 # タブを選択 playwright-cli tab-close # タブを閉じる ```
Storage（Cookie/LocalStorage）
```bash
状態の保存・読み込み
playwright-cli state-save auth.json playwright-cli state-load auth.json
Cookie操作
playwright-cli cookie-list playwright-cli cookie-get session_id playwright-cli cookie-set session_id abc123 playwright-cli cookie-clear
LocalStorage操作
playwright-cli localstorage-list playwright-cli localstorage-get theme playwright-cli localstorage-set theme dark ```
Sessions
```bash
セッション一覧
playwright-cli list
特定のセッションで操作
playwright-cli -s=myproject open https://example.com
永続セッション（Cookie保存）
playwright-cli open --persistent
全セッション終了
playwright-cli close-all
強制終了
playwright-cli kill-all ```
DevTools
```bash playwright-cli console # コンソールログ playwright-cli network # ネットワークリクエスト playwright-cli tracing-start # トレース開始 playwright-cli tracing-stop # トレース終了 playwright-cli video-start # 動画記録開始 playwright-cli video-stop video.webm # 動画記録終了 ```
Snapshots
各コマンド実行後、Playwright CLIはページのスナップショットを返します：
```
playwright-cli goto https://example.com
Page
- Page URL: https://example.com/
- Page Title: Example Domain
Snapshot
Snapshot ```
スナップショットには要素のref（e1, e2, e15など） が含まれており、これを使ってクリックや入力を行います。
実践例
例1: フォーム入力
```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 playwright-cli close ```
例2: 複数タブ操作
```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 playwright-cli close ```
例3: 認証状態の保存
```bash
ログイン後に状態を保存
playwright-cli state-save auth.json
次回は状態を読み込んでスキップ
playwright-cli open --persistent playwright-cli state-load auth.json ```
トラブルシューティング
ブラウザが起動しない
```bash npx playwright install chromium ```
セッションが残っている
```bash playwright-cli kill-all ```
要素が見つからない
```bash playwright-cli snapshot ```
スナップショットで要素のrefを確認。
まとめ
ポイント：
- CLI方式を使う - MCPより安定している
- 公式SKILLSを使う - `playwright-cli install --skills`
- snapshotでref確認 - 要素はe1, e2などのrefで指定
- セッションを活用 - ログイン状態を保持
参考リンク
この記事は2026年2月時点の情報です。