Add: Claude Code + Playwright CLIでブラウザ自動化

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

@@ -0,0 +1,246 @@
+---
+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月時点の情報です。*

docs-tech/index.md

@@ -10,7 +10,8 @@ slug: /
 
 ## DGX Spark
 
-- [Claude Codeをローカルモデルで動かす](/tech/dgx-spark-claude-code-local) - vLLM + Qwen3で完全ローカル環境
+- [Claude Code + Playwright CLIでブラウザ自動化](/tech/dgx-spark-claude-code-playwright) - 安定したブラウザ自動化エージェント
+- [Claude Code + Qwen3-Coder-Nextをローカル実行](/tech/dgx-spark-claude-code-local) - 完全ローカルでClaude Code
 - [Qwen3-Coder-Next（80B MoE）を動かす](/tech/dgx-spark-qwen3-coder-next) - FP8量子化で単体起動
 - [デュアル構成ガイド](/tech/dgx-spark-dual) - 2台接続で256GB環境を構築
 - [MiniMax-M2.5-REAP-172Bを動かす](/tech/dgx-spark-minimax) - 172Bモデルを動かす