🕹️

Playwright MCPでブラウザデバックやRPAの動作規定のためのYAMLファイルの出力をさせてみる

2025/05/11に公開

YAML

Playwright

RPA

Model Context Protocol

LLM

tech

Playwright MCPとは

Playwright MCPは、Playwrightを使用してブラウザ自動化機能を提供するMCP。Playwright MCPを使うことによってLLMがウェブページと自然言語ベースで対話できるようになる。

主なユースケース

ウェブナビゲーションとフォーム入力
構造化されたコンテンツからのデータ抽出
LLMによる自動テスト
エージェントのための汎用的なブラウザ操作

2つのモード

スナップショットモード（デフォルト）
- アクセシビリティスナップショットを使用
  - 構造化されたデータを使用。ページの要素とその関係性に関する情報を含む
  - 構造化データに基づいて要素の参照（ref）を実施 / ピクセルベースの入力ではない
  - スクリーンショットに基づくアプローチによく見られる曖昧さを回避可能
ビジョンモード
- スクリーンショットを使用
  - スクリーンショットに基づいてX Y座標を使用して要素とやり取りを行う
  - 視覚ベースのインタラクションに適している

ClaudeとPlaywright MCPの初期設定

Claudeアプリのダウンロード

以下サイトからデスクトップ版のClaudeアプリをダウンロード&インストール
https://claude.ai/download

MCPの初期セッティング

以下参考に初期セッティングを実施

コマンドメモ

brew install node
npm init -y
npm add @playwright/mcp playwright
npm install
npx playwright --version
npx playwright install chromium
npx playwright open

Claude上のMCP設定メモ

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

※ビジョンモードを使用するには、--visionサーバーの起動時にフラグを追加します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--vision"
      ]
    }
  }
}

実行テスト

（実行中Claudeアプリからいくつか許諾が求められます）

MCPデバックテストプロンプト

あなたは Playwright-MCP エージェントです。以下の手順どおりにブラウザを操作し、ログを収集したうえで日本語のデバッグレポートを作成してください。
1. https://sweetshop.netlify.app を開く  
2. 画面に最初に表示される商品カードの “Add to Basket” ボタンを、上から２つクリックしてカートに入れる  
3. 右上の “Basket” リンクをクリックしてカートページを開く  
4. browser_snapshot・console_logs・network_events を取得し、すべてをひとつの JSON ファイル debug_logs.json に保存する  
5. その debug_logs.json を Claude に渡して日本語で要約を生成し、要約には次を必ず含めること  
   • JavaScript エラー（メッセージ／行番号）  
   • 失敗したネットワークリクエスト（URL／ステータスコード）  
   • 見つからなかった DOM 要素やテキスト  
6. 最後に 「簡易デバッグレポート」 セクションを出力し、  
   – 想定される原因（１行）  
   – 推奨される修正方針（１行）  
以上を１回の実行で完了してください。

デバック元サイト

https://sweetshop.netlify.app/

出力サンプル

<!-- デバッグレポートの要約 -->
スイートショップデバッグレポート
テスト実行結果概要
テスト対象サイトの「Sweet Shop」において以下の手順を実行しました：

https://sweetshop.netlify.app にアクセス
上から2つの商品（Chocolate CupsとBon Bons）を「Add to Basket」ボタンでカートに追加
右上の「Basket」リンクをクリック
カートページに移動できなかったため、直接URLでbasket.htmlにアクセス
カートページの状態を検証

検出された問題点
JavaScriptエラー
特定のJavaScriptエラーは検出されませんでしたが、コンソールには以下のログが記録されています：

Getting basket details - これは情報ログですが、期待される後続のログがありません。

失敗したネットワークリクエスト
ネットワークリクエストで失敗したものはありませんでした。すべてのリソースは正常にロード（200、204ステータスコード）されています。
見つからなかった要素やテキスト

カートに追加した商品が表示されていません。カートのカウントが「0」と表示されています。
合計金額が「£0.00」となっており、追加した商品が反映されていません。

その他の重要な問題

「Basket」リンクのクリックがカートページ（basket.html）への移動に失敗しました
直接URLでbasket.htmlにアクセスしても、追加した商品データが表示されません
カートのアイコン横のカウンターが「0」と表示されており、商品が追加されていないように見えます

