Cursor AI Browser Control の使い方 (2026年版)
Cursorの組み込みツールを使用して、ブラウザテストとインタラクションを自動化する
Hyperealで構築を始めよう
Kling、Flux、Sora、Veoなどに単一のAPIでアクセス。無料クレジットで開始、数百万規模まで拡張可能。
クレジットカード不要 • 10万人以上の開発者 • エンタープライズ対応
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 以降で標準提供されているブラウザツールが含まれています。使い方は以下の通りです。
- Cursor を開き、プロジェクトに移動します。
- AI チャットパネルを開きます(Cmd+L / Ctrl+L)。
- モードセレクターをクリックするか、Cmd+.(Windows では Ctrl+.)を押して Agent モードに切り替えます。
- 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 サーバーが接続されない
.cursor/mcp.jsonの MCP 設定が有効な JSON であることを確認します。- MCP 設定を変更した後は、必ず Cursor を再起動してください。
- 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 のブラウザコントロールは、その統合をテストするための最適な方法です。
