Smithery is now a part of Arcade.dev! Read more in our announcement here
Playwright MCPを使用したブラウザ自動化。ページ操作、スクリーンショット、フォーム入力のパターン集
Playwright MCPサーバーを使用したブラウザ自動化パターン集。
mcp__playwright__browser_navigate - URLに移動mcp__playwright__browser_navigate_back - 戻るmcp__playwright__browser_snapshot - アクセシビリティスナップショット（操作に最適）mcp__playwright__browser_take_screenshot - 視覚的なスクリーンショットmcp__playwright__browser_console_messages - コンソールログmcp__playwright__browser_network_requests - ネットワークリクエストmcp__playwright__browser_click - クリックmcp__playwright__browser_type - テキスト入力mcp__playwright__browser_hover - ホバーmcp__playwright__browser_drag - ドラッグ&ドロップmcp__playwright__browser_select_option - ドロップダウン選択mcp__playwright__browser_press_key - キー押下mcp__playwright__browser_fill_form - 複数フィールド一括入力mcp__playwright__browser_file_upload - ファイルアップロードmcp__playwright__browser_handle_dialog - alert/confirm/prompt処理mcp__playwright__browser_tabs - タブの一覧/作成/閉じる/選択mcp__playwright__browser_evaluate - JavaScript実行mcp__playwright__browser_wait_for - 待機mcp__playwright__browser_close - ブラウザを閉じるmcp__playwright__browser_resize - ウィンドウサイズ変更1. browser_navigate でURLに移動
2. browser_snapshot でページ構造を取得
3. スナップショットから操作対象の ref を特定
4. browser_click / browser_type で操作
browser_snapshot の結果例：
- button "ログイン" [ref=btn-login]
- textbox "メールアドレス" [ref=email-input]
- textbox "パスワード" [ref=password-input]
- link "新規登録" [ref=register-link]
→ ref値を使って操作
browser_click:
element: "ログインボタン"
ref: "btn-login"
browser_type:
element: "メールアドレス入力欄"
ref: "email-input"
text: "user@example.com"
submit: false # Enterを押すか
browser_fill_form:
fields:
- name: "メールアドレス"
type: "textbox"
ref: "email-input"
value: "user@example.com"
- name: "パスワード"
type: "textbox"
ref: "password-input"
value: "password123"
1. browser_navigate: https://example.com/login
2. browser_snapshot: ページ構造を確認
3. browser_fill_form:
- email: "user@example.com"
- password: "****"
4. browser_click: ログインボタン
5. browser_wait_for: "ダッシュボード" (ログイン成功の確認)
6. browser_snapshot: ログイン後のページ確認
1. browser_navigate: https://example.com
2. browser_snapshot: 検索ボックスを特定
3. browser_type: 検索キーワード入力
4. browser_press_key: "Enter"
5. browser_wait_for: 検索結果の表示
6. browser_snapshot: 結果一覧を確認
7. browser_click: 目的の結果をクリック
1. browser_navigate: フォームページ
2. browser_snapshot: フォーム構造を確認
3. browser_fill_form: 全フィールド入力
4. browser_take_screenshot: 入力内容を確認
5. browser_click: 送信ボタン
6. browser_wait_for: 完了メッセージ
1. browser_click: ロードボタン
2. browser_wait_for:
text: "データを読み込みました"
# または
time: 3 # 3秒待機
3. browser_snapshot: 新しいコンテンツを確認
1. browser_tabs: action="list" # 現在のタブ確認
2. browser_tabs: action="new" # 新しいタブを開く
3. browser_navigate: 新しいURLへ
4. browser_tabs: action="select", index=0 # 元のタブに戻る
5. browser_tabs: action="close", index=1 # 2番目のタブを閉じる
browser_evaluate:
function: "() => document.title"
# → ページタイトルを取得
browser_evaluate:
function: "() => window.scrollTo(0, document.body.scrollHeight)"
# → ページ最下部へスクロール
browser_evaluate:
element: "データ表示エリア"
ref: "data-container"
function: "(element) => element.innerText"
# → 特定要素のテキストを取得
# Good: テキストの出現を待つ
browser_wait_for:
text: "読み込み完了"
# Good: テキストの消失を待つ
browser_wait_for:
textGone: "読み込み中..."
# OK: 時間で待つ（最終手段）
browser_wait_for:
time: 2
1. 操作前に必ずsnapshot
2. 要素が見つからない場合はスクロールしてみる
3. 動的コンテンツはwait_forで待機
4. エラー時はscreenshotで状態確認
1. ref (snapshotから取得)
2. role + name (アクセシビリティ属性)
3. text content
1. browser_snapshot で現在の状態を確認
2. スクロールが必要かもしれない
3. iframeの中かもしれない
4. 動的に生成されるなら wait_for
1. 要素が表示されているか確認（viewport内）
2. 他の要素に覆われていないか
3. disabled状態でないか
4. hover してから click
1. フォーカスが当たっているか
2. readonly/disabled でないか
3. JavaScript による入力制御がないか
4. slowly: true で1文字ずつ入力してみる
