Cursor AI Browser Control の使い方 (2026年版)

Cursor AI ブラウザコントロールの活用方法 (2026年版)

Cursor AI は単なるコードエディタから、Web ブラウザと直接対話できるフル機能の開発環境へと進化しました。ブラウザコントロール機能により、Cursor は自然言語のコマンドだけで、Web サイトのナビゲート、要素のクリック、フォームへの入力、スクリーンショットの撮影、コンソール出力の読み取り、そしてアプリケーションが正しく動作することの検証までを行うことができます。

このガイドでは、開発、テスト、およびデバッグのワークフローにおいて Cursor のブラウザコントロール機能をセットアップし、使用する方法について説明します。

Cursor ブラウザコントロールでできること

Cursor のブラウザコントロールは、ブラウザ自動化ツールと統合されており、AI エージェントが Web ブラウザへ直接アクセスできるようにします。これにより、以下のような強力なワークフローが可能になります。

機能	説明
ページの移動	URL を開く、リンクをクリックする、戻る/進む
要素との対話	ボタンのクリック、入力フィールドへの入力、ドロップダウンの選択
スクリーンショットの撮影	視覚的な検証のため、現在のページ状態をキャプチャする
ページコンテンツの読み取り	テキスト、HTML、要素の属性を抽出する
コンソールの監視	JavaScript のコンソールログやエラーを読み取る
JavaScript の実行	ブラウザのコンテキストで任意のスクリプトを実行する
アプリケーションのテスト	コード変更後の UI の挙動を検証する

Cursor でのブラウザコントロールのセットアップ

方法 1: 内蔵ブラウザツール（Cursor Agent）を使用する

Cursor のエージェントモードには、Cursor バージョン 0.45 以降で標準提供されているブラウザツールが含まれています。使い方は以下の通りです。

1. Cursor を開き、プロジェクトに移動します。
2. AI チャットパネルを開きます（Cmd+L / Ctrl+L）。
3. モードセレクターをクリックするか、Cmd+.（Windows では Ctrl+.）を押して Agent モードに切り替えます。
4. Cursor にブラウザ操作を依頼します。

ブラウザで http://localhost:3000 を開き、ログインページが正しく読み込まれるか確認して

Cursor はヘッドレスブラウザを起動し、URL に移動して、確認内容を報告します。スクリーンショットを撮影したり、視覚的な内容を解釈してアプリケーションを検証したりすることも可能です。

方法 2: Playwright MCP サーバーを使用する

より高度なブラウザ制御を行うには、Cursor を Playwright MCP (Model Context Protocol) サーバーに接続します。これにより、AI エージェントに Playwright のフル機能の自動化能力が与えられます。

ステップ 1: Playwright MCP サーバーをインストールする

npm install -g @anthropic-ai/mcp-playwright

ステップ 2: MCP サーバーを使用するように Cursor を設定する

Cursor の設定を開き、MCP 設定に移動します。Playwright サーバーを追加します。

// プロジェクトルートの .cursor/mcp.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-playwright"]
    }
  }
}

ステップ 3: Cursor を再起動して確認する

設定を追加した後、Cursor を再起動します。エージェントのツールリストに Playwright ツールが表示されるはずです。MCP サーバーにより、Cursor は以下のようなツールにアクセスできるようになります。

• browser_navigate -- URL へ移動
• browser_click -- セレクターまたはテキストで要素をクリック
• browser_type -- 入力フィールドにテキストを入力
• browser_screenshot -- スクリーンショットを撮影
• browser_evaluate -- ページ内で JavaScript を実行

方法 3: Puppeteer MCP を使用する

Playwright の代替として、Puppeteer ベースの MCP サーバーも利用可能です。

// .cursor/mcp.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

実践的な例

例 1: ログインフローのテスト

認証コードを変更した後、Cursor に動作確認を依頼します。

http://localhost:3000/login に移動し、メールアドレス欄に "test@example.com"、パスワード欄に "password123" と入力して送信ボタンをクリックし、ダッシュボードにリダイレクトされるか確認してください。

Cursor は各ステップを順次実行し、各段階でスクリーンショットを撮影し、フローが期待通りに動作するかを報告します。失敗した場合は、コンソールエラーを読み取ってコードの修正案を提示します。

例 2: 視覚的なバグのデバッグ

スタイリングの問題に気づいたとき、ブラウザコントロールを使用して調査します。

ブラウザで http://localhost:3000/pricing を開いてください。料金プランカードのセクションのスクリーンショットを撮り、1280px 幅のビューポートでカードが正しく整列しているか確認してください。

Cursor はスクリーンショットをキャプチャし、視覚的なレイアウトを分析して、何がおかしいかを伝えます。その後、CSS の修正を依頼できます。

モバイルで料金カードがはみ出しています。768px 以下で垂直に並ぶように CSS を修正してください。その後、幅 375px でページを開き、スクリーンショットを撮って確認してください。

例 3: 開発用のデータスクレイピング