簡易デバッグレポート
想定される原因
ローカルストレージまたはセッションストレージのデータ保存・読み込み機能に問題があり、カートの状態が正しく保持されていない。
推奨される修正方針
custom.jsのカート関連機能を見直し、特にaddToBasket()関数とgetBasketDetails()関数の実装を確認し、データ永続化処理を修正する。再試行Claudeは間違えることがあります。回答内容を必ずご確認ください。 3.7 Sonnetコピー公開{

以下エラーがちゃんと反映されている
- カートへの商品追加エラー
- カート遷移時のエラー

Playwright-MCP デモ実行サンプル

5秒待機操作

あなたは Playwright-MCP エージェントです。

1. https://uitestingplayground.com/progressbar を開く  
2. “Start” ボタンをクリック  
3. browser_wait_for time: 5 で 5 秒待機後、“Stop” ボタンをクリック  
4. 進捗バーを含む画面を browser_screenshot で progress_view.png として保存  
5. browser_snapshot・console_logs・network_events を progress_logs.json にまとめて保存  

- ログは日本語で出力してください  
- 指示どおりに操作できなかった場合は、どこで止まったかをログに抽出してから終了してください

Playwright-MCPで操作した内容をRPA用にYAMLファイルに起こす

# 依頼概要
あなたは **Playwright-MCP** でブラウザ操作を実行し、その結果を実行可能な **YAML シナリオ** に変換する役割を担います。  
返信は **YAML ブロックのみ** とし、中間ログや説明文は含めません。

# 今回の操作概要
Googleのトップページから日別に更新されるGoogleのロゴ画像を取得しスクリーンショットとして保存してください。

# 対象サイト
https://www.google.co.jp/

# 出力形式となるYAMLスキーマのサンプル
steps:  
  - type: open        # url  
  - type: type        # selector, value  
  - type: press       # selector, key  
  - type: click       # selector  
  - type: wait        # selector  
  - type: screenshot  # selector, output  
  - type: extract     # selector, attr(textContent), output  
outputs:  
  - *.png

# 注意事項
- ログは日本語で出力してください
- 要素の中でも季節要因などで変動しやすい要素を狙うのは避けて変更がなさそうな要素を選んでください

アウトプット例

steps:
  - type: open
    url: https://www.google.co.jp/
    log: Googleのトップページを開く
  - type: wait
    selector: "img[alt*='年母の日']"
    log: Google ロゴの読み込みを待機
  - type: screenshot
    selector: "img[alt*='年母の日']"
    output: "google_logo_${DATE}.png"
    log: 日別に更新されるGoogleロゴをスクリーンショット保存
outputs:
  - google_logo_${DATE}.png

シーズナリティイベントの要素とってきてしまっているのでプロンプトの改善余地あり

Cursor連携

プロジェクト立ち上げ〜MCP連携

npm init -y
npm add @playwright/mcp playwright
npx playwright install chromium

Cursor上の設定

{
  "mcpServers": {
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

動作サンプル

プロンプト

あなたは Playwright-MCP エージェントです。以下を 1 回で実行してください。

1. https://www.bbc.com/news を開く  
2. Top Stories セクションの見出しを上から 5 件取得し  
   - textContent（見出し）  
   - href（完全 URL）  
   を headlines 配列に格納  
3. browser_snapshot・console_logs・network_events と headlines をまとめて  
   BBC_headlines_${DATE}.json に保存  
4. 収集途中に発生した JavaScript エラーや 4xx/5xx リクエストは errors フィールドに記録 
5. 終了時は JSON のパスだけを出力

出力ファイル

{
  "headlines": [
    {
      "textContent": "Zelensky says Russia considering end to war a 'positive sign' after Putin's call for talks",
      "href": "https://www.bbc.com/news/live/cdxkl8wwgljt"
    },
    {
      "textContent": "The US and China are finally talking. Why now?",
      "href": "https://www.bbc.com/news/articles/c74qjjvzlgjo"
    },
    {
      "textContent": "Trump praises 'friendly, constructive' US-China trade talks",
      "href": "https://www.bbc.com/news/articles/cn053edex5eo"
    },
    {
      "textContent": "Alcatraz's last living inmate on Trump's plan to reopen prison",
      "href": "https://www.bbc.com/news/articles/c5yep08r9vjo"
    },
    {
      "textContent": "India-Pakistan ceasefire appears to hold after accusations of violations",
      "href": "https://www.bbc.com/news/articles/cvg9d913v20o"
    }
  ],
  "browser_snapshot": "取得済み（省略）",
  "console_logs": [
    "[LOG] Messaging without detection successfully executed.",
    "[LOG] interaction complete",
    "[LOG] setAdunits has been called, will set window.ozAdUnits now",
    "[LOG] window.ozAdUnits has been created."
  ],
  "network_events": [
    "全て200系または204系の正常レスポンスのみ。4xx/5xxなし。"
  ],
  "errors": []
}

メモ

テキスト分量が多いサイト読み込むとトークン量オーバーになる
- コンテキストデータの取捨選択が必要
  - 差分ストリーミング / スナップショットでトークン使用量を圧縮したい
MCPの初期設定時点でスナップショットとビジョンモードの呼び出し設定してるけど、同一セッション内でプロンプト側から動的に切り替え指示できない？(こちらの呼び出し方が悪いかもしれません)
認証系があったときの実装ベストプラクティス（署名付きトークンだけ受け渡す？など）
Chromium以外のブラウザ対応、スマートフォン実機連携操作