対象の読者

• Cursor などの AI コーディングツールを活用した開発を行っているエンジニア
• ブラウザ自動化・E2E テストに興味があるエンジニア
• AI エージェントとブラウザの連携に興味がある方

はじめに

レコチョクのシステム開発第1グループに所属している山根と申します。 普段は OpenAI・Anthropic (Claude)・Google (Gemini) のモデル等に対応したチャット基盤を運営・開発しております。 弊社では、AIツールの積極利用および検証に努めております。

概要

Cursor などの AI コーディングツールでは、ブラウザと連携した開発が可能になっています。 UI の確認、E2E テストの自動化、パフォーマンス分析など、従来は手動で行っていた作業を AI に任せられるため、かなり作業の効率化が図れます。

ただ、現時点でも便利なツールは複数存在し、私自身どう使い分けるべきなのか整理できておりませんでした。 本記事では、Cursor で利用可能な、以下3つのブラウザツールを比較し、それぞれの特徴と使い分けを紹介します。

1. playwright-mcp でE2Eテスト・クロスブラウザの検証を行う

概要

playwright-mcp は、Microsoft が公式に提供する MCP サーバーです。 Playwright をベースとしており、アクセシビリティツリー（Accessibility Snapshot） を活用した自動化が特徴です¹。

従来のブラウザ自動化ツールにおける課題

従来のブラウザ自動化ツールは、スクリーンショットを撮影して画像認識で要素を特定する方式が主流でした。 しかし、この方式には以下の課題があります。

• 処理が重い: 画像の撮影・転送・解析に時間がかかる
• 曖昧さ: 画像認識の精度に依存し、要素の特定が不安定
• トークン消費: 画像データの転送でコストが増大

playwright-mcp は、これらの課題をアクセシビリティツリーで解決します。

アーキテクチャ

LLM → MCP Server → Playwright → Browser
         ↓
   Accessibility Tree (構造化データ)

公式 README より引用¹

> – Fast and lightweight. Uses Playwright’s accessibility tree, not pixel-based input. > – LLM-friendly. No vision models needed, operates purely on structured data. > – Deterministic tool application. Avoids ambiguity common with screenshot-based approaches.

導入方法

Cursor の MCP 設定ファイル（~/.cursor/mcp.json）に以下を追加します。

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

主要オプション

--browser で指定可能なブラウザ

使用例

E2E テストの例

playwright-mcp を使って、https://example.com のログインフローをテストしてください。
1. トップページを開く
2. ログインボタンをクリック
3. テスト用の認証情報を入力
4. ログイン後のダッシュボードが表示されることを確認

クロスブラウザの検証の例

以下プロンプトは --browser を変更するたびに実行することで、各ブラウザでの表示を確認できます。

playwright-mcp を使って、localhost:3000 を開いて表示を確認してください。

クロスブラウザの検証を実施する場合

mcp.json の --browser 引数を変更する必要があります。 うまく起動しない場合は、Cursor の再起動を試みてください。

検証手順

1. mcp.json の –browser を “firefox” に変更
2. Firefox で表示確認
3. mcp.json の –browser を “webkit” に変更
4. WebKit (Safari) で表示確認

注意 例えば --browser の引数を変えた複数の playwright-mcp を登録しても、Cursor は正しくブラウザを区別できないようです。 これは、各 MCP サーバーが同じツール名（browser_navigate、browser_click など）を持つため、Cursor がどの MCP を呼び出すべきか判断できないためだと思われます。そのため、複数の MCP を登録してクロスブラウザの検証を実施する場合は、対象のブラウザ MCP 1つのみを機能 ON にして検証し、完了後に別の MCP に切り替える必要があります。

検証例

MDN の input type=”date” ドキュメントにも記載されている通り、日付入力の UI はブラウザごとに異なります。 実際に playwright-mcp を使って3つのブラウザで検証したスクショを紹介します。

Firefox

Microsoft Edge

WebKit (Safari)

検証結果

2. chrome-devtools-mcp でデバッグ・パフォーマンス分析を行う

概要

chrome-devtools-mcp は、Google の Chrome DevTools チームが公式に提供する MCP サーバーです。 Chrome DevTools Protocol を活用し、パフォーマンストレースやネットワーク分析など、DevTools の機能を使えます²。

従来のパフォーマンス分析における課題

Web アプリケーションのパフォーマンス問題を調査する際、従来は以下の手順が必要でした。

1. DevTools の Performance タブを開く
2. 記録を開始してページをリロード
3. 結果を分析して問題箇所を特定
4. 改善策を検討

