note-articles/docs-tech/dgx-spark-claude-code-playwright/index.md

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方式をおすすめする理由

1. トークン効率が良い - 巨大なツールスキーマやアクセシビリティツリーをコンテキストに読み込まない
2. 安定している - シンプルなコマンド実行なので失敗しにくい
3. デバッグしやすい - 同じコマンドを手動でも実行できる :::

前提条件

• Claude Codeのローカル環境が動作済み
• Node.js 18以上

セットアップ

Step 1: Playwright CLIをインストール

npm install -g @playwright/cli@latest

確認：

playwright-cli --help

Step 2: SKILLSをインストール

playwright-cli install --skills

これでClaude Codeが自動的にPlaywright CLIのスキルを認識します。

Step 3: 動作確認

claude-local  # ローカルモデルで起動

Claude Codeで：

> playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って

基本コマンド

ブラウザ操作

# ページを開く
playwright-cli open https://example.com

# ヘッドフル（ブラウザ表示）で開く
playwright-cli open https://example.com --headed

# テキスト入力
playwright-cli type "検索キーワード"

# クリック
playwright-cli click "ボタンのテキスト"

# Enterキー
playwright-cli press Enter

# チェックボックス
playwright-cli check "同意する"

# スクリーンショット
playwright-cli screenshot

セッション管理

Playwright CLIはセッションでブラウザの状態を管理します。

# セッション一覧
playwright-cli list

# 特定のセッションで操作
playwright-cli -s=myproject open https://example.com

# セッションを永続化（Cookie保存）
playwright-cli open https://example.com --persistent

# 全セッション終了
playwright-cli close-all

プロジェクトごとにセッション分離

# 環境変数でセッション指定
PLAYWRIGHT_CLI_SESSION=my-app claude-local

モニタリング

playwright-cli show

ダッシュボードで全セッションをリアルタイム確認。

SKILLSファイルの作成

プロジェクト専用のスキルを定義すると、Claude Codeがより賢く動きます。

# Browser Automation Skills

## Playwright CLI

このプロジェクトではPlaywright CLIを使ってブラウザ操作を行います。

### 基本操作

\`\`\`bash
# ページを開く
playwright-cli open <url>

# ヘッドフルモード（ブラウザ表示）
playwright-cli open <url> --headed

# テキスト入力
playwright-cli type "<text>"

# 要素をクリック
playwright-cli click "<selector or text>"

# スクリーンショット
playwright-cli screenshot

# ページのスナップショット（構造取得）
playwright-cli snapshot
\`\`\`

### セッション管理

\`\`\`bash
# セッション一覧
playwright-cli list

# 全セッション終了
playwright-cli close-all
\`\`\`

実践例

例1: Webサイトのスクレイピング

> https://news.ycombinator.com のトップ10記事のタイトルとURLを取得して

例2: フォーム入力の自動化

> お問い合わせフォームに以下の内容を入力して送信して
> 名前: テスト太郎
> メール: test@example.com

例3: 認証が必要なサイト

# 永続セッションで開く
playwright-cli open https://private-site.com --headed --persistent

手動でログイン後、Claude Codeに続きを任せる。

トラブルシューティング

ブラウザが起動しない

npx playwright install chromium

セッションが残っている

playwright-cli kill-all

要素が見つからない

playwright-cli snapshot

まとめ

ポイント：

1. CLI方式を使う - MCPより安定している
2. SKILLSファイルを作る - プロジェクト専用のスキルを定義
3. セッションを活用 - ログイン状態を保持
4. --headed で確認 - 困ったらブラウザを表示

参考リンク

• Playwright CLI（Microsoft）
• Playwright公式
• 前回の記事: Claude Codeローカル化

---

この記事は2026年2月時点の情報です。