ブラウザエージェントツールを使用してWebアプリを構築・テストする

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

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

注意

ブラウザエージェントツールは現在実験的な機能であり、将来のリリースで変更される可能性があります。

前提条件

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

コンピュータにインストールされた Visual Studio Code
GitHub Copilot のサブスクリプション
workbench.browser.enableChatTools Open in VS Code Open in VS Code Insiders This setting is managed at the organization level. Contact your administrator to change it. 設定で有効化されたブラウザエージェントツール

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

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

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

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

VS Code の統合ブラウザについて詳しくはこちらをご覧ください。

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

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

チャットビューを開き（⌃⌘I (Windows, Linux Ctrl+Alt+I)）、エージェントのドロップダウンから Agent を選択します。
チャット入力領域の Tools ボタンを選択し、ツールピッカーを開きます。
すべてのブラウザツールが有効になっていることを確認します（Built-in > Browser の下にグループ化されています）。

これでエージェントはこれらのツールを使用してWebページを操作できます。

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

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

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

チャットビューで次のプロンプトを入力します

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.

エージェントが index.html、styles.css、script.js を作成する間、生成されたファイルを確認します。
Keep を選択して、ファイルをワークスペースに保存します。

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

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

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

チャットビューで次のプロンプトを入力します

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

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

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

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

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

ゼロ除算チェックを削除してバグを混入させてみましょう

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;
}

エージェントに除算操作をテストさせ、見つかった問題を修正するよう依頼します
```
Verify the division operation works correctly. If you find any issues, fix them.
```
エージェントがゼロ除算でエラーに遭遇し、コードを分析して修正し、最後にバグ修正を検証する様子を見守ってください。

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

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

コマンドパレット（⇧⌘P (Windows, Linux Ctrl+Shift+P)）から Browser: Open Integrated Browser コマンドを実行して、統合ブラウザを開きます。
エージェントに分析や操作をさせたいWebページに移動します。
ブラウザツールバーの Share with Agent ボタンを選択します。

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

共有ページでエージェントに操作を実行するよう依頼します

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

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

ヒント

共有ページは、Cookieやログイン状態を含む既存のブラウザセッションを使用します。エージェントが開いたページは分離された一時的なセッションを使用するため、他のブラウザタブとCookieやストレージを共有しません。

これらのシナリオを試す

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

フォームバリデーションのテスト: お問い合わせフォームを構築・テストし、エージェントに検証ルール、エラーメッセージ、送信成功を確認させる
レスポンシブレイアウトの検証: エージェントにさまざまなビューポートサイズでページのスクリーンショットを撮らせ、レスポンシブな動作（例：ナビゲーションメニュー付きランディングページ）を検証させる
認証フローのテスト: ログインページでエージェントに資格情報の検証、エラー処理、成功時のリダイレクトをテストさせる
対話機能のテスト: エージェントにユーザーインタラクションと状態管理を検証させる
アクセシビリティ監査: Webページで、代替テキストの欠落、見出しの階層、キーボード操作、コントラスト比の問題をエージェントにチェックさせる