This commit is contained in:
@@ -47,197 +47,234 @@ displayed_sidebar: null
|
||||
|
||||
### Step 1: Playwright CLIをインストール
|
||||
|
||||
```bash
|
||||
\`\`\`bash
|
||||
npm install -g @playwright/cli@latest
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
確認：
|
||||
|
||||
```bash
|
||||
\`\`\`bash
|
||||
playwright-cli --help
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
### Step 2: SKILLSをインストール
|
||||
|
||||
```bash
|
||||
\`\`\`bash
|
||||
playwright-cli install --skills
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
これでClaude Codeが自動的にPlaywright CLIのスキルを認識します。
|
||||
|
||||
### Step 3: 動作確認
|
||||
|
||||
```bash
|
||||
\`\`\`bash
|
||||
claude-local # ローカルモデルで起動
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
Claude Codeで：
|
||||
|
||||
```
|
||||
\`\`\`
|
||||
> playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
## 基本コマンド
|
||||
## 公式SKILLSリファレンス
|
||||
|
||||
### ブラウザ操作
|
||||
Playwright CLIには公式のSKILLSファイルがあります。以下は主要なコマンド：
|
||||
|
||||
```bash
|
||||
# ページを開く
|
||||
playwright-cli open https://example.com
|
||||
|
||||
# ヘッドフル（ブラウザ表示）で開く
|
||||
playwright-cli open https://example.com --headed
|
||||
### Quick Start
|
||||
|
||||
\`\`\`bash
|
||||
# ブラウザを開く
|
||||
playwright-cli open
|
||||
# URLに移動
|
||||
playwright-cli goto https://playwright.dev
|
||||
# スナップショットの要素ref（e15等）を使ってクリック
|
||||
playwright-cli click e15
|
||||
# テキスト入力
|
||||
playwright-cli type "検索キーワード"
|
||||
|
||||
# クリック
|
||||
playwright-cli click "ボタンのテキスト"
|
||||
|
||||
playwright-cli type "page.click"
|
||||
# Enterキー
|
||||
playwright-cli press Enter
|
||||
|
||||
# チェックボックス
|
||||
playwright-cli check "同意する"
|
||||
|
||||
# スクリーンショット
|
||||
playwright-cli screenshot
|
||||
```
|
||||
# ブラウザを閉じる
|
||||
playwright-cli close
|
||||
\`\`\`
|
||||
|
||||
### セッション管理
|
||||
### Core Commands
|
||||
|
||||
Playwright CLIは**セッション**でブラウザの状態を管理します。
|
||||
\`\`\`bash
|
||||
playwright-cli open https://example.com # ページを開く
|
||||
playwright-cli goto https://example.com # URLに移動
|
||||
playwright-cli type "検索キーワード" # テキスト入力
|
||||
playwright-cli click e3 # 要素をクリック（refで指定）
|
||||
playwright-cli fill e5 "user@example.com" # 入力欄に値を設定
|
||||
playwright-cli select e9 "option-value" # セレクトボックス選択
|
||||
playwright-cli check e12 # チェックボックスON
|
||||
playwright-cli uncheck e12 # チェックボックスOFF
|
||||
playwright-cli upload ./document.pdf # ファイルアップロード
|
||||
playwright-cli snapshot # ページ構造を取得
|
||||
playwright-cli screenshot # スクリーンショット
|
||||
\`\`\`
|
||||
|
||||
```bash
|
||||
### Navigation
|
||||
|
||||
\`\`\`bash
|
||||
playwright-cli go-back # 戻る
|
||||
playwright-cli go-forward # 進む
|
||||
playwright-cli reload # リロード
|
||||
\`\`\`
|
||||
|
||||
### Keyboard
|
||||
|
||||
\`\`\`bash
|
||||
playwright-cli press Enter
|
||||
playwright-cli press ArrowDown
|
||||
playwright-cli keydown Shift
|
||||
playwright-cli keyup Shift
|
||||
\`\`\`
|
||||
|
||||
### Tabs
|
||||
|
||||
\`\`\`bash
|
||||
playwright-cli tab-list # タブ一覧
|
||||
playwright-cli tab-new # 新しいタブ
|
||||
playwright-cli tab-new https://example.com # URLを指定して新しいタブ
|
||||
playwright-cli tab-select 0 # タブを選択
|
||||
playwright-cli tab-close # タブを閉じる
|
||||
\`\`\`
|
||||
|
||||
### Storage（Cookie/LocalStorage）
|
||||
|
||||
\`\`\`bash
|
||||
# 状態の保存・読み込み
|
||||
playwright-cli state-save auth.json
|
||||
playwright-cli state-load auth.json
|
||||
|
||||
# Cookie操作
|
||||
playwright-cli cookie-list
|
||||
playwright-cli cookie-get session_id
|
||||
playwright-cli cookie-set session_id abc123
|
||||
playwright-cli cookie-clear
|
||||
|
||||
# LocalStorage操作
|
||||
playwright-cli localstorage-list
|
||||
playwright-cli localstorage-get theme
|
||||
playwright-cli localstorage-set theme dark
|
||||
\`\`\`
|
||||
|
||||
### Sessions
|
||||
|
||||
\`\`\`bash
|
||||
# セッション一覧
|
||||
playwright-cli list
|
||||
|
||||
# 特定のセッションで操作
|
||||
playwright-cli -s=myproject open https://example.com
|
||||
|
||||
# セッションを永続化（Cookie保存）
|
||||
playwright-cli open https://example.com --persistent
|
||||
|
||||
# 永続セッション（Cookie保存）
|
||||
playwright-cli open --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
|
||||
# 強制終了
|
||||
playwright-cli kill-all
|
||||
\`\`\`
|
||||
|
||||
### セッション管理
|
||||
### DevTools
|
||||
|
||||
\`\`\`bash
|
||||
# セッション一覧
|
||||
playwright-cli list
|
||||
|
||||
# 全セッション終了
|
||||
playwright-cli close-all
|
||||
playwright-cli console # コンソールログ
|
||||
playwright-cli network # ネットワークリクエスト
|
||||
playwright-cli tracing-start # トレース開始
|
||||
playwright-cli tracing-stop # トレース終了
|
||||
playwright-cli video-start # 動画記録開始
|
||||
playwright-cli video-stop video.webm # 動画記録終了
|
||||
\`\`\`
|
||||
```
|
||||
|
||||
## Snapshots
|
||||
|
||||
各コマンド実行後、Playwright CLIはページの**スナップショット**を返します：
|
||||
|
||||
\`\`\`
|
||||
> playwright-cli goto https://example.com
|
||||
### Page
|
||||
- Page URL: https://example.com/
|
||||
- Page Title: Example Domain
|
||||
### Snapshot
|
||||
[Snapshot](.playwright-cli/page-2026-02-19T13-30-00.yml)
|
||||
\`\`\`
|
||||
|
||||
スナップショットには要素の**ref（e1, e2, e15など）** が含まれており、これを使ってクリックや入力を行います。
|
||||
|
||||
## 実践例
|
||||
|
||||
### 例1: Webサイトのスクレイピング
|
||||
### 例1: フォーム入力
|
||||
|
||||
```
|
||||
> https://news.ycombinator.com のトップ10記事のタイトルとURLを取得して
|
||||
```
|
||||
\`\`\`bash
|
||||
playwright-cli open https://example.com/form
|
||||
playwright-cli snapshot
|
||||
|
||||
### 例2: フォーム入力の自動化
|
||||
playwright-cli fill e1 "user@example.com"
|
||||
playwright-cli fill e2 "password123"
|
||||
playwright-cli click e3
|
||||
playwright-cli snapshot
|
||||
playwright-cli close
|
||||
\`\`\`
|
||||
|
||||
```
|
||||
> お問い合わせフォームに以下の内容を入力して送信して
|
||||
> 名前: テスト太郎
|
||||
> メール: [email protected]
|
||||
```
|
||||
### 例2: 複数タブ操作
|
||||
|
||||
### 例3: 認証が必要なサイト
|
||||
\`\`\`bash
|
||||
playwright-cli open https://example.com
|
||||
playwright-cli tab-new https://example.com/other
|
||||
playwright-cli tab-list
|
||||
playwright-cli tab-select 0
|
||||
playwright-cli snapshot
|
||||
playwright-cli close
|
||||
\`\`\`
|
||||
|
||||
```bash
|
||||
# 永続セッションで開く
|
||||
playwright-cli open https://private-site.com --headed --persistent
|
||||
```
|
||||
### 例3: 認証状態の保存
|
||||
|
||||
手動でログイン後、Claude Codeに続きを任せる。
|
||||
\`\`\`bash
|
||||
# ログイン後に状態を保存
|
||||
playwright-cli state-save auth.json
|
||||
|
||||
# 次回は状態を読み込んでスキップ
|
||||
playwright-cli open --persistent
|
||||
playwright-cli state-load auth.json
|
||||
\`\`\`
|
||||
|
||||
## トラブルシューティング
|
||||
|
||||
### ブラウザが起動しない
|
||||
|
||||
```bash
|
||||
\`\`\`bash
|
||||
npx playwright install chromium
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
### セッションが残っている
|
||||
|
||||
```bash
|
||||
\`\`\`bash
|
||||
playwright-cli kill-all
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
### 要素が見つからない
|
||||
|
||||
```bash
|
||||
\`\`\`bash
|
||||
playwright-cli snapshot
|
||||
```
|
||||
\`\`\`
|
||||
|
||||
スナップショットで要素のrefを確認。
|
||||
|
||||
## まとめ
|
||||
|
||||
**ポイント**：
|
||||
|
||||
1. **CLI方式を使う** - MCPより安定している
|
||||
2. **SKILLSファイルを作る** - プロジェクト専用のスキルを定義
|
||||
3. **セッションを活用** - ログイン状態を保持
|
||||
4. **--headed で確認** - 困ったらブラウザを表示
|
||||
2. **公式SKILLSを使う** - \`playwright-cli install --skills\`
|
||||
3. **snapshotでref確認** - 要素はe1, e2などのrefで指定
|
||||
4. **セッションを活用** - ログイン状態を保持
|
||||
|
||||
## 参考リンク
|
||||
|
||||
- [Playwright CLI（Microsoft）](https://github.com/microsoft/playwright-cli)
|
||||
- [公式SKILLS](https://raw.githubusercontent.com/microsoft/playwright-cli/main/skills/playwright-cli/SKILL.md)
|
||||
- [Playwright公式](https://playwright.dev/)
|
||||
- [前回の記事: Claude Codeローカル化](/tech/dgx-spark-claude-code-local)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user