Playwright Recorder

🚀 playwright-mcpの使い方

🔍 紹介

CursorやClaudeを使ってPlaywrightのテストを書こうとしたことはありますか？その結果は大失敗です。

なぜでしょうか？AIアシスタントはあなたのウェブページについて何も知らないからです。目を覆われた人に絵を説明するようなものです。結果は以下のようになります。

• テストの不安定性 → AIがセレクタを推測し、しばしば間違えます。
• スクリプトの破損 → テストを書くよりも修正に時間を費やすことになります。
• デバッグの悪夢 → AIは何が起こっているかを「見る」ことができないため、あなたがすべての面倒な作業を行わなければなりません。

もしAIがあなたのウェブページを本当に理解できるようになったら、どんなに素敵でしょうか？

🎉 playwright-mcpの登場！

playwright-mcp は、あなたのAIアシスタントに超能力を与え、完全に可視化します。インストールすると、playwright-mcpはPlaywrightで制御されるブラウザを起動し、AIアシスタントに完全なアクセスを提供します。これにより、以下のことが可能になります。

1. インタラクションの記録 → クリック、入力、スクロールなどの操作をplaywright-mcpがテストコードに変換します。
2. 完全なDOMの取得 → ブラウザから直接HTMLとCSSの情報を取得し、セレクタの正確性を保証します。
3. スクリーンショットの取得 → ページのスクリーンショットを取得し、UIの変更を検証します。
4. コードの実行 → ブラウザでカスタムJavaScriptコードを実行し、動的な機能をテストします。
5. ブラウザの初期化 → 新しいブラウザコンテキストを起動し、新しいテストセッションを開始します。
6. セレクタの検証 → ページの変更によってセレクタが無効にならないことを確認します。

📦 インストール

ターミナルで以下のコマンドを実行します。

npm install -g playwright-mcp

💻 Cursorとの連携

1. playwright-mcp をインストールする（簡単な部分）

   npm install -g playwright-mcp
   

2. 設定ファイルを更新する
   • %USERPROFILE%/.cursorrc ファイルを開きます。
   • 以下の内容を追加します。

     {
       "mcpServers": {
         "playwright": {
           "command": "npx",
           "args": ["-y", "playwright-mcp"]
         }
       }
     }
     

3. Cursorを再起動する（すべてがうまくいくはずです）
4. 正常に動作していることを確認する
   • Cursorで以下のコマンドを入力します。

     list available mcp tools
     

   • 正しくインストールされていれば、以下のツールリストが表示されます。
     1. get-context
     2. get-full-dom
     3. get-screenshot
     4. execute-code
     5. init-browser
     6. validate-selectors

これで、Cursorがブラウザに接続され、高度にコンテキスト依存のテストを書くことができます！詳細はCursorチュートリアルを参照してください。

💻 Claude Desktopとの連携

1. playwright-mcp をインストールする（簡単な部分）

   npm install -g playwright-mcp
   

2. 設定ファイルを更新する
   • 設定ファイルを見つけます。
     • Windows: %APPDATA%\Claude\claude_desktop_config.json
     • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • 以下の内容に更新します。

     {
       "mcpServers": {
         "playwright": {
           "command": "npx",
           "args": ["-y", "playwright-mcp"]
         }
       }
     }
     

3. Claude Desktopを再起動する（新しい世界が開かれます）
4. 正常に動作していることを確認する
   • Claudeで以下のコマンドを入力します。

     list available mcp tools
     

   • 正しくインストールされていれば、以下のツールリストが表示されます。
     1. get-context
     2. get-full-dom
     3. get-screenshot
     4. execute-code
     5. init-browser
     6. validate-selectors

これで、Claudeがウェブページにアクセスでき、高度に関連性のあるテストを書くことができます！詳細はClaude Desktopチュートリアルを参照してください。

📖 ドキュメントを見る