🌐
Cursor の Connect to Browser 機能を使ってみた

2025/12/16に公開
 はじめにクラウドエース株式会社 第二開発部の菅野です。
Cursor を使用していると、エージェントの入力欄に「Connect to Browser」という機能を発見しました。この機能は 2025 年 9 月末にバージョン 1.7 で追加され、2025 年 10 月末のバージョン 2.0 で正式版としてリリースされた比較的新しい機能です。まだ使用したことがなかったため、Cursor に質問しながら実際に試してみました。
本記事では、Connect to Browser 機能の概要から実際の使用例、そして 3 つの実装サイトを通じた検証結果までを解説します。

 Connect to Browser 機能とは
 機能概要Connect to Browser は、Cursor のAIエージェントがWebブラウザと連携する機能です。AIエージェントがブラウザを制御することで、様々な操作を自動化できます。

 主な機能以下は、Cursor に機能を説明してもらった内容をベースにまとめたものです。

 1. ページナビゲーション
URLへの移動：指定したURLにブラウザをナビゲート

戻る操作：ブラウザの戻るボタンと同等の操作

タブ管理：タブの作成、閉じる、切り替え

 2. ページ情報の取得
アクセシビリティスナップショット：ページの構造を理解するための情報を取得

スクリーンショット：ページ全体または特定要素のスクリーンショット取得

コンソールメッセージ：ブラウザコンソールのメッセージを取得

ネットワークリクエスト：ページのネットワーク通信を監視

 3. ページ操作
クリック操作：要素のクリック、ダブルクリック、右クリック

テキスト入力：テキストフィールドへの入力

フォーム入力：複数のフォームフィールドへの一括入力

ドロップダウン選択：セレクトボックスでの選択

ドラッグ&ドロップ：要素間のドラッグ&ドロップ操作

ホバー：要素へのマウスホバー

 4. 高度な操作
JavaScript 実行：ページ上で JavaScript コードを実行

ダイアログ処理：アラート、確認、プロンプトダイアログの処理

待機操作：特定のテキストの出現や消失を待機
人間がブラウザで実行できる操作の多くを、AIエージェントが代わりに実行できるようになります。

 使用方法Connect to Browser 機能の利用方法と、その結果について説明します。

 前提条件
画面右下にある🌏マークを押して機能を有効化した状態で、AIエージェントに指示を出します。
Chrome または Edge（Chromium ベースブラウザ）がインストールされていれば、特別な設定やブラウザ拡張機能のインストールなしで使用できます。ブラウザ操作を依頼すると、Cursor が自動的にブラウザを起動して制御します。
機能が動作しない場合の主な原因：
Chrome/Edge が最新版でない
VPN やファイアウォールがブラウザ制御をブロックしている
ネットワーク環境の問題（企業ネットワークなど）
これらの場合、Cursor の設定で HTTP/2 を無効化する、VPN を一時的に無効化する、などの対処が有効です。

 ページへのアクセスと情報取得「https://example.com にアクセスして、ページのタイトルを教えてください」
このような指示を入力すると、ブラウザが起動し、指定したサイトにアクセスします。
具体的な動作は以下の通りです（Cursor の出力より）：
ブラウザで指定URLにナビゲート
ページが読み込まれるまで待機
ページのスナップショットを取得
タイトル情報を抽出して回答
タイトルだけでなく、ページの具体的な内容についても情報を取得することができます。

 フォーム入力の自動化「https://example.com/form にアクセスして、以下の情報を入力してください：
- 名前: 山田太郎
- メール: yamada@example.com
- メッセージ: お問い合わせ内容です」
このような指示を出すと、指示通りにフォームへの入力を実行してくれます。開発中のWebサイトにアクセスして、UIの検証を行うことも可能です。

 アプリケーションテスト「https://example.com/app にアクセスして、ログインフォームをテストしてください。
ユーザー名とパスワードを入力して、ログインボタンをクリックし、
結果を確認してください。」
Cursor で作成したアプリケーションを、Cursor 自身に自動テストさせることも可能です。

 活用シーンConnect to Browser 機能は、以下のような場面で活用できます（Cursor に質問した内容をベースにまとめています）。

 Webアプリケーションのデバッグコンソールエラーの確認
