Chrome DevTools MCP vs Playwright MCP

ARANK

はじめにClaude Codeでブラウザテストするとき、Chrome DevTools MCPとPlaywright MCPのどちらを使うべきか迷っていませんか？この記事では、同じBlazorアプリで両方を実際に使い、選び方の基準を示します。結論を先に：選び方の基準用途おすすめ理由デバッグ・要素特定Chrome DevTools MCPUIDで要素を確実に指定パフォーマンス分析Chrome DevTools MCPCore Web Vitals測定可能標準的なフォーム操作Playwright MCPAIが自動で要素を検出探索的テストPlaywright MCP操作手順がシンプルCI/CD自動テストどちらも不向き従来のPlaywright/Selenium推奨検証環境Blazor ServerとRadzen Componentsで作成したTest Formページを使用：URL: https://localhost:7286/test-formフィールド: Name、Email、Age、Country（ドロップダウン）動作: Submit後に成功メッセージ表示!この検証環境の詳細セットアップ手順は、別記事「Playwright MCPでBlazor UIをテストする」を参照してください。本記事では、両MCPの比較に焦点を当てます。実際の使用感：同じテストでの比較Blazorのフォーム（Name、Email、Age、Country）に入力してSubmitするテストで比較しました。Playwright MCP：AIにお任せ…