chrome-devtools-mcp を使えば、これらの作業を AI に一言で依頼できます。

アーキテクチャ

LLM → MCP Server → Puppeteer → Chrome DevTools Protocol → Browser
         ↓
   DevTools 機能（パフォーマンス、ネットワーク、コンソール等）

公式 README より引用²

> – Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights. > – Advanced browser debugging: Analyze network requests, take screenshots and check the browser console. > – Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.

導入方法

Cursor の MCP 設定ファイル（~/.cursor/mcp.json）に以下を追加します。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

主要オプション

使用例

パフォーマンス分析の例

chrome-devtools-mcp を使って、このページのパフォーマンスを測定して、
遅い原因を教えてください

実行結果の例

パフォーマンス分析結果

■ Core Web Vitals
- LCP (Largest Contentful Paint): 2.8s - 改善が必要
- FID (First Input Delay): 45ms - 良好
- CLS (Cumulative Layout Shift): 0.12 - 改善が必要

■ ボトルネック
1. 画像の最適化が不十分（hero-image.jpg: 2.3MB）
2. レンダリングブロッキングリソース（styles.css）
3. 未使用の JavaScript コード（bundle.js の 40% が未使用）

■ 推奨される改善策
1. 画像を WebP 形式に変換し、サイズを 300KB 以下に圧縮
2. Critical CSS をインライン化
3. コード分割を実施して初期ロードを軽量化

実際の Cursor での MCP 呼び出し結果

3. Cursor Browser で手軽にブラウザ連携する

概要

Cursor Browser は、Cursor IDE に標準搭載されているブラウザ機能です。セットアップ不要で、IDE 内からブラウザを操作できます。

手軽さを求める場合に最適

MCP サーバーの設定が面倒な場合や、簡単な UI 確認を行いたい場合に最適です。 コードエディタとブラウザが同一環境で連携するため、開発中のフィードバックループが高速になります。

アーキテクチャ

Cursor IDE
├── Code Editor
├── AI Agent ←→ Built-in Browser (DevTools統合)
└── Terminal

導入方法

設定不要です。Cursor 2.0 以降で標準搭載されています。

使用方法

以下のいずれかの方法でブラウザ機能を呼び出し：

• プロンプト内で @Browser を指定
• 入力欄下部のアイコンバーから地球マーク（🌐）をクリック

使用例

サンプルアプリ（React + Vite）を使った操作例

プロンプト例: UI の確認

Cursor Browser を使って、localhost:5173 を開いて、
Todoリストタブで新しいタスクを追加してください

Cursor Browser の表示事例

Cursor Browser でサンプルアプリ（React + Vite）を開いた画面。 DevTools の Network タブも同時に表示でき、ネットワークリクエストの監視も可能。

以下は Cursor がコードを変更し、その結果を Cursor Browser でリアルタイムに確認している様子。左側に AI の思考過程とコード変更の提案、右側にブラウザでの表示結果が並んで表示されます。

ブラウザコンテキスト

4. ツール比較

機能比較表

凡例: ◯ 対応・得意 / △ 一部対応・基本機能のみ / × 非対応

ユースケース別推奨

5. 活用例

3つのツールを併用することで、より効率的に開発できると思います。

Cursor Browser → UI の確認・簡単なデバッグ・即座のフィードバック

playwright-mcp → E2E テスト作成・マルチブラウザ検証・スクレイピング

chrome-devtools-mcp → パフォーマンス分析・Lighthouse 監査・デバッグ

開発フローの例

1. Cursor Browser で UI をサクッと確認 「localhost:5173 を開いて、Todoリストの動作を確認して」

2. 問題があれば chrome-devtools-mcp でパフォーマンス分析 「このページのパフォーマンスを測定して」

3. 修正後、playwright-mcp でクロスブラウザの検証 「Firefox と Safari でもフォーム入力の動作を確認して」

4. 最後に playwright-mcp で E2E テストを生成 「Todoの追加・完了・削除フローの E2E テストを生成して」

おわりに

AI ツールによってブラウザ操作の自動化が身近になった一方で、適切なツールの選択が重要になっています。

• 手軽さを求めるなら Cursor Browser
• テスト自動化なら playwright-mcp
• パフォーマンス分析なら chrome-devtools-mcp

状況に応じてツールを使い分けることで、開発効率とコード品質の両立が可能になります。

本記事が、皆さんの開発ライフの一助になれば幸いです。

参考リンク

• playwright-mcp 公式リポジトリ
• chrome-devtools-mcp 公式リポジトリ
• Cursor Browser ドキュメント