playwright-mcp の使い方

導入

playwright-mcp（Model Context Protocol）は、AIアシスタントとブラウザ自動化のギャップを埋める強力なツールです。AIモデルがウェブブラウザと対話し、DOM要素を検査し、ユーザーインタラクションを記録し、より高精度なPlaywrightテストスクリプトを生成することを可能にします。このガイドでは、playwright-mcpの効果的な設定と使用方法について説明します。

Related MCP server: Playwright MCP

ツール

ブラウザ インターフェースで利用可能なツール:

ブラウザツールボックス

1. DOMを選択 (🎯): クリックすると、ページからHTML要素を選択してキャプチャします。テストケースのセレクターを記録する際に使用します。

2. 画像を選択 (📸): 特定の要素のスクリーンショットをキャプチャします。ビジュアルテストやドキュメント作成に便利です。

3. インタラクションの記録 (📋): クリック、入力、ナビゲーションといったブラウザインタラクションを記録します。これらのインタラクションは自動的にセレクターを生成し、Claude や Cursor などの MCP クライアントにコンテキストとして渡すことで、テストケースの作成に役立ちます。

MCPコマンド

1. init-browser : Playwright ブラウザを初期化します。

2. get-context : テストケースの作成に使用するウェブサイトのコンテキストを取得します。

3. execute-code : 現在のページに対してカスタム Playwright JS コードを実行します。

4. get-screenshot : 現在のページのスクリーンショットを取得する

5. get-full-dom : 現在のページの完全なDOMを取得します。(代わりにget-context使用をお勧めします)

もっと詳しく知る

さらに詳しく知りたいですか？ 完全なドキュメントをご覧ください。

📖