ネットワークリクエストの監視
ページの状態確認

 データ収集と分析Webサイトからの情報抽出
複数ページの巡回
データの構造化

 UI/UXの検証ページの表示確認
レスポンシブデザインの確認
アクセシビリティの確認

 自動化タスク定期的なチェック作業
フォーム入力の自動化
レポート生成
これまで手作業で行っていたこれらの作業を、Cursor から離れることなく実行できるのは非常に便利です。

 実践：基本的な使用例実際に Connect to Browser 機能を使用して、どのようなことができるのか試してみました。
本章で使用しているスクリーンショットは、すべて Cursor の Connect to Browser 機能によって自動取得されたものです。AIエージェントがブラウザを操作し、適切なタイミングでスクリーンショットを撮影しています。

なお、記事の見やすさを考慮し、一部のスクリーンショットはトリミング処理を施しています。機能の動作や画面の内容に変更はありません。

 1. Webサイトの確認クラウドエースの生成AI活用支援ページにアクセスし、タイトルと内容の要約を取得してもらいました。
入力した指示：
https://cloud-ace.jp/service/generative-ai/ にアクセスして、ページのタイトルと主要な内容を教えてください。
結果：
#### ページタイトル
「生成AI活用支援 | Cloud Ace（クラウドエース）」

#### 主要な内容

このページは、クラウドエースが提供する生成AI活用支援サービスの総合案内ページです。Google Cloudの先進的なAIプラットフォームとクラウドエースの技術・知見を融合し、企業のビジネス課題を解決する生成AIソリューションを提供しています。

##### 主なセクション

1. **クラウドエースの生成AI活用**
   - Vertex AI、Geminiなど最新技術の活用
   - 企画から開発、導入、運用までの一貫支援
   - デジタルトランスフォーメーション（DX）推進

2. **ご支援内容**
   - 生成AI活用コンサルティング
   - Gemini Enterprise 導入・活用支援
   - LLMOps支援
   - Langfuse 活用支援
   - Vertex AI 導入・活用支援
   - 買い切り型生成AIチャットボットキット
   - 生成AIトレーニング

3. **こんなお悩みはありませんか？**
   - 社内情報の散在による検索時間の浪費
   - 定型的な問い合わせ対応のリソース消費
   - 生成AI活用の開始方法がわからない
   - セキュリティリスクへの不安
   - 専門人材の不足
   - LLMアプリケーションの品質安定化

4. **各種支援サービスの詳細説明**
   - 生成AI活用コンサルティング：アイデア具現化から内製化支援
   - Gemini Enterprise導入支援：Google Workspace連携
   - その他の専門的な支援サービス

5. **よくある質問（FAQ）**
   - 生成AIの活用メリット
   - プロジェクト期間と費用
   - ハルシネーション対策
   - 既存システムとの連携

6. **関連コラム**
   - Gemini CLI完全ガイド
   - Google Opal解説
   - Vertex AI徹底解剖
このWebサイトが生成AI活用支援サービスの内容を包括的に説明しているページであることを正確に読み取ることができました。

 2. Webサイトの詳細確認次に、Wikipedia のページを使用してより詳細な情報取得を試しました。
入力した指示（海苔の Wikipedia）：
https://ja.wikipedia.org/wiki/%E6%B5%B7%E8%8B%94 にアクセスして、以下の情報を取得してください：
1. ページのタイトル
2. ページの主要な見出し（h1, h2タグ）
3. ページのスクリーンショット
4. コンソールにエラーがないか確認
結果：
#### 1. ページのタイトル

「海苔 - Wikipedia」

#### 2. ページの主要な見出し（h1, h2タグ）

**h1（メインタイトル）:**
- 「海苔」

**h2（主要セクション）:**
- 「海苔（食用）の分類」
- 「日本における海苔」
  - サブセクション（h3）: 「歴史」「産地」「養殖」「色調」「輸入」「海苔メーカー」「海苔の消化と日本人」
- 「日本国外における海苔」
- 「他の動物の影響」
- 「海苔の病害」
  - サブセクション（h3）: 「対策」
