ブラウザエージェントツールを使用したWebアプリの構築とテスト

ブラウザエージェントツールを使用すると、AIが閉じた開発ループ内でWebアプリケーションを自律的に構築および検証できるようになります。エージェントはHTML、CSS、JavaScriptを作成し、統合ブラウザでアプリを開いて機能を検証し、コンソールエラーや視覚的検査を通じて問題を特定し、手動介入なしで問題を修正できます。

このガイドでは、ブラウザエージェントツールを使用して電卓アプリを構築し、エージェントが自動テストを通じてバグを発見・修正する様子を確認する手順を説明します。

前提条件

このガイドを完了するには、以下が必要です

• コンピュータにインストールされたVisual Studio Code
• GitHub Copilotのサブスクリプション
• workbench.browser.enableChatTools VS Codeで開く VS Code Insidersで開く 設定で有効にされたブラウザエージェントツール

ブラウザエージェントツールの仕組み

ブラウザエージェントツールを有効にすると、エージェントは統合ブラウザ内のページを読み取り、操作できるツールにアクセスできるようになります。これらのツールには以下が含まれます

• ページナビゲーション: openBrowserPage, navigatePage
• ページコンテンツと外観: readPage, screenshotPage
• ユーザーインタラクション: clickElement, hoverElement, dragElement, typeInPage, handleDialog
• カスタムブラウザ自動化: runPlaywrightCode

デフォルトでは、エージェントが開いたページはプライベートなメモリ内セッションで実行され、他のブラウザタブとCookieやストレージを共有しません。これにより、エージェントがアクセスできるブラウジングデータを制御できます。

VS Codeの統合ブラウザの詳細をご覧ください。

ステップ 1: エージェントのブラウザツールを有効にする

エージェントがブラウザツールを使用する前に、チャットツールピッカーで明示的に有効にする必要があります。

1. チャットビューを開き（⌃⌘I (Windows, Linux Ctrl+Alt+I)）、エージェントのドロップダウンからAgentを選択します。

2. チャット入力領域にあるToolsボタンを選択して、ツールピッカーを開きます。

3. すべてのブラウザツールが有効になっていることを確認します（これらはBuilt-in > Browserの下にグループ化されています）。

   

これで、エージェントはこれらのツールを使用してWebページを操作できるようになります。

ステップ 2: エージェントに電卓の作成を依頼する

ブラウザツールを有効にした状態で、エージェントにシンプルな電卓アプリケーションを作成するよう依頼します。

1. 新しいプロジェクトフォルダを作成し、VS Codeで開きます。

2. チャットビューに以下のプロンプトを入力します

   Create a calculator with buttons for digits 0-9, operations (add, subtract, multiply, divide), clear, and equals. Use HTML, CSS, and JavaScript. Style it with a clean, modern design.
   

3. エージェントが index.html、styles.css、script.js を作成する間、生成されたファイルを確認します。

4. Keep（保持）を選択して、ファイルをワークスペースに保存します。

エージェントが電卓アプリケーションの基本構造を構築しました。

ステップ 3: エージェントに電卓のテストを任せる

次に、エージェントに統合ブラウザで電卓を開き、正しく動作するか検証するよう依頼します。

1. チャットビューに以下のプロンプトを入力します

   Open the calculator in the browser and test if all the operations work correctly.
   

2. エージェントが統合ブラウザで index.html を開き、ページコンテンツを解析して構造を理解し、クリックをシミュレートして結果を確認することで各ボタンや操作を体系的にテストする様子を見守ります。

エージェントは、どの操作が正しく機能するかを報告し、発見した問題を特定します。

ステップ 4: エージェントによるデバッグと修正を見守る

テスト中にバグを発見した場合、エージェントは自動的に問題を分析し、修正を実装します。

1. ゼロ除算チェックを削除して、バグを導入してみましょう

   function calculate() {
       if (!operator || shouldReset) return;
   
       const a = parseFloat(previous);
       const b = parseFloat(current);
       let result;
   
       switch (operator) {
       case '+': result = a + b; break;
       case '-': result = a - b; break;
       case '*': result = a * b; break;
       case '/': result = a / b; break;
   }
   

2. エージェントに除算操作をテストさせ、発見した問題を修正するよう依頼します

   Verify the division operation works correctly. If you find any issues, fix them.
   

3. エージェントがゼロ除算時にエラーに遭遇し、コードを分析・修正し、最後にバグ修正を検証する様子を見守ります。

エージェントは、ブラウザの自動化を使用して、構築、テスト、デバッグ、修正という完全な開発サイクルを完了しました。

ステップ 5: ブラウザページをエージェントと共有する（オプション）

Webページを手動で開き、分析やインタラクションのためにエージェントと明示的に共有することもできます。デフォルトでは、エージェントは自身が開いたWebページしか操作できません。

1. コマンドパレット（⇧⌘P (Windows, Linux Ctrl+Shift+P)）からBrowser: Open Integrated Browserコマンドを実行して、統合ブラウザを開きます。

2. エージェントに分析または操作させたいWebページに移動します。

3. ブラウザのツールバーにあるShare with Agent（エージェントと共有）ボタンを選択します。

   ブラウザタブ上の視覚的インジケータにより、ページがエージェントとアクティブに共有されていることが示されます。

4. 共有ページに対してエージェントにアクションを実行するよう依頼します

   What is the main heading on this page? Click the first link and tell me where it goes.
   

エージェントは共有ページにアクセスし、ユーザーの代わりに操作を実行できるようになります。終了したら、再度Share with Agentボタンを選択してアクセスを取り消します。

これらのシナリオを試す

ブラウザエージェントツールの仕組みが理解できたので、以下のシナリオを試して、さまざまなユースケースを探ってみましょう

• フォームバリデーションのテスト: お問い合わせフォームを構築およびテストして、バリデーションルール、エラーメッセージ、および送信成功を確認する

• レスポンシブレイアウトの検証: さまざまなビューポートサイズでページのスクリーンショットを撮り、レスポンシブな動作（例：ナビゲーションメニュー付きのランディングページ）を確認する

• 認証フローのテスト: ログインページにおける認証情報の検証、エラーハンドリング、およびリダイレクトの成功をテストする

• インタラクティブ機能のテスト: ユーザーインタラクションと状態管理を確認する

• アクセシビリティ監査: Webページに対して、altテキストの欠落、見出しの階層、キーボードナビゲーション、コントラスト比の問題がないかチェックする

関連リソース

• 統合ブラウザー
• VS CodeにおけるAIのコアコンセプト
• エージェントの概要
• Copilotでのテスト