koide
36deae89bb
All checks were successful
Deploy Docusaurus Site / deploy (push) Successful in 29s
247 lines
5.9 KiB
Markdown
247 lines
5.9 KiB
Markdown
---
|
||
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月時点の情報です。*
|