使用浏览器代理工具构建和测试 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. 通过命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）运行 Browser: Open Integrated Browser 命令来打开集成浏览器。

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 text）、标题层级错误、键盘导航问题以及颜色对比度不足的问题。

相关资源

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