開発中に、他のサイトがどのように API や HTML を構築しているかを確認する必要がある場合があります。

https://example.com/api/docs に移動し、ページからすべての API エンドポイントの URL とその HTTP メソッドを抽出してください。

Cursor はページコンテンツを解析し、開発に使用できる構造化データを返します。

例 4: E2E テストの生成

Cursor にテストの実行とテストコードの記述の両方を依頼します。

http://localhost:3000 を開き、サインアップフローを手動でテストしてください。その後、この全く同じフローを自動化する Playwright のテストファイルを書いてください。

Cursor はアプリを操作して挙動を観察し、テストファイルを生成します。

// tests/signup.spec.ts (Cursor によって生成)
import { test, expect } from '@playwright/test';

test('user can sign up successfully', async ({ page }) => {
  await page.goto('http://localhost:3000/signup');

  await page.fill('[data-testid="email-input"]', 'newuser@example.com');
  await page.fill('[data-testid="password-input"]', 'SecurePass123!');
  await page.fill('[data-testid="confirm-password-input"]', 'SecurePass123!');

  await page.click('[data-testid="signup-button"]');

  await expect(page).toHaveURL('/dashboard');
  await expect(page.locator('[data-testid="welcome-message"]')).toContainText(
    'Welcome'
  );
});

Cursor Rules を使ったブラウザコントロール

.cursorrules ファイルを作成して、ブラウザコントロールに関する好みを Cursor に伝えます。

# Browser Control Rules

ブラウザでアプリケーションをテストする際：
- 常に http://localhost:3000 をベース URL として使用すること
- 主要な操作の後は必ずスクリーンショットを撮影すること
- ページ遷移のたびにブラウザコンソールのエラーを確認すること
- 要素の選択には、利用可能な場合は data-testid 属性を使用すること
- 1280px（デスクトップ）と 375px（モバイル）の両方のビューポートでテストすること
- 遭遇したコンソールの警告やエラーはすべて報告すること

一般的な問題のトラブルシューティング

ブラウザが起動しない

# Playwright ブラウザがインストールされているか確認
npx playwright install chromium

# またはすべてのブラウザをインストール
npx playwright install

MCP サーバーが接続されない

1. .cursor/mcp.json の MCP 設定が有効な JSON であることを確認します。
2. MCP 設定を変更した後は、必ず Cursor を再起動してください。
3. MCP サーバーのバイナリがアクセス可能か確認します。

# Playwright MCP サーバーを直接テスト
npx @anthropic-ai/mcp-playwright --help

スクリーンショットが真っ白になる

これは通常、ページの読み込みが完了していないことを意味します。Cursor に待機を指示してください。

http://localhost:3000 に移動し、ページが完全に読み込まれるまで（ネットワークがアイドル状態になるまで）待ってから、スクリーンショットを撮ってください。

Shadow DOM 要素と対話できない

Shadow DOM を使用している Web コンポーネントの場合：

browser_evaluate を使用して shadow root にアクセスしてください：
document.querySelector('my-component').shadowRoot.querySelector('button').click()

効果的なブラウザコントロールのためのヒント

ヒント	理由
data-testid 属性を使用する	CSS セレクターやテキスト内容よりも信頼性が高い
先に開発サーバーを起動する	ブラウザコントロールには実行中のアプリが必要
ビューポートを具体的に指定する	レスポンシブテストのために正確な幅を指定する
関連するアクションを繋げる	移動 + 操作 + 検証を一つのプロンプトにまとめる
デバッグにスクリーンショットを活用	操作の前後でスクリーンショットを撮るよう依頼する

注意すべき制限事項

• 永続的なセッションなし: Cursor のセッション間でブラウザの状態はリセットされます。Cookie や localStorage は保持されません。
• デフォルトはヘッドレス: ブラウザはヘッドレス（画面なし）で実行されます。MCP サーバーでヘッドモード（画面あり）を設定しない限り、リアルタイムで見ることはできません。
• 操作の速度: 各アクションが AI モデルとの往復を必要とするため、複雑なマルチステップのフローは時間がかかる場合があります。
• 認証: OAuth や CAPTCHA を必要とするサイトは、手動の介入やモック/テスト用クレデンシャルが必要です。

まとめ

Cursor のブラウザコントロールは、AI コードエディタを、コードを書き、実際のブラウザでテストし、視覚的・機能的なフィードバックに基づいて反復できる、完全な開発アシスタントへと変貌させます。内蔵のブラウザツールを使う場合でも、Playwright/Puppeteer MCP サーバーを接続する場合でも、変更を視覚的かつインタラクティブに検証できる能力は、手動テストの時間を大幅に削減します。

画像、ビデオ、トーキングアバターなどの AI 生成メディアを統合する Web アプリケーションを構築している場合は、Hypereal AI を無料でお試しください（35 クレジット、クレジットカード不要）。当社の API を使用すれば、あらゆる Web アプリケーションに AI メディア生成を簡単に追加できます。Cursor のブラウザコントロールは、その統合をテストするための最適な方法です。