「Cursorでブラウザ操作ができるって聞いたけど、どれを使えばいいの？」
実は、Cursorでブラウザを操作する方法は2つあります。
- Cursor Browser Extension（MCP経由）
- Playwright MCP
この2つ、名前は似ていますが、全く違うツールです。
私は40代現役Webエンジニアとして、両方を実際に使い比べた結果、用途によって使い分けるのがベストという結論に至りました。
この記事では、どちらを選ぶべきかを本音で解説します。
この記事でわかること
- 結論：どちらを選ぶべきか
- Cursor Browser Extensionの特徴と機能
- Playwright MCPの特徴と機能
- 機能比較表
- 用途別の判断基準
結論：どちらを選ぶべきか
先に結論を言うと、ほとんどの場合「Cursor Browser Extension」で十分です。
Cursor Browser Extensionが適している場合
- ブログ記事の表示確認
- 簡単なスクリーンショット取得
- ページの構造確認
- IDE内で手軽に確認したい
Playwright MCPが必要な場合
- 複雑な自動テストシナリオ
- CI/CDパイプラインへの統合
- ネットワークリクエストの制御
- クロスブラウザテスト
Cursor Browser Extensionとは
基本情報
| 項目 | 内容 |
|---|---|
| 正式名称 | Cursor Browser Extension（MCP経由） |
| セットアップ | 不要（Cursorに標準搭載） |
| リソース | 軽量（ブラウザ拡張機能ベース） |
| 統合性 | Cursor IDEに完全統合 |
特徴
Cursor IDEに統合されたブラウザ拡張機能で、MCP（Model Context Protocol）経由でアクセスできます。
**最大の特徴は「セットアップ不要」**です。Cursorをインストールしていれば、すぐに使えます。
メリット
- セットアップ不要：追加のインストールや設定が不要
- 統合性：Cursor IDE内で直接利用可能
- 軽量：ブラウザ拡張機能ベースで軽量
- スナップショット：ページ構造を構造化データとして取得可能
- スクリーンショット：簡単に画像取得可能
デメリット
- 機能制限：Playwrightと比べて機能が限定的
- JavaScript実行：複雑なJS実行が制限される可能性
- ヘッドレスモード：ヘッドレスブラウザの制御が限定的
- 並列実行：複数ブラウザの同時制御が難しい
利用可能な機能一覧
| 機能 | 説明 |
|---|---|
| ナビゲーション | URLに移動 |
| スナップショット | アクセシビリティスナップショット取得 |
| スクリーンショット | 画像として保存 |
| クリック | 要素をクリック |
| テキスト入力 | テキストを入力 |
| ホバー | 要素にマウスオーバー |
| 待機 | テキスト表示待ち |
| JavaScript実行 | JavaScript実行（制限あり） |
| フォーム入力 | 複数フィールド一括入力 |
| ドロップダウン選択 | セレクトボックス選択 |
| タブ管理 | タブの作成/切り替え |
| コンソールログ | コンソールメッセージ取得 |
| リサイズ | ブラウザウィンドウサイズ変更 |
Playwright MCPとは
基本情報
| 項目 | 内容 |
|---|---|
| 正式名称 | @playwright/mcp |
| セットアップ | 必要（Node.js 18+、ブラウザインストール） |
| リソース | 重い（ブラウザエンジン含む、数百MB） |
| 統合性 | MCP経由で利用可能 |
特徴
Node.jsベースのブラウザ自動化ライブラリで、Chromium、Firefox、WebKitをサポート。
**最大の特徴は「完全なブラウザ制御」**です。ブラウザのあらゆる機能を制御できます。
メリット
- 完全な制御：ブラウザのあらゆる機能を制御可能
- JavaScript実行：任意のJSコードを実行可能
- 待機処理：高度な待機処理が可能
- ネットワーク制御：リクエスト/レスポンスのインターセプト
- 並列実行：複数ブラウザを同時に制御
- ヘッドレスモード：完全対応
- テストフレームワーク：機能が充実
デメリット
- セットアップ必要：npm install playwrightが必要
- ブラウザダウンロード：初回実行時に数百MBダウンロード
- 重い：リソース消費が大きい
- 統合性：Cursor IDEに直接統合されていない
利用可能な機能一覧
| 機能カテゴリ | 説明 |
|---|---|
| 完全なブラウザ制御 | クリック、入力、スクロール、キーボード操作など |
| 高度な待機処理 | 要素表示、ネットワークアイドル、カスタム条件など |
| ネットワーク制御 | インターセプト、モック、リクエストブロック |
| JavaScript実行 | ページコンテキストでの完全なJS実行 |
| 複数ブラウザ対応 | Chromium/Firefox/WebKit |
| PDF生成 | ページをPDF化 |
| 動画録画 | 操作の動画記録 |
| モバイルエミュレーション | モバイルデバイスエミュレート |
機能比較表
| 項目 | Cursor Browser Extension | Playwright MCP |
|---|---|---|
| セットアップ | 不要 | 必要 |
| リソース消費 | 軽量 | 重い |
| 統合性 | Cursor IDE統合 | MCP経由 |
| 基本操作 | 可能 | 可能 |
| スクリーンショット | 可能 | 可能 |
| JavaScript実行 | 制限あり | 完全対応 |
| 待機処理 | 基本的 | 高度 |
| ネットワーク制御 | 不可 | 可能 |
| 並列実行 | 難しい | 可能 |
| ヘッドレスモード | 制限あり | 完全対応 |
| クロスブラウザ | 不可 | 可能 |
| PDF生成 | 不可 | 可能 |
| 動画録画 | 不可 | 可能 |
| モバイルエミュレーション | 不可 | 可能 |
| テストフレームワーク | なし | 充実 |
実際の使用例
ケース1：ブログ記事の表示確認
Cursor Browser Extension で十分
1. 記事URLに移動
2. スナップショット取得（構造化データ）
3. スクリーンショット取得
メリット：
- セットアップ不要
- 軽量で高速
- 構造化データで自動チェック可能
ケース2：複雑なインタラクションテスト
Playwright MCP が適している
1. ログインページに移動
2. フォーム入力
3. ネットワークリクエストの監視開始
4. ログインボタンクリック
5. ネットワークアイドルまで待機
6. APIレスポンスを検証
メリット：
- ネットワークリクエストの詳細制御
- エラーハンドリングが充実
- テストの信頼性が高い
用途別の判断基準
Cursor Browser Extension を選ぶ場合
| 用途 | 説明 |
|---|---|
| 基本的な表示確認 | 記事・画像・リンクの確認 |
| 軽量な操作 | ページ移動、スクリーンショット |
| IDE内での確認 | Cursor内で直接確認したい |
| リソース節約 | メモリ・CPUの使用を抑えたい |
Playwright MCP を選ぶ場合
| 用途 | 説明 |
|---|---|
| 複雑なテストシナリオ | 複数ステップのワークフロー |
| ネットワーク制御 | APIモック、リクエスト検証 |
| CI/CDパイプライン | 自動テスト、デプロイ前検証 |
| クロスブラウザテスト | 複数ブラウザでの動作確認 |
| パフォーマンステスト | 読み込み時間、リソース監視 |
推奨アクション
1. 現在
Cursor Browser Extension を活用
ほとんどのユースケースでは、これで十分です。
2. 将来
以下の条件が満たされたら、Playwright MCPの導入を検討：
- 複雑なテストシナリオが必要になった時
- CI/CDパイプラインに自動テストを組み込みたい時
- ネットワークリクエストの制御が必要になった時
- クロスブラウザテストが必要になった時
まとめ
私の結論
現在のプロジェクトでは、Cursor Browser Extension で十分です。
理由：
- 基本的な表示確認で足りる
- セットアップ不要
- 軽量で高速
- Cursor IDEに統合
Playwright MCPは、より高度な自動化が必要になった時に導入を検討しましょう。
体系的に学びたい方へ
おすすめ技術書
ブラウザ自動化の基礎知識を身につけたい方には、以下の技術書がおすすめです。
自動化スクリプトを書く際にも役立つ、可読性の高いコードの書き方を学べます。
エンジニアとしての考え方を学べる名著。自動化の思想にも通じます。
関連記事
CursorとMCPについてもっと知りたい方におすすめの関連記事：
