From 36deae89bb1307891d2ed70dd79272d99cbc4030 Mon Sep 17 00:00:00 2001 From: koide Date: Thu, 19 Feb 2026 13:36:22 +0000 Subject: [PATCH] =?UTF-8?q?Add:=20Claude=20Code=20+=20Playwright=20CLI?= =?UTF-8?q?=E3=81=A7=E3=83=96=E3=83=A9=E3=82=A6=E3=82=B6=E8=87=AA=E5=8B=95?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dgx-spark-claude-code-playwright/index.md | 246 ++++++++++++++++++ docs-tech/index.md | 3 +- 2 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 docs-tech/dgx-spark-claude-code-playwright/index.md diff --git a/docs-tech/dgx-spark-claude-code-playwright/index.md b/docs-tech/dgx-spark-claude-code-playwright/index.md new file mode 100644 index 0000000..ef5527a --- /dev/null +++ b/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 + +# ヘッドフルモード（ブラウザ表示） +playwright-cli open --headed + +# テキスト入力 +playwright-cli type "" + +# 要素をクリック +playwright-cli click "" + +# スクリーンショット +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月時点の情報です。* diff --git a/docs-tech/index.md b/docs-tech/index.md index 5b4b4b0..bbd79bd 100644 --- a/docs-tech/index.md +++ b/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モデルを動かす