playwright-mcp の使い方
導入
playwright-mcp(Model Context Protocol)は、AIアシスタントとブラウザ自動化のギャップを埋める強力なツールです。AIモデルがウェブブラウザと対話し、DOM要素を検査し、ユーザーインタラクションを記録し、より高精度なPlaywrightテストスクリプトを生成することを可能にします。このガイドでは、playwright-mcpの効果的な設定と使用方法について説明します。
ツール
ブラウザ インターフェースで利用可能なツール:
ブラウザツールボックス
DOMを選択 (🎯): クリックすると、ページからHTML要素を選択してキャプチャします。テストケースのセレクターを記録する際に使用します。
画像を選択 (📸): 特定の要素のスクリーンショットをキャプチャします。ビジュアルテストやドキュメント作成に便利です。
インタラクションの記録 (📋): クリック、入力、ナビゲーションといったブラウザインタラクションを記録します。これらのインタラクションは自動的にセレクターを生成し、Claude や Cursor などの MCP クライアントにコンテキストとして渡すことで、テストケースの作成に役立ちます。
MCPコマンド
init-browser
: Playwright ブラウザを初期化します。get-context
: テストケースの作成に使用するウェブサイトのコンテキストを取得します。execute-code
: 現在のページに対してカスタム Playwright JS コードを実行します。get-screenshot
: 現在のページのスクリーンショットを取得するget-full-dom
: 現在のページの完全なDOMを取得します。(代わりにget-context
使用をお勧めします)
もっと詳しく知る
さらに詳しく知りたいですか? 完全なドキュメントをご覧ください。
local-only server
The server can only run on the client's local machine because it depends on local resources.
Playwright MCPサーバーは、Webページとのインタラクションや要素の検査を可能にすることで、AI駆動型のPlaywrightテスト生成を可能にします。CursorなどのIDEと統合されており、リアルタイムのコンテキストを提供することで、テストの精度と効率性を向上させます。
Related Resources
Related MCP Servers
- AsecurityAlicenseAqualityA MCP server that provides browser automation tools, allowing users to navigate websites, take screenshots, click elements, fill forms, and execute JavaScript through Playwright.Last updated -81Apache 2.0
- AsecurityFlicenseAqualityPlaywright wrapper for MCP that enables LLM-powered clients to control a browser for automation tasks.Last updated -101
- AsecurityAlicenseAqualityA browser automation server providing Playwright capabilities for controlling web browsers, capturing screenshots, extracting content, and performing complex interactions through an MCP interface.Last updated -6Apache 2.0
- -securityFlicense-qualityA service that provides Playwright browser automation functionality through Model Context Protocol (MCP), allowing clients to use Playwright features via SSE connections.Last updated -6