- 「脚注」
  - サブセクション（h3）: 「注釈」「出典」
- 「関連項目」
- 「外部リンク」

#### 3. ページのスクリーンショット

スクリーンショットを正常に取得しました。ページは正常に表示されており、ウィキペディアの標準的なレイアウトで表示されています。

#### 4. コンソールエラーの確認

コンソールメッセージを確認しました。エラーはありません。以下のログメッセージのみが記録されました（正常な動作）:

- `mw.xLab.getExperiment()` に関する情報ログ（実験機能の未登録に関する通知で、エラーではありません）
また、以下のようなスクリーンショットも取得されました。


Wikipedia（CC BY-SA 3.0）より

 複数Webサイトの巡回Connect to Browser 機能は、複数のWebサイトに対してまとめて処理を実行することも可能です。
入力した指示：
以下のページを順番にアクセスして、各ページのタイトルを教えてください：
1. https://example.com
2. https://www.wikipedia.org
3. https://www.github.com

各ページでスクリーンショットも取得してください。
結果：
#### 1. ページ1: https://example.com

- **ページタイトル**: "Example Domain"
- **アクセス**: ✅ 成功
- **スクリーンショット**: ✅ 取得成功
- **ページ内容**: シンプルなドキュメント用のサンプルページ。メイン見出しは「Example Domain」で、ドキュメント例での使用を目的としたドメインであることが説明されています。

#### 2. ページ2: https://www.wikipedia.org

- **ページタイトル**: "Wikipedia"
- **アクセス**: ✅ 成功
- **スクリーンショット**: ✅ 取得成功
- **ページ内容**: Wikipediaのメインページ。多言語対応で、日本語、英語、ドイツ語、ロシア語、フランス語、スペイン語、中国語、イタリア語、ポーランド語、ポルトガル語などの主要言語へのリンクが表示されています。検索機能も利用可能です。

#### 3. ページ3: https://www.github.com

- **ページタイトル**: "GitHub · Change is constant. GitHub keeps you ahead. · GitHub"
- **アクセス**: ✅ 成功
- **スクリーンショット**: ✅ 取得成功
- **ページ内容**: GitHubのホームページ。開発者向けのプラットフォームで、GitHub Copilot、GitHub Actions、GitHub Codespacesなどの機能が紹介されています。モダンなデザインで、開発ツールやセキュリティ機能についての情報が表示されています。
取得したスクリーンショット：




Wikipedia（CC BY-SA 3.0）より


 3. エラーハンドリングの確認存在しないページにアクセスした場合のエラー検出機能も試してみました。
入力した指示：
https://example.com/nonexistent-page にアクセスしてみてください。
エラーが発生した場合、エラーメッセージとページの状態を教えてください。
結果：
#### アクセスしたURL

https://example.com/nonexistent-page

#### エラーの検出

**コンソールエラー**: ✅ 検出されました

- **エラーメッセージ**: `Failed to load resource: the server responded with a status of 404 ()`
- **ステータスコード**: 404 (Not Found)
- **エラー発生場所**: `https://example.com/nonexistent-page:0`

#### ページの状態

**ページタイトル**: "Example Domain"（通常のExample Domainページと同じ）

**ページ内容**: 通常のExample Domainページと同じ内容が表示されました。これは、example.comが404エラーを返すものの、ブラウザまたはサーバー側でフォールバックとしてルートページのコンテンツを表示している可能性があります。

**URL**: `https://example.com/nonexistent-page`（URLは変更されていません）

