---
sidebar_position: 5
title: ローカルClaude Code + Playwright CLIでブラウザ自動化エージェントを作る
description: Claude Code + Playwright CLIで安定したブラウザ自動化環境を構築する方法
hide_table_of_contents: false
displayed_sidebar: null
---

# ローカルClaude Code + Playwright CLIで「自分だけのブラウザ自動化エージェント」を作る

## はじめに

[前回の記事](/tech/dgx-spark-claude-code-local)で、Claude Codeをローカルで動かす方法を紹介しました。

今回はその続き。**Playwright CLI**を組み合わせて、ブラウザを自動操作できるエージェントを作ります。

### 何ができるようになる？

- ✅ 「このサイトの情報を集めて」→ 自動でスクレイピング
- ✅ 「ログインしてデータをダウンロード」→ 認証も自動
- ✅ 「このフォームに入力して送信」→ ブラウザ操作を自動化
- ✅ 「E2Eテストを書いて実行」→ テストコード生成＆実行

しかも**完全ローカル**。データはどこにも送られません。

## なぜMCPではなくCLI？

ブラウザ自動化には2つの方式があります：

| 方式 | 特徴 | 成功率 |
|------|------|--------|
| Playwright MCP | リアルタイム状態管理 | △ 不安定なことがある |
| **Playwright CLI + SKILLS** | トークン効率が良い | **◎ 安定して動く** |

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

## 前提条件

- [Claude Codeのローカル環境](/tech/dgx-spark-claude-code-local)が動作済み
- 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 のスクリーンショットを撮って
```

## 基本コマンド

### ブラウザ操作

```bash
# ページを開く
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は**セッション**でブラウザの状態を管理します。

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

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

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

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

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

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

### モニタリング

```bash
playwright-cli show
```

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

## SKILLSファイルの作成

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

```markdown title="SKILLS.md"
# 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: 認証が必要なサイト

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

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

## トラブルシューティング

### ブラウザが起動しない

```bash
npx playwright install chromium
```

### セッションが残っている

```bash
playwright-cli kill-all
```

### 要素が見つからない

```bash
playwright-cli snapshot
```

## まとめ

**ポイント**：

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

## 参考リンク

- [Playwright CLI（Microsoft）](https://github.com/microsoft/playwright-cli)
- [Playwright公式](https://playwright.dev/)
- [前回の記事: Claude Codeローカル化](/tech/dgx-spark-claude-code-local)

---

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