From c3a8a3596c3f6fa1de6c09403f4183d50b1fae7d Mon Sep 17 00:00:00 2001 From: koide Date: Thu, 19 Feb 2026 13:51:06 +0000 Subject: [PATCH] =?UTF-8?q?Fix:=20Playwright=E8=A8=98=E4=BA=8B=E3=81=AE?= =?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=AF=E3=83=80=E3=82=A6=E3=83=B3=E5=B4=A9?= =?UTF-8?q?=E3=82=8C=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dgx-spark-claude-code-playwright/index.md | 127 ++++++++---------- 1 file changed, 56 insertions(+), 71 deletions(-) diff --git a/docs-tech/dgx-spark-claude-code-playwright/index.md b/docs-tech/dgx-spark-claude-code-playwright/index.md index 02cedd5..7715de1 100644 --- a/docs-tech/dgx-spark-claude-code-playwright/index.md +++ b/docs-tech/dgx-spark-claude-code-playwright/index.md @@ -47,35 +47,35 @@ 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で： -\`\`\` +```text > playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って -\`\`\` +``` ## 公式SKILLSリファレンス @@ -83,26 +83,19 @@ Playwright CLIには公式のSKILLSファイルがあります。以下は主要 ### Quick Start -\`\`\`bash -# ブラウザを開く -playwright-cli open -# URLに移動 -playwright-cli goto https://playwright.dev -# スナップショットの要素ref（e15等）を使ってクリック -playwright-cli click e15 -# テキスト入力 -playwright-cli type "page.click" -# Enterキー -playwright-cli press Enter -# スクリーンショット -playwright-cli screenshot -# ブラウザを閉じる -playwright-cli close -\`\`\` +```bash +playwright-cli open # ブラウザを開く +playwright-cli goto https://playwright.dev # URLに移動 +playwright-cli click e15 # 要素refでクリック +playwright-cli type "page.click" # テキスト入力 +playwright-cli press Enter # Enterキー +playwright-cli screenshot # スクリーンショット +playwright-cli close # ブラウザを閉じる +``` ### Core Commands -\`\`\`bash +```bash playwright-cli open https://example.com # ページを開く playwright-cli goto https://example.com # URLに移動 playwright-cli type "検索キーワード" # テキスト入力 @@ -114,38 +107,38 @@ playwright-cli uncheck e12 # チェックボックスOFF playwright-cli upload ./document.pdf # ファイルアップロード playwright-cli snapshot # ページ構造を取得 playwright-cli screenshot # スクリーンショット -\`\`\` +``` ### Navigation -\`\`\`bash +```bash playwright-cli go-back # 戻る playwright-cli go-forward # 進む playwright-cli reload # リロード -\`\`\` +``` ### Keyboard -\`\`\`bash +```bash playwright-cli press Enter playwright-cli press ArrowDown playwright-cli keydown Shift playwright-cli keyup Shift -\`\`\` +``` ### Tabs -\`\`\`bash +```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 +```bash # 状態の保存・読み込み playwright-cli state-save auth.json playwright-cli state-load auth.json @@ -160,46 +153,39 @@ playwright-cli cookie-clear 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 --persistent -# 全セッション終了 -playwright-cli close-all -# 強制終了 -playwright-cli kill-all -\`\`\` +```bash +playwright-cli list # セッション一覧 +playwright-cli -s=myproject open https://example.com # 特定セッションで操作 +playwright-cli open --persistent # 永続セッション（Cookie保存） +playwright-cli close-all # 全セッション終了 +playwright-cli kill-all # 強制終了 +``` ### DevTools -\`\`\`bash +```bash 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はページの**スナップショット**を返します： -\`\`\` +```text > 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) -\`\`\` +Page URL: https://example.com/ +Page Title: Example Domain +Snapshot: .playwright-cli/page-2026-02-19T13-30-00.yml +``` スナップショットには要素の**ref（e1, e2, e15など）** が含まれており、これを使ってクリックや入力を行います。 @@ -207,58 +193,57 @@ playwright-cli video-stop video.webm # 動画記録終了 ### 例1: フォーム入力 -\`\`\`bash +```bash playwright-cli open https://example.com/form playwright-cli snapshot - playwright-cli fill e1 "user@example.com" playwright-cli fill e2 "password123" playwright-cli click e3 playwright-cli snapshot playwright-cli close -\`\`\` +``` ### 例2: 複数タブ操作 -\`\`\`bash +```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 -\`\`\` +``` ### 例3: 認証状態の保存 -\`\`\`bash +```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を確認。 @@ -267,7 +252,7 @@ playwright-cli snapshot **ポイント**： 1. **CLI方式を使う** - MCPより安定している -2. **公式SKILLSを使う** - \`playwright-cli install --skills\` +2. **公式SKILLSを使う** - `playwright-cli install --skills` 3. **snapshotでref確認** - 要素はe1, e2などのrefで指定 4. **セッションを活用** - ログイン状態を保持