使用浏览器代理工具构建并测试 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（浏览器）** 下）。

   

现在，代理可以使用这些工具与网页进行交互。

第 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 步：与代理共享浏览器页面（可选）

你也可以手动打开网页并显式地与代理共享，以便进行分析或交互。默认情况下，代理只能与它自己打开的网页进行交互。

1. 通过从命令面板运行 **Browser: Open Integrated Browser（浏览器：打开集成浏览器）** 命令来打开集成浏览器（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

2. 导航到你希望代理分析或与之交互的网页。

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（与代理共享）** 按钮以撤销访问权限。

尝试以下场景

既然你已经了解了浏览器代理工具的工作原理，请尝试以下场景以探索不同的用例

• 表单验证测试：让代理通过构建和测试联系表单来验证验证规则、错误消息和提交成功的情况

• 响应式布局验证：要求代理在不同视口尺寸下截取页面截图，并验证响应式行为（例如带有导航菜单的落地页）

• 身份验证流程测试：让代理测试登录页面中的凭据验证、错误处理和成功重定向

• 交互功能测试：让代理验证用户交互和状态管理

• 可访问性审计：要求代理检查网页是否存在缺失 alt 文本、标题层级混乱、键盘导航问题或颜色对比度不足的问题

相关资源

• 集成浏览器
• VS Code 中 AI 的核心概念
• 代理概述
• 使用 Copilot 进行测试