**ページ構造**:
- メイン見出し: "Example Domain"
- 説明文: "This domain is for use in documentation examples without needing permission. Avoid use in operations."
- リンク: "Learn more" (https://iana.org/domains/example)

#### ネットワークリクエスト

- **リクエスト**: `[GET] https://example.com/nonexistent-page`
- **ステータス**: 404エラーが検出されました
存在しないページにアクセスした結果、適切にエラーを検出し報告してくれました。

 Webサイトの実装と検証ここからは、Cursor に複数のWebサイトを実装してもらい、Connect to Browser 機能を使って動作確認とデバッグを実施した結果を紹介します。
本章では、Connect to Browser 機能の実用性を検証するため、以下の流れで実践します。
AIエージェントにWebサイトを作成させる
作成したWebサイトを Cloud Run にデプロイする
Connect to Browser 機能を使用してAIエージェントにテスト・デバッグを実施させる
この一連の流れを通じて、開発からテストまでをAIエージェントが自動的に実行できることを確認します。
以下の3つのサイトを作成し、それぞれ検証を行いました：
Connect to Browser テスト専用サイト
映画予約サイト
ID・パスワード登録サイト

 1. Connect to Browser テスト専用サイトまず、Connect to Browser 機能でどのようなことができるのかを確認するため、専用のテストサイトを作成してもらいました。
様々なページと機能を用意し、Connect to Browser 機能で何ができるのかを検証しました。

 ホームページの確認まず、Webサイトの作成を行いました。
入力した指示：
Connect to Browser機能を幅広く試すことができるWebサイトを作成してください。
フォーム、インタラクティブ要素、APIエンドポイントなど、多様な機能を含めてください。
その後、Cloud Run へのデプロイを行いました。
入力した指示：
作成したサイトをCloud Runにデプロイしてください。
設定や手順はすべてお任せします。
問題なく Cloud Run へWebサイトのデプロイが行われたことを確認しました。

次に、作成したWebサイトに問題なくアクセスすることができるかを確認しました。
入力した指示：
デプロイしたサイトに対して、一通りのテストを実行してください。
各機能の動作確認とスクリーンショットの撮影を行い、
問題なく動作することを確認できたら、結果をレポートとしてファイルに記録してください。
このサイトのテスト・デバッグはすべて上記の一つの指示で実行されました。

複数ページのナビゲーション、フォーム操作、インタラクティブ要素、APIエンドポイント、エラーハンドリングなど、多岐にわたる機能のテストを、AIエージェントが自律的に判断して実行しています。
メインページを読み込んでもらった結果は以下の通りです：
### 1. ホームページのアクセスと基本確認

**テスト内容**:
- デプロイURLへのアクセス
- ページタイトルの取得
- ページ構造の確認
- スクリーンショットの取得

**結果**: ✅ 成功

**確認できた内容**:
- ページタイトル: "Connect to Browser テストサイト - ホーム"
- ナビゲーションメニューが正常に表示（ホーム、アバウト、フォーム、インタラクティブ、送信データ）
- ヒーローセクションが正常に表示
- 機能カード（4つ）が正常に表示
- APIエンドポイント一覧が正常に表示
ページが正しく読み込まれ、構造を正確に把握できていることが確認できました。

 フォーム入力と送信テスト次に、フォームへの入力と送信機能のテストを実施しました。
テキスト入力、チェックボックス、ラジオボタンなどの選択も問題なく動作し、送信ボタンを押してデータ送信が完了しました。

 インタラクティブ要素のテスト
様々なインタラクティブ要素についても、人間が操作するのと同じように問題なく実行できました。アコーディオンやカウンターなどの操作も正常に完了しています。

 API エンドポイントの呼び出しテストAPI エンドポイントの呼び出しもテストしました：
**テスト内容**:
- GET /api/data の呼び出し
- レスポンスの確認

**結果**: ✅ 成功
{
  "data": {
    "items": [
      {
        "id": 1,
        "name": "Item 1",
        "value": 100
      },
      {
        "id": 2,
        "name": "Item 2",
        "value": 200
      },
      {
        "id": 3,
        "name": "Item 3",
        "value": 300
      }
    ]
  },
  "message": "Hello from Cloud Run!",
  "status": "success",
  "timestamp": "2025-12-04T01:27:09.298135"
}
**確認できた内容**:
- APIエンドポイントが正常に応答
- JSON形式のレスポンスが正しく返される
- タイムスタンプが正しく含まれる
- データ構造が期待通り
API の呼び出しも問題なく実行できることが確認できました。

 2. 映画予約サイト次に、より実践的な例として映画予約サイトを作成してもらい、実際に予約操作が可能か検証しました。

まず、Webサイトの作成から Cloud Run へのデプロイまでの一連の流れをAIエージェントに任せました。
入力した指示：
実践的なWebサイトとして、映画予約サイトを作成してください。
映画選択から座席選択、予約確認までの一連のユーザーフローを実装してください。
決済機能などの複雑な部分は不要です。
作成した映画予約サイトをCloud Runにデプロイしてください。
問題なく Cloud Run へWebサイトのデプロイが行われたことを確認しました。

次に、作成したWebサイトに問題なくアクセスし、各ページが問題なく動作できるかを確認しました。
入力した指示：
デプロイした映画予約サイトの全ページにアクセスして、各画面のスクリーンショットを撮影してください。
デプロイが正常に完了しているか、各ページが問題なく動作するか確認し、
結果をファイルに記録してください。
このサイトのテスト・デバッグに関しても、上記の指示のみで完了しています。

映画選択から座席選択、予約確認、予約完了までの一連のユーザーフローを自律的に判断し、スクリーンショット撮影と動作確認を体系的に実行することができます。

 トップページ
トップページへのアクセス結果：
**テスト内容**:
- デプロイURLへのアクセス
- 映画一覧の表示確認
- スクリーンショットの取得

**結果**: ✅ 成功

**確認できた内容**:
- ページタイトル: "映画予約サイト - ホーム"
- 4つの映画が正常に表示
  - アドベンチャー・タイム（アクション・アドベンチャー）
  - ロマンティック・ストーリー（ロマンス）
  - ミステリー・ナイト（ミステリー・サスペンス）
  - コメディ・タイム（コメディ）
- 各映画カードに詳細情報が表示（ジャンル、上映時間、レーティング、説明）
トップページへのアクセスは正常に完了しました。

 映画詳細ページ
映画詳細ページへの遷移と詳細確認：
**テスト内容**:
- 映画カードの「詳細を見る」リンクをクリック
- 映画詳細情報の表示確認
- 上映スケジュールの表示確認

**結果**: ✅ 成功

**確認できた内容**:
- 映画詳細ページに正常に遷移
- 映画の詳細情報が表示（タイトル、ジャンル、上映時間、レーティング、説明）
- 複数の上映スケジュールが表示（時間、スクリーン、残席数）
- 各スケジュールに「座席を選択」ボタンが表示

**テストした映画**: アドベンチャー・タイム
映画の詳細画面への遷移と情報取得が正常に動作しました。

 座席選択ページ
座席選択ページのテスト：
**テスト内容**:
- 上映スケジュールから「座席を選択」をクリック
- 座席マップの表示確認
- 複数の座席を選択
- 選択座席の確認

**結果**: ✅ 成功

**確認できた内容**:
- 座席選択ページに正常に遷移
- 座席マップが正常に表示（5列×10行 = 50席）
- 座席ボタンが正常にクリック可能
- 複数の座席を選択可能（A01, A02, A03を選択）
- 選択した座席が視覚的にハイライト表示
- 選択座席数が正しくカウント（3席）
- 選択座席リストが表示
- 「予約確認へ」ボタンが有効化される

**選択した座席**: A01, A02, A03（3席）
座席の選択と予約画面への遷移が正常に動作しました。

 予約確認ページ
予約確認ページのテスト：
**テスト内容**:
- 座席選択後の予約確認ページへの遷移
- 予約内容の表示確認
- 顧客情報入力フォームの表示確認

**結果**: ✅ 成功

**確認できた内容**:
- 予約確認ページに正常に遷移
- 予約情報が正しく表示
  - 映画: アドベンチャー・タイム
  - 上映時間: 10:00
  - スクリーン: スクリーン1
  - 座席: A01, A02, A03
  - 枚数: 3枚
- 顧客情報入力フォームが表示
  - お名前（必須）
  - メールアドレス（必須）
  - 電話番号（必須）
予約情報が正確に表示され、フォームも正常に機能していることが確認できました。

 予約完了ページ
顧客情報を入力して予約を完了させるテスト：
**テスト内容**:
- 顧客情報の入力
- 予約確定ボタンのクリック
- 予約完了ページの表示確認

**結果**: ✅ 成功

**入力した顧客情報**:
- お名前: 山田 太郎
- メールアドレス: yamada@example.com
- 電話番号: 090-1234-5678

**確認できた内容**:
- フォーム入力が正常に動作
- 予約確定ボタンが正常に動作
- 予約完了ページに正常に遷移
- 予約詳細が正しく表示
  - 予約番号: #1
  - 映画: アドベンチャー・タイム
  - 上映時間: 10:00
  - スクリーン: スクリーン1
  - 座席: A01, A02, A03
  - 枚数: 3枚
  - お名前: 山田 太郎
  - メールアドレス: yamada@example.com
  - 電話番号: 090-1234-5678
  - 予約日時: 2025-12-04 01:34:32
フォームに入力した内容が正しく反映され、予約が完了しました。

 予約一覧ページ
予約内容の確認：
**テスト内容**:
- 予約一覧ページへの遷移
- 保存された予約の表示確認

**結果**: ✅ 成功

**確認できた内容**:
- 予約一覧ページに正常に遷移
- 予約が正しく保存されている
- 予約件数が正しく表示（1件）
- 予約詳細が正しく表示
  - 予約番号、予約日時
  - 映画情報
  - 上映時間、スクリーン
  - 座席情報
  - 顧客情報
他の映画についても予約を実施した結果、予約一覧画面に複数の予約が正しく表示されました。映画予約サイト全体が正常に動作していることが確認できました。

 3. ID・パスワード登録サイト最後に、入力検証機能を持つ ID・パスワード登録サイトを作成し、デバッグ機能のテストを実施しました。
このサイトには以下の仕様を設定しました：

ID：英語の大文字・小文字と数字のみ使用可能

パスワード：英語の大文字・小文字、数字、記号が使用可能で、これら 4 種類すべてを含む必要がある
先ほどと同様に、サイトを作成しました。今回は詳細な仕様を交えた指示を行いました。
入力した指示：
以下の仕様に沿ったID/パスワード設定サイトを作成してください。

【IDの仕様】
- 英大文字、小文字、数字のみ利用可能

【パスワードの仕様】
- 英大文字、小文字、数字、記号が利用可能
- 少なくとも全種類を1つずつ含む必要がある
- 不足している文字種類を表示すること

作成後、Cloud Runにデプロイしてください。
問題なく Cloud Run へWebサイトのデプロイが行われたことを確認しました。

次に、作成したWebサイトにアクセスし、フォームに対するデバッグができるかを確認しました。
入力した指示：
デプロイしたID/パスワード設定サイトに対して、以下のデバッグを実行してください。

【テストケース1：異常系】
- IDに記号を含めて入力し、エラーメッセージが表示されることを確認
- パスワードに記号のみ含めずに入力し、不足文字種類が表示されることを確認

【テストケース2：正常系】
- 仕様に沿ったIDとパスワードを入力し、登録が成功することを確認

各テストケースでスクリーンショットを撮影し、バリデーションが正しく機能しているか確認してください。
結果をレポートとしてファイルに記録してください。

 IDテスト（異常系）
ID に誤った文字（記号）を含む入力のテスト：
**テスト内容**:
- IDに記号（@）を含む入力を試行
- エラーメッセージの表示確認
- 登録ボタンの無効化確認

**入力値**: `User@123`（記号@を含む）

**結果**: ✅ 成功

**確認できた内容**:
- エラーメッセージが表示: "IDは英大文字、小文字、数字のみ利用可能です"
- ID入力フィールドが赤色（invalid）で表示される
- 「登録する」ボタンが無効化されたまま（disabled）
- リアルタイムバリデーションが正常に動作
ID フィールドが赤く表示され、適切なエラーメッセージが表示されました。

 パスワードテスト（異常系 1）
記号が不足しているパスワードのテスト：
**テスト内容**:
- 仕様に沿ったIDを入力
- 記号が不足しているパスワードを入力
- 不足している文字種類の表示確認

**入力値**:
- ID: `User123`（仕様に沿っている）
- パスワード: `Pass123`（記号が不足）

**結果**: ✅ 成功

**確認できた内容**:
- ID入力フィールドが緑色（valid）で表示される
- パスワードエラーメッセージが表示: "パスワードに以下の文字種類が不足しています: 記号"
- 不足している文字種類がリスト表示: "記号"
- パスワード要件チェックで記号が❌、その他（英大文字、英小文字、数字）が✅
- 「登録する」ボタンが無効化されている

**デバッグ可否**: ✅ 可能
- Connect to Browser機能で不足している文字種類を確認できる
- パスワード要件チェックの状態を確認できる
- エラーメッセージの内容を確認できる
IDは問題なく、パスワードに記号が不足していることが正確に検出されました。

 パスワードテスト（正常系）

仕様に沿った正しいパスワードのテスト：
**テスト内容**:
- 仕様に沿った完全なID/パスワードを入力
- 登録が可能であることを確認
- 登録完了ページの表示確認

**入力値**:
- ID: `User123`（仕様に沿っている）
- パスワード: `Pass123!`（すべての文字種類を含む）

**結果**: ✅ 成功

**確認できた内容**:
- ID入力フィールドが緑色（valid）で表示される
- パスワード入力フィールドが緑色（valid）で表示される
- パスワード要件チェックがすべて✅になる
- エラーメッセージが表示されない
- 「登録する」ボタンが有効化される
- 登録が正常に完了
- 登録完了ページが表示される
  - 登録番号: #1
  - ID: User123
  - 登録日時: 2025-12-04 02:04:42

**デバッグ可否**: ✅ 可能
- Connect to Browser機能で正常な入力時の状態を確認できる
- 登録成功時の動作を確認できる
すべての要件を満たす ID/パスワードを入力することで、正常に登録が完了しました。

 パスワードテスト（異常系 2）
複数の文字種類が不足しているパスワードのテスト：
**テスト内容**:
- 複数の文字種類が不足しているパスワードを入力
- 不足している文字種類がすべて表示されることを確認

**入力値**:
- ID: `Test456`（仕様に沿っている）
- パスワード: `password`（英大文字、数字、記号が不足）

**結果**: ✅ 成功

**確認できた内容**:
- エラーメッセージが表示: "パスワードに以下の文字種類が不足しています: 英大文字, 数字, 記号"
- 不足している文字種類がリスト表示:
  - 英大文字
  - 数字
  - 記号
- パスワード要件チェックで以下が❌:
  - 英大文字（A-Z）
  - 数字（0-9）
  - 記号（!@#$%など）
- パスワード要件チェックで以下が✅:
  - 英小文字（a-z）
- 「登録する」ボタンが無効化されている

**デバッグ可否**: ✅ 可能
- Connect to Browser機能で複数の不足している文字種類を確認できる
- どの文字種類が不足しているかを明確に把握できる
複数の不足要素が正確に検出され、表示されました。

3 つのサイトを通じた検証により、Connect to Browser 機能の実用性が確認できました。

自然言語による簡潔な指示のみで、AIエージェントが自律的にデバッグを実行し、スクリーンショットによるエビデンスの取得まで完了しています。

詳細なテストシナリオや手順書を作成することなく、包括的なWebサイトの検証が実現できることが実証されました。
これらの検証を通じて、特に印象的だったのは、サイトの作成からサイトのテストまで、Cursor のAIエージェントに指示するのみで済んだという点です。開発とテストの両方を同じ環境で完結できる利便性を実感しました。

 補足：他のテスト自動化ツールとの関係Connect to Browser 機能について検証を進める中で、AIを活用したテスト自動化ツールは他にも多数存在することがわかりました。ここでは、Connect to Browser 機能の位置づけについて簡単に整理します。

 テスト自動化ツールの分類AIによるブラウザ操作・テスト自動化ツールは、大きく以下のように分類できます：

 1. 開発統合環境型
代表例：Cursor Connect to Browser

特徴：コードエディタ内で完結、開発フローとの統合性が高い

対象ユーザー：開発者

 2. 専用テスト自動化ツール
代表例：Autify（日本製）、MagicPod（日本製）、Mabl、Testim、Applitools

特徴：ノーコード、セルフヒーリング機能、CI/CD統合

対象ユーザー：QAエンジニア、非エンジニアテスター

 3. ブラウザ自動化ライブラリ
代表例：Playwright（Microsoft製）、Puppeteer（Google製）

特徴：プログラマブル、高い柔軟性と制御性

対象ユーザー：開発者、自動化エンジニア

 Connect to Browser の位置づけConnect to Browser 機能は開発統合環境型に分類されます。専用テスト自動化ツールと比較した場合の特徴は以下の通りです：


観点
Connect to Browser
専用テスト自動化ツール


主な目的
開発中の動作確認
本格的なQA・テスト自動化

環境
VSCode内統合
専用UI/クラウド

学習コスト
低い（自然言語のみ）
中程度

セルフヒーリング
なし
あり

CI/CD統合
限定的
充実


 使い分けの提案
 Connect to Browser が適している場面開発中のプロトタイプ検証
簡易的な動作確認・デバッグ
コードエディタから離れずに作業したい場合
個人プロジェクトでの動作確認

 専用ツールが必要な場面継続的なリグレッションテスト
非エンジニアによるテスト作成
大規模テストスイートの管理
クロスブラウザ・クロスデバイステスト
Connect to Browser 機能は、開発初期段階での検証や簡易的な動作確認に最適です。一方で、本格的なQA体制を構築する場合は、専用のテスト自動化ツールの導入を検討することをお勧めします。

開発者にとっては、開発フローに統合された手軽さが大きな強みとなる機能だと言えます。

 まとめConnect to Browser 機能について様々な検証を行った結果、以下のことが分かりました。

 機能の特徴
自然言語での指示：AIエージェントへの自然言語による指示で、Webサイトを操作できる手軽さ

幅広い操作範囲：情報収集から簡単なデバッグまで、一通りの操作が可能

開発効率の向上：Cursor から離れることなく、ブラウザ操作とデバッグを実行できる

 活用の可能性Connect to Browser 機能は、以下のような場面で特に有用です：

開発中のWebアプリケーションのテスト：実装したサイトを即座にテスト可能

UIの動作確認：複雑なユーザーフローの検証を自動化

デバッグ作業の効率化：エラーの検出と原因の特定を支援

ドキュメント作成：スクリーンショットと共に動作を記録
Connect to Browser 機能は、Web開発のワークフローを大きく改善する可能性を持つ機能だと感じました。
観点	Connect to Browser	専用テスト自動化ツール
主な目的	開発中の動作確認	本格的なQA・テスト自動化
環境	VSCode内統合	専用UI/クラウド
学習コスト	低い（自然言語のみ）	中程度
セルフヒーリング	なし	あり
CI/CD統合	限定的	充実
はじめに

Connect to Browser 機能とは

機能概要

主な機能

1. ページナビゲーション

2. ページ情報の取得

3. ページ操作

4. 高度な操作

使用方法

前提条件

ページへのアクセスと情報取得

フォーム入力の自動化

アプリケーションテスト

活用シーン

Webアプリケーションのデバッグ

データ収集と分析

UI/UXの検証

自動化タスク

実践：基本的な使用例

1. Webサイトの確認

2. Webサイトの詳細確認

複数Webサイトの巡回

3. エラーハンドリングの確認

Webサイトの実装と検証

1. Connect to Browser テスト専用サイト

ホームページの確認

フォーム入力と送信テスト

インタラクティブ要素のテスト

API エンドポイントの呼び出しテスト

2. 映画予約サイト

トップページ

映画詳細ページ

座席選択ページ

予約確認ページ

予約完了ページ

予約一覧ページ

3. ID・パスワード登録サイト

IDテスト（異常系）

パスワードテスト（異常系 1）

パスワードテスト（正常系）

パスワードテスト（異常系 2）

補足：他のテスト自動化ツールとの関係

テスト自動化ツールの分類

1. 開発統合環境型

2. 専用テスト自動化ツール

3. ブラウザ自動化ライブラリ

Connect to Browser の位置づけ

使い分けの提案

Connect to Browser が適している場面

専用ツールが必要な場面

まとめ

機能の特徴

活用の可能性

Discussion
