Fix: Playwright記事のマークダウン崩れ修正
All checks were successful
Deploy Docusaurus Site / deploy (push) Successful in 25s
All checks were successful
Deploy Docusaurus Site / deploy (push) Successful in 25s
This commit is contained in:
parent
b03b8da307
commit
c3a8a3596c
@ -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" # テキスト入力
|
||||||
# スナップショットの要素ref(e15等)を使ってクリック
|
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 # タブを閉じる
|
||||||
\`\`\`
|
```
|
||||||
|
|
||||||
### Storage(Cookie/LocalStorage)
|
### Storage(Cookie/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)
|
|
||||||
\`\`\`
|
|
||||||
|
|
||||||
スナップショットには要素の**ref(e1, e2, e15など)** が含まれており、これを使ってクリックや入力を行います。
|
スナップショットには要素の**ref(e1, 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. **セッションを活用** - ログイン状態を保持
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user