Fix: Playwright記事のマークダウン崩れ修正
All checks were successful
Deploy Docusaurus Site / deploy (push) Successful in 25s

This commit is contained in:
koide 2026-02-19 13:51:06 +00:00
parent b03b8da307
commit c3a8a3596c

View File

@ -47,35 +47,35 @@ displayed_sidebar: null
### Step 1: Playwright CLIをインストール ### Step 1: Playwright CLIをインストール
\`\`\`bash ```bash
npm install -g @playwright/cli@latest npm install -g @playwright/cli@latest
\`\`\` ```
確認: 確認:
\`\`\`bash ```bash
playwright-cli --help playwright-cli --help
\`\`\` ```
### Step 2: SKILLSをインストール ### Step 2: SKILLSをインストール
\`\`\`bash ```bash
playwright-cli install --skills playwright-cli install --skills
\`\`\` ```
これでClaude Codeが自動的にPlaywright CLIのスキルを認識します。 これでClaude Codeが自動的にPlaywright CLIのスキルを認識します。
### Step 3: 動作確認 ### Step 3: 動作確認
\`\`\`bash ```bash
claude-local # ローカルモデルで起動 claude-local # ローカルモデルで起動
\`\`\` ```
Claude Codeで Claude Codeで
\`\`\` ```text
> playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って > playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って
\`\`\` ```
## 公式SKILLSリファレンス ## 公式SKILLSリファレンス
@ -83,26 +83,19 @@ Playwright CLIには公式のSKILLSファイルがあります。以下は主要
### Quick Start ### Quick Start
\`\`\`bash ```bash
# ブラウザを開く playwright-cli open # ブラウザを開く
playwright-cli open playwright-cli goto https://playwright.dev # URLに移動
# URLに移動 playwright-cli click e15 # 要素refでクリック
playwright-cli goto https://playwright.dev playwright-cli type "page.click" # テキスト入力
# スナップショットの要素refe15等を使ってクリック playwright-cli press Enter # Enterキー
playwright-cli click e15 playwright-cli screenshot # スクリーンショット
# テキスト入力 playwright-cli close # ブラウザを閉じる
playwright-cli type "page.click" ```
# Enterキー
playwright-cli press Enter
# スクリーンショット
playwright-cli screenshot
# ブラウザを閉じる
playwright-cli close
\`\`\`
### Core Commands ### Core Commands
\`\`\`bash ```bash
playwright-cli open https://example.com # ページを開く playwright-cli open https://example.com # ページを開く
playwright-cli goto https://example.com # URLに移動 playwright-cli goto https://example.com # URLに移動
playwright-cli type "検索キーワード" # テキスト入力 playwright-cli type "検索キーワード" # テキスト入力
@ -114,38 +107,38 @@ playwright-cli uncheck e12 # チェックボックスOFF
playwright-cli upload ./document.pdf # ファイルアップロード playwright-cli upload ./document.pdf # ファイルアップロード
playwright-cli snapshot # ページ構造を取得 playwright-cli snapshot # ページ構造を取得
playwright-cli screenshot # スクリーンショット playwright-cli screenshot # スクリーンショット
\`\`\` ```
### Navigation ### Navigation
\`\`\`bash ```bash
playwright-cli go-back # 戻る playwright-cli go-back # 戻る
playwright-cli go-forward # 進む playwright-cli go-forward # 進む
playwright-cli reload # リロード playwright-cli reload # リロード
\`\`\` ```
### Keyboard ### Keyboard
\`\`\`bash ```bash
playwright-cli press Enter playwright-cli press Enter
playwright-cli press ArrowDown playwright-cli press ArrowDown
playwright-cli keydown Shift playwright-cli keydown Shift
playwright-cli keyup Shift playwright-cli keyup Shift
\`\`\` ```
### Tabs ### Tabs
\`\`\`bash ```bash
playwright-cli tab-list # タブ一覧 playwright-cli tab-list # タブ一覧
playwright-cli tab-new # 新しいタブ playwright-cli tab-new # 新しいタブ
playwright-cli tab-new https://example.com # URLを指定して新しいタブ playwright-cli tab-new https://example.com # URLを指定して新しいタブ
playwright-cli tab-select 0 # タブを選択 playwright-cli tab-select 0 # タブを選択
playwright-cli tab-close # タブを閉じる playwright-cli tab-close # タブを閉じる
\`\`\` ```
### StorageCookie/LocalStorage ### StorageCookie/LocalStorage
\`\`\`bash ```bash
# 状態の保存・読み込み # 状態の保存・読み込み
playwright-cli state-save auth.json playwright-cli state-save auth.json
playwright-cli state-load auth.json playwright-cli state-load auth.json
@ -160,46 +153,39 @@ playwright-cli cookie-clear
playwright-cli localstorage-list playwright-cli localstorage-list
playwright-cli localstorage-get theme playwright-cli localstorage-get theme
playwright-cli localstorage-set theme dark playwright-cli localstorage-set theme dark
\`\`\` ```
### Sessions ### Sessions
\`\`\`bash ```bash
# セッション一覧 playwright-cli list # セッション一覧
playwright-cli list playwright-cli -s=myproject open https://example.com # 特定セッションで操作
# 特定のセッションで操作 playwright-cli open --persistent # 永続セッションCookie保存
playwright-cli -s=myproject open https://example.com playwright-cli close-all # 全セッション終了
# 永続セッションCookie保存 playwright-cli kill-all # 強制終了
playwright-cli open --persistent ```
# 全セッション終了
playwright-cli close-all
# 強制終了
playwright-cli kill-all
\`\`\`
### DevTools ### DevTools
\`\`\`bash ```bash
playwright-cli console # コンソールログ playwright-cli console # コンソールログ
playwright-cli network # ネットワークリクエスト playwright-cli network # ネットワークリクエスト
playwright-cli tracing-start # トレース開始 playwright-cli tracing-start # トレース開始
playwright-cli tracing-stop # トレース終了 playwright-cli tracing-stop # トレース終了
playwright-cli video-start # 動画記録開始 playwright-cli video-start # 動画記録開始
playwright-cli video-stop video.webm # 動画記録終了 playwright-cli video-stop video.webm # 動画記録終了
\`\`\` ```
## Snapshots ## Snapshots
各コマンド実行後、Playwright CLIはページの**スナップショット**を返します: 各コマンド実行後、Playwright CLIはページの**スナップショット**を返します:
\`\`\` ```text
> playwright-cli goto https://example.com > playwright-cli goto https://example.com
### Page Page URL: https://example.com/
- Page URL: https://example.com/ Page Title: Example Domain
- Page Title: Example Domain Snapshot: .playwright-cli/page-2026-02-19T13-30-00.yml
### Snapshot ```
[Snapshot](.playwright-cli/page-2026-02-19T13-30-00.yml)
\`\`\`
スナップショットには要素の**refe1, e2, e15など** が含まれており、これを使ってクリックや入力を行います。 スナップショットには要素の**refe1, e2, e15など** が含まれており、これを使ってクリックや入力を行います。
@ -207,58 +193,57 @@ playwright-cli video-stop video.webm # 動画記録終了
### 例1: フォーム入力 ### 例1: フォーム入力
\`\`\`bash ```bash
playwright-cli open https://example.com/form playwright-cli open https://example.com/form
playwright-cli snapshot playwright-cli snapshot
playwright-cli fill e1 "user@example.com" playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password123" playwright-cli fill e2 "password123"
playwright-cli click e3 playwright-cli click e3
playwright-cli snapshot playwright-cli snapshot
playwright-cli close playwright-cli close
\`\`\` ```
### 例2: 複数タブ操作 ### 例2: 複数タブ操作
\`\`\`bash ```bash
playwright-cli open https://example.com playwright-cli open https://example.com
playwright-cli tab-new https://example.com/other playwright-cli tab-new https://example.com/other
playwright-cli tab-list playwright-cli tab-list
playwright-cli tab-select 0 playwright-cli tab-select 0
playwright-cli snapshot playwright-cli snapshot
playwright-cli close playwright-cli close
\`\`\` ```
### 例3: 認証状態の保存 ### 例3: 認証状態の保存
\`\`\`bash ```bash
# ログイン後に状態を保存 # ログイン後に状態を保存
playwright-cli state-save auth.json playwright-cli state-save auth.json
# 次回は状態を読み込んでスキップ # 次回は状態を読み込んでスキップ
playwright-cli open --persistent playwright-cli open --persistent
playwright-cli state-load auth.json playwright-cli state-load auth.json
\`\`\` ```
## トラブルシューティング ## トラブルシューティング
### ブラウザが起動しない ### ブラウザが起動しない
\`\`\`bash ```bash
npx playwright install chromium npx playwright install chromium
\`\`\` ```
### セッションが残っている ### セッションが残っている
\`\`\`bash ```bash
playwright-cli kill-all playwright-cli kill-all
\`\`\` ```
### 要素が見つからない ### 要素が見つからない
\`\`\`bash ```bash
playwright-cli snapshot playwright-cli snapshot
\`\`\` ```
スナップショットで要素のrefを確認。 スナップショットで要素のrefを確認。
@ -267,7 +252,7 @@ playwright-cli snapshot
**ポイント** **ポイント**
1. **CLI方式を使う** - MCPより安定している 1. **CLI方式を使う** - MCPより安定している
2. **公式SKILLSを使う** - \`playwright-cli install --skills\` 2. **公式SKILLSを使う** - `playwright-cli install --skills`
3. **snapshotでref確認** - 要素はe1, e2などのrefで指定 3. **snapshotでref確認** - 要素はe1, e2などのrefで指定
4. **セッションを活用** - ログイン状態を保持 4. **セッションを活用** - ログイン状態を保持