1. 简介
测试 Web 应用可能是一项繁琐的任务。传统的界面测试常常让人感觉像是在与脆弱性作斗争。您发现自己需要编写复杂的脚本、管理脆弱的 CSS 和 XPath 选择器，并且需要费尽周折才能验证简单的用户流程。
但如果只需用自然语言告诉智能体要测试什么，它就能完成测试，那会怎么样？
在此 Codelab 中，我们将探索如何使用 Gemini CLI 和 BrowserMCP 等多模态工具。您将了解如何使用自然语言创建和运行自动化界面测试。请注意，本 Codelab 不需要您预先了解界面测试框架和工具。
学习内容
- 什么是 Model Context Protocol (MCP)，以及它为何能颠覆行业格局。
- BrowserMCP 如何使 AI 智能体能够控制网络浏览器。
- 如何通过 Gemini CLI 运行自动化界面测试。
- 了解智能体技能及其优势。
- 教导代理使用 Playwright 技能。
- Antigravity 浏览器子代理的快速概览。
- 浏览器控制的其他用例。
您将执行的操作
- 设置您的开发环境
- 探索需要测试的演示应用。
- 使用 Gemini CLI 通过 BrowserMCP 与应用互动。
- 通过代理技能教代理如何使用 Playwright。
2. 前提条件
在深入了解精彩内容之前，我们先来确保您已准备好所需的一切。
此 Codelab 使用了 Gemini CLI、MCP 工具、智能体技能和 React 演示应用。
工具
本实验假设您已具备以下条件：
- Chrome 浏览器
- Gemini CLI（本身依赖于 nodejs）
- Git
这些说明假定您使用的是 Linux（或 WSL）或 macOS 环境。如果您使用的是 Windows（像我一样），可以按照 WSL 中的说明操作。
（请注意，
BrowserMCP 无法在 Google Cloud Shell 中运行
，因为它只会连接到在同一台机器上运行的本地浏览器。）
创建 Google Cloud 项目
如果您已有 Gemini API 密钥，则可以使用该密钥并跳过此步骤。
否则，您需要一个 Google Cloud 项目才能继续学习。我们不会部署任何 Google Cloud 服务，但您需要该项目来关联 Gemini API 密钥。（您需要此密钥才能使用 Gemini。）
如果您熟悉 Google Cloud，可以点击此处创建一个新项目。或者，您也可以直接在 Google AI Studio 中创建 Google Cloud 项目。
免费创建 Gemini API 密钥
现在，您将在 Google AI Studio 中创建 Gemini API 密钥。点击“获取 API 密钥”。
您会看到类似如下的内容：
如果您有现有密钥，系统会在此处列出。如需创建新密钥，请点击“创建 API 密钥”。
您可以在此处选择现有的 Google Cloud 项目，也可以继续创建新项目。我在这里创建了一个名为 agentic-ui-demo 的新项目：
至此，我们已经拥有一个项目和关联的 Gemini API 密钥。我们尚未启用结算功能，因此只能使用慷慨的免费配额。不过，如果您需要更多配额，可以点击“设置结算”来启用结算功能。
设置开发环境
我已在 GitHub 上创建了一个演示代码库。它包含一个可用于界面测试的示例应用。在本地终端中运行以下命令，克隆该代码库：
git clone https://github.com/derailed-dash/agentic-ui-testing cd agentic-ui-testing
接下来，复制示例 .env.template 文件，并将副本命名为 .env。您可以在编辑器中执行此操作，也可以直接运行以下命令：
cp .env.template .env
使用您自己的 API 密钥更新此 .env 文件。（请注意：切勿将包含 API 密钥等信息的 .env 文件提交到版本控制系统！）最简单的方法是在编辑器中打开该文件。
现在，我们来加载环境变量：
source .env
我创建了一个 Makefile，让您可以轻松设置环境来启动演示版应用。我们运行该文件来初始化环境：
make install
3. 我们的演示应用
我们今天要测试的应用是 Dazbo Omni-Dash，这是一个未来感十足的深色主题信息中心，用于管理安全遥测数据。（是的，这是氛围编程！）
为什么选择此应用？
它旨在提供逼真的测试界面，其中包含：
- 模拟身份验证：需要特定凭据的登录流程。
- 动态内容：模拟实时数据的遥测卡片和安全日志。
- 互动状态：根据用户操作而变化的导航菜单和表单输入。
- 现代技术：采用 React 和 Vite 构建，可提供快速、响应迅速的体验。
启动应用
如需启动应用，只需运行以下命令：
make dev
开发服务器应会很快启动，并且应用将可通过 http://localhost:5173 访问。
我们可以点击该链接，在浏览器中打开应用。只需让此进程在终端中运行即可。我们将在单独的终端会话中执行后续终端命令。
4. 界面测试的挑战
众所周知，传统界面测试很难正确执行，维护起来更是难上加难。常见痛点包括：
- 测试“不稳定性”：由于时间安排问题、竞态条件或加载缓慢的资源而导致测试在一分钟内通过，下一分钟失败。
- 脆弱的选择器：依赖于特定的 DOM 结构（例如 div > div > button），这些结构在界面稍作调整时就会失效，导致需要不断维护脚本。
- 学习曲线陡峭：要求开发者掌握复杂的特定于网域的语言和特定于框架的怪癖（Cypress、Selenium、Playwright），才能实现基本的点击自动化。
- 环境对等性：难以复制的应用状态和清理测试数据的开销。
我们需要一种侧重于意图而非实现的测试方法。
5. MCP 救援
Model Context Protocol (MCP) 是一种开放标准，可让 AI 模型和智能体与外部工具、API 和数据进行交互。您可以将其视为通用适配器，使模型和智能体能够找到并执行其有权访问的工具。
传统上，将大语言模型 (LLM) 与外部数据和工具集成需要开发者为每个新数据源编写自定义的硬编码 API 连接，从而导致“M x N”集成问题，即每新增一个模型和工具都会增加维护负担。Model Context Protocol (MCP) 通过移除编排这些功能所需的特定代码来解决此问题。开发者无需明确编写复杂的执行工作流，而是可以依靠 LLM 来解读用户的自然语言请求，并动态推理出要使用的工具。
当用户发出自然语言命令（例如“前往 localhost:5173，以‘admin’身份登录，然后点击‘提交’按钮”）时，LLM 会发现可用的功能，并生成结构化请求来调用特定工具。MCP 客户端充当翻译器，将此请求路由到指定的 MCP 服务器，该服务器会执行操作或提取数据，并将上下文返回给模型。这样一来，AI 就可以自主行动，而无需开发者对特定执行路径进行硬编码。
由于 MCP 创建了一个通用标准（通常被称为“AI 应用的 USB-C 接口”），因此它实现了大规模的开箱即用型可重用性。开发者只需构建一次 MCP 服务器，任何兼容 MCP 的 AI 主持人都可以立即连接到该服务器，从而消除 M x N 集成问题。您不再需要为每个平台构建自定义 API 桥接器；相反，您可以利用预构建的开源 MCP 服务器生态系统来处理 GitHub、Slack、数据库等常见服务，直接将它们插入到代理工作流中。这种模块化、即插即用的架构可确保，如果您日后更换 LLM 提供商或升级工具，核心集成基础架构将完全保持不变。
6. 使用 BrowserMCP 实现自动化
什么是 BrowserMCP？
这是我们今天要使用的第一个工具。BrowserMCP 是一款 MCP 服务器，可为 AI 智能体提供与网络浏览器互动所需的“眼睛”和“双手”。简而言之，它会模拟人类与浏览器的互动。它是开源的，您可以点击此处查看 GitHub 代码库。点击此处查看主要的 BrowserMCP 文档。
以下是该功能的部分功能：
- 它可以导航到网址。
- 它可以检查 DOM。
- 它可以点击按钮，并在表单中输入文字。
- 它可以拖放。
- 它可以读取浏览器控制台日志。
- 速度快：自动化操作在本地计算机上进行。
安装浏览器 MCP
如需使用 BrowserMCP，您需要执行以下两项操作：
- 将 BrowserMCP 扩展程序安装到 Chrome（或任何基于 Chromium 的浏览器）中。
- 为智能体配置 MCP 服务器。
如需安装该扩展程序，只需按照此处的说明操作即可。此过程只需几秒钟。安装完成后，点击扩展程序中的“连接”，以允许代理控制当前标签页。（显然，您希望当前标签页是运行演示应用的标签页！）
接下来，我们需要向客户端添加 MCP 配置：
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
您在哪里配置此设置？这取决于您的代理。例如，在 Gemini CLI 中：~/.gemini/settings.json。请参见以下示例：
使用 BrowserMCP 进行测试
现在，开始变魔术。首先，在新的终端会话中启动 Gemini CLI（通过运行 gemini）。（请注意，演示应用正在初始终端会话中运行。）在 Gemini CLI 中，运行 /mcp 以检查其是否已正确安装。您应该会看到一个工具列表，如下所示：
如果您之前未启动演示版应用，请立即启动：
make dev
我们需要在 Chrome 浏览器中打开该应用，并在该标签页中连接 BrowserMCP 扩展程序。按照 run 命令中的链接操作。然后，点击 BrowserMCP 扩展程序图标，再点击“连接”。
现在，我们可以使用 Gemini CLI 运行测试了。将此提示复制并粘贴到 Gemini CLI 中：
Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.
Gemini CLI 可能会先检查演示应用是否正在指定端口上运行。然后，该工具会提示您确认其计划采取的操作：
允许 Gemini CLI 在此会话中运行所有 BrowserMCP 工具。然后返回到浏览器，观看自动互动！
关于上述提示，请注意以下几点：
- 我们首先指示代理在应用已登录的情况下退出登录。请注意，我们无需告知代理点击“退出网关”等特定文字。它足够智能，可以确定要点击的内容。
- 登录并呈现主页面后，代理会捕获遥测信息。同样，我们无需告知代理在特定功能块中查找或匹配特定字词。因此，如果我们日后扩展或更改本页面中显示的信息，此提示仍会正常运行，并且输出仍会捕获到我们的 Markdown 表中。
很酷，对吧？
我们暂时不需要使用 BrowserMCP，因此请在浏览器中断开其连接。
7. 使用技能和 Playwright 实现自动化
BrowserMCP 的限制
BrowserMCP 非常出色，但存在一些限制。例如：
- 它需要已连接 BrowserMCP 扩展程序的现有浏览器会话。（它不会生成新会话。）
- 不支持非 Chromium 浏览器。
- 它需要运行一个单独的浏览器进程，该进程与 MCP 服务器位于同一台机器上。
- 它无法与本地文件系统搭配使用。例如，它无法执行以下操作：创建本地文件来存储屏幕截图证据，或者下载和存储来自 Web 应用的文件（例如可下载的 PDF）。
- 它具有不确定性。它会尝试执行您让它执行的操作，但本地状态（例如意外弹出的窗口）可能会中断互动。
- 它不支持“无头”操作，这意味着它无法在没有真实浏览器窗口的情况下在 CI/CD 流水线中运行。
Playwright
Playwright 是一款更加复杂的工具。这是一个成熟的开源浏览器自动化和测试框架。它可以执行许多 BrowserMCP 无法执行的操作，包括我上面提到的所有要点。
它更适合运行复杂、可靠且可重复的测试场景。它尤其适合处理长时间运行的会话，或者同时运行多个独立的会话。
但这种额外的功能也带来了更陡峭的学习曲线。
技能
幸运的是，我们不必直接学习如何使用 Playwright。不过，我们可以使用客服技能。
那么，代理技能究竟是什么？您可以将其视为一个紧密封装的领域专业知识包，当 AI 代理需要执行特定任务时，您可以将其交给 AI 代理。其中包含针对特定任务量身定制的说明、最佳实践，有时甚至包含辅助脚本。
真正巧妙之处在于：逐步披露。代理不会将所有可能的 API 文档和测试框架规则都塞进 LLM 的初始系统提示中（这会占用上下文窗口并消耗大量令牌），而只会在实际需要时读取技能。它使基准上下文保持精简，并及时提取详细的“操作方法”。当然，技能可以包含有关如何利用特定 MCP 服务器完成工作的说明。
可以将其想象成《黑客帝国》中的一个场景：智能体看到一个问题，意识到自己需要了解 Playwright，下载了这项技能，然后突然说：“我会功夫了。”Boom。即时专家。
如果您想详细了解技能，请参阅以下内容：
为什么技能非常适合 Playwright
在这里使用技能是个不错的选择。Playwright 功能非常强大，但其语法可能比较棘手。通过为代理提供 Playwright 技能，我们无需担心 LLM 产生过时的语法或编写脆弱的选择器。我们为它提供了一份精心挑选的权威行动指南，详细介绍了如何正确使用 Playwright。
我将使用 Playwright CLI 及其相关技能。
通过此方法，我们可以在本地安装 Playwright CLI，然后为代理提供使用该 CLI 所需的知识。为避免任何混淆，请注意：我不会安装任何 Playwright MCP 服务器。
安装
我们先安装开源 Microsoft Playwright CLI。如果您尚未执行此操作，请通过输入 /quit`` 退出 Gemini CLI。然后，在终端中执行以下操作：
# Pre-req: nodejs installed npm install -g @playwright/cli@latest # Install Playwright CLI globally npm install @playwright/test # Install Playwright test framework npx playwright install-deps # Install dependencies npx playwright install chromium chrome # Install browser binaries in Linux / WSL
现在，我们来添加技能。此命令会将技能子文件夹直接从 GitHub 下载到我们的 Gemini 技能文件夹中：
mkdir -p ~/.gemini/skills npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli
现在，我们可以对其进行测试了。
# Launch Playwright CLI with visible browser playwright-cli open https://playwright.dev --headed
这应该会生成一个浏览器会话，并打开指定的网址。
我还希望 Gemini 能够在“有头”模式下使用 Playwright，即使用可见的界面。但该技能并未告知 Gemini 如何执行此操作。因此，我已将以下行添加到 Core 部分中的 ~/.gemini/skills/playwright-cli/SKILL.md：
# Add the following under the "playwright-cli open" command # Run in headed mode so we can see the browser playwright-cli open https://playwright.dev --headed
使用 Playwright 进行测试
与之前一样，我们需要启动应用（如果尚未运行）。在初始终端会话中执行以下操作：
make dev
然后，在另一个终端会话中，我们暂时停用 BrowserMCP，以免代理对要使用的工具感到困惑。重新启动 Gemini CLI，然后运行：
/mcp disable browsermcp
现在，我们将让 Gemini 使用 Playwright 导航到我们的应用。但与 BrowserMCP 不同的是，我们无需先启动浏览器。Playwright 将通过本地进程为我们完成此操作。
在 Gemini CLI 中输入以下提示：
Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.
（与往常一样，Gemini CLI 会在运行任何工具之前征求您的许可。）
这里有什么不同之处？
- 我们无需先启动浏览器。
- 我们无需启动并连接浏览器扩展程序。
- 我们无需先告知代理注销。测试从“干净”会话实例化。
- 我们可以拍摄屏幕截图并将其保存为本地文件。
不久之后，您应该会在 output 文件夹中看到 dashboard.png 文件。
请注意，您会在 Gemini CLI 中看到工具调用正在执行，但不会看到浏览器界面。这是因为 Playwright 默认在“无头模式”下运行。
但如果您使用修改后的提示重新运行，您将能够看到界面：
Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.
不久后，Gemini CLI 输出应如下所示：
这有多棒？
8. 您可以在 Antigravity 中开箱即用！
Google Antigravity 包含 Browser Subagent，可提供与 Playwright CLI 类似的功能。当您在 Antigravity 中问问 Gemini 以交互方式启动网址时，它会自动启动此子代理。
此子代理会获取您的概括性目标（例如“检查登录表单是否正常运行”），通过屏幕截图和 DOM 直观地分析网页布局，并自行确定点击和按键操作。它本质上是一种视觉多模态 AI，可以像人类一样浏览网页。最棒的一点是什么？它会自动录制视频并截取屏幕截图，记录自己所做的一切，并将这些内容直接保存到您的本地工作区，作为其完成任务的直观证据。Antigravity 将这种视觉证据称为“伪影”。
面向 WSL 用户的注意事项：让浏览器代理在 Antigravity 中正常运行有点麻烦。我已设法 使其正常运行，但发现子代理在此环境中不稳定且不可靠。因此，这是我喜欢 Playwright CLI 的原因之一！
9. 浏览器自动化的其他使用场景
浏览器自动化不仅是为了确保登录按钮在周五下午部署之前正常运行。一旦意识到可以直接将 LLM 连接到浏览器，您就会发现一个全新的自制智能体项目世界。
如果您要构建自己的 AI 智能体，不妨考虑使用 BrowserMCP 或 Playwright CLI 等工具来完成繁重的工作，具体方法如下：
- 个人研究助理：假设您让智能体研究某个主题，但该网站需要登录并浏览复杂的菜单。您只需让智能体登录、找到数据并为您总结，而无需编写下周就会失效的自定义网络抓取工具。
- “转椅”集成者：我们都有一些没有 API 的旧版 Intranet 系统。您一定知道我说的是哪种情况，即您必须手动从系统 A 复制数据，然后将其粘贴到系统 B 中的表单中。具有浏览器自动化的代理可以充当通用粘合剂，读取旧版系统的屏幕并在新版系统中填写表单。
- 自动分类和补救：凌晨 3 点收到监控系统发出的 P1 提醒？代理可以自动打开特定的信息中心网址，读取图表或日志（使用其多模态视觉功能），并将摘要直接发布到您的 Slack 渠道中，从而在突发事件期间为您节省宝贵的时间。
这种方法的优点在于，您不再受可用 API 的限制。如果人工可以在浏览器中完成某项任务，您的代理也可以。
10. 总结
恭喜！您只需用简单的英语告诉 AI 代理您想让它做什么，即可构建并执行自动化、可靠的界面测试。无需使用脆弱的 CSS 选择器，也无需使用复杂的设置脚本。
您已经学习了以下内容：
- 界面测试不必令人头疼：通过专注于测试意图，而不是脆弱的 DOM 实现，我们可以大幅减少维护开销。
- 借助 Model Context Protocol (MCP)，您的智能体可以即插即用，访问各种工具、数据和环境。
- BrowserMCP 是一款出色的工具，可将智能体功能引入本地现有的 Chrome 会话。
- 借助技能和 Playwright CLI，您可以实现更高水平的可重复确定性自动化测试，而这一切都由循序渐进的披露功能提供支持。
- Antigravity 的浏览器子代理更进一步，开箱即可实现自主多模态导航和制品记录。
现在，开始行动起来，让无聊的事情自动化吧！
实用链接
如果您想深入了解我们今天介绍的工具和概念，请参阅以下资源：
Repo 代码
核心工具和框架
智能体概念和技能
其他