Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

使用 Antigravity (AGY) CLI、BrowserMCP、Playwright 和浏览器代理自动执行界面测试

1. 简介

智能体 AI 革命正在改变我们构建软件的方式，让整个过程变得非常酷炫、令人兴奋且易于上手。以前需要开发者花费数月才能完成的任务和项目，现在只需使用智能体工具即可在一个会话中完成。

Web 应用测试是适合进行这种智能体转型的一个领域。传统上，测试 Web 应用是一项繁琐的任务，并且需要不断与脆弱性作斗争。但如果可以完全绕过这种复杂性呢？如果只需用简单自然的语言告诉代理要测试什么，然后让代理自行推理如何执行测试，会怎么样？

在此 Codelab 中，我们将探讨如何将 Antigravity CLI 与智能体技能和 BrowserMCP 等多模态 MCP 工具搭配使用。您将了解如何使用自然语言创建和运行自动化界面测试，并了解智能体工具如何处理复杂任务，让您作为构建者拥有超能力。

至关重要的是，虽然此 Codelab 侧重于界面自动化和浏览器远程控制的具体应用场景，但真正重要的是其基本原理以及它们所带来的无限可能。通过教导代理使用本地 CLI 和 MCP 服务器，我们可以委托处理复杂的任务流程，而这些任务流程是我们自己没有时间或专业知识来处理的。

学习内容

Antigravity CLI 是什么，以及它在 Antigravity 生态系统中的作用。
什么是 Model Context Protocol (MCP)，以及它为何能颠覆行业格局。
BrowserMCP 如何使 AI 智能体能够控制网络浏览器。
如何通过 Antigravity CLI 运行自动化界面测试。
了解智能体技能及其优势。
教导代理使用 Playwright 技能。
了解 Antigravity 的内置浏览器代理。
浏览器控制的其他用例。

实践内容

此 Codelab 使用了 Antigravity CLI、MCP 工具、智能体技能和 React 演示应用。

您将学习以下内容：

设置您的开发环境
探索需要测试的演示应用。
使用 Antigravity CLI 通过 BrowserMCP 与应用进行交互。
通过代理技能教智能体如何使用 Playwright。

2. Antigravity 生态系统

2026 年 5 月，Google 推出了新的 Antigravity 套件。这是对 Antigravity 的重大改版，并将其拆分为以下四款产品：

Antigravity 2.0，现在是桌面设备上专用的智能体优先“构建器”环境。值得注意的是，它本身不包含 IDE。相反，我们现在仅与智能体管理器互动。此界面旨在通过智能体开启“从构想到产品”的时代，而无需担心代码问题。许多没有编码背景的构建者会喜欢这一点。
Antigravity IDE，可提供更熟悉的 VS Code 式编码环境，由 Antigravity 智能体 Harness 提供支持。在此处，我们可以进行智能体辅助开发，并且始终可以看到代码。编码人员会感觉宾至如归。
Antigravity SDK，它提供支持 Antigravity 的框架和工具，但以 Python 智能体 SDK 的形式公开。通过从 google.antigravity 导入，我们可以以编程方式利用 Antigravity 的功能。
Antigravity CLI，这是非常出色的 Gemini CLI 的下一代产品。它仍然是一个以终端为主的环境，用于与 Gemini 模型互动。不过，新的 Antigravity CLI 是用 Go 构建的，您能明显感觉到它比 Gemini CLI 快得多，无论是在启动时还是在一般使用中。它与 Antigravity 2.0 和 IDE 采用相同的智能体“Harness”框架，因此可以在整个 Antigravity 套件中实现通用设置和配置。

虽然本实验侧重于使用 Antigravity CLI，但本实验中的所有操作也可以通过 Agy IDE 或 Agy 2.0 完成。

3. 前提条件

在深入了解精彩内容之前，我们先来确保您已准备好所需的一切。

工具

本实验假设您已具备以下条件：

Chrome 浏览器
Node.js
Antigravity CLI
Git

如需使用 Antigravity CLI，您需要通过 Google 进行身份验证。首次启动 agy 时，系统会自动通过默认的网络浏览器提示您进行 Google 登录。此选项提供充足的 Gemini 免费使用配额，并且不需要 Google Cloud 项目。如果您有 Gemini API 密钥或 Google Cloud 项目，也可以自行配置。

这些说明假定您在 Linux（或 WSL）或 macOS 环境中操作。如果您使用的是 Windows（像我一样），可以按照说明使用 WSL。

（请注意，BrowserMCP 无法从 Google Cloud Shell 运行，因为它只会连接到在同一台机器上运行的本地浏览器。）

设置开发环境

我已在 GitHub 上创建了一个演示代码库。它包含一个可用于界面测试的示例应用。在本地终端中运行以下命令，克隆该代码库：

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

我们提供了一个 Makefile，可让您轻松设置环境以启动演示应用。让我们运行该文件来初始化环境：

make install

# Or if you don't have make
npm install --prefix demo-app

4. 我们的演示应用

我们今天要测试的应用是 Dazbo Omni-Dash，这是一个未来感十足的深色主题信息中心，用于管理安全遥测数据。（是的，这是氛围编程！）

为什么选择此应用？

它旨在提供逼真的测试界面，其中包含：

模拟身份验证：需要特定凭据的登录流程。
动态内容：模拟实时数据的遥测卡片和安全日志。
互动状态：根据用户操作而变化的导航菜单和表单输入。
现代技术：采用 React 和 Vite 构建，可提供快速响应的体验。

启动应用

如需启动应用，只需运行以下命令：

make dev

# Or if you don't have make
npm run dev --prefix demo-app

开发服务器应会很快启动，并且应用将可通过 http://localhost:5173 访问。

我们可以点击该链接，在浏览器中打开应用。只需让此进程在终端中运行即可。我们将在单独的终端会话中执行后续终端命令。

5. 界面测试的挑战

众所周知，传统界面测试很难正确执行，维护起来更是难上加难。常见痛点包括：

学习曲线陡峭：开发者需要花费大量时间来掌握复杂的特定领域语言和框架特有的怪癖（例如 Selenium 或 Playwright），才能实现基本互动自动化。
脆弱的选择器和自动化：传统脚本依赖于刚性的 DOM 结构（例如 div > div > button）或特定的文本标签。如果您将“退出”按钮重命名为“注销”，会发生什么情况？或者，如果您将某个按钮移至完全不同的菜单，会发生什么情况？或者，如果您更改 HTML 的结构，会发生什么情况？当您执行这些操作时，传统测试工具会中断，导致需要不断维护脚本。
测试“不稳定性”：由于时间安排问题、竞态条件或素材资源加载缓慢，测试在一分钟内通过，下一分钟失败。
环境对等性：难以复制的应用状态和清理测试数据的开销。

意图与实现

为了解决这些问题，我们需要一种侧重于意图而非实现的测试方法。

通过利用智能体 AI 工具，我们可以创建可重复的自动化流程，完全不受细微的界面调整和结构性更改的影响。智能体不会对名称、标签或对象的确切层次结构进行硬编码，而是根据用户的自然语言意图执行操作。即使按钮移动或其标签略有变化，代理的多模态功能也能让其找到相应元素并成功完成任务。

6. 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 提供商或升级工具，您的核心集成基础设施将完全保持不变。

7. 使用 BrowserMCP 实现自动化操作

什么是 BrowserMCP？

这是我们今天要使用的第一个工具。BrowserMCP 是一种 MCP 服务器，可为 AI 智能体提供与网络浏览器互动所需的“眼睛”和“手”。简而言之，它会模拟人类与浏览器的互动。它是开源的，您可以点击此处查看 GitHub 代码库。点击此处查看主要的 BrowserMCP 文档。

以下是该功能的一些用途：

它可以导航到网址。
它可以检查 DOM。
它可以点击按钮，并在表单中输入文字。
可以拖放。
它可以读取浏览器控制台日志。
速度快：自动化操作在本地计算机上进行。

安装浏览器 MCP

如需使用 BrowserMCP，您需要执行以下两项操作：

将 BrowserMCP 扩展程序安装到 Chrome（或任何基于 Chromium 的浏览器）中。
在 Antigravity 配置中手动配置 MCP 服务器。

如需安装该扩展程序，只需按照此处的说明操作即可。此过程只需几秒钟时间。安装完成后，点击扩展程序中的“连接”，以允许代理控制当前标签页。（显然，您希望当前标签页是运行演示应用的标签页！）

接下来，我们在 Antigravity 中配置实际的 MCP 服务器。为此，我们将 browsermcp 服务器定义添加到全局 mcp_config.json 文件中。

创建或修改文件 ~/.gemini/config/mcp_config.json，并添加以下配置：

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

如需详细了解如何在 Antigravity 生态系统中设置 MCP 服务器和技能，请参阅以下资源：

使用 BrowserMCP 进行测试

现在，开始施展魔法。首先，我们将在新的终端会话中启动 Antigravity CLI（通过运行 agy）。（请注意，演示应用正在初始终端会话中运行。）在互动式 TUI 中，输入 /mcp 以验证有效工具的列表，并确保 browsermcp 可用。

如果您之前未启动演示版应用，请立即启动：

make dev

如果您尚未执行此操作，则需要在 Chrome 浏览器中打开该应用，并在相应标签页中连接 BrowserMCP 扩展程序。按照 run 命令中的链接操作。然后，点击 BrowserMCP 扩展程序图标，再点击“连接”。

现在，我们可以使用 Agy CLI 运行测试。将以下提示复制并粘贴到 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.

CLI 可能会先检查演示应用是否正在指定端口上运行。然后，它会提示您确认计划采取的工具操作。

允许 CLI 在此会话中运行所有 BrowserMCP 工具。然后返回浏览器，观看自动互动！

关于上述提示，请注意以下几点：

我们首先指示代理退出登录状态（如果应用已登录）。请注意，我们无需指示代理点击“退出网关”等特定文字。代理足够智能，能够自行确定要点击的内容。
登录并呈现主页面后，代理会捕获遥测信息。同样，我们无需告知代理在特定板块中查找或匹配特定字词。因此，如果我们日后扩展或更改此页面中显示的信息，此提示仍会有效，并且输出仍会捕获到我们的 Markdown 表格中。

很酷吧？

我们暂时完成了 BrowserMCP 的操作，因此请在浏览器中断开连接。

8. 使用技能和 Playwright 实现自动化

BrowserMCP 的限制

BrowserMCP 非常出色，但存在一些限制。例如：

它需要现有的浏览器会话，并且已连接 BrowserMCP 扩展程序。（它不会生成新的会话。）
不支持非 Chromium 浏览器。
它需要一个单独的浏览器进程在运行，该进程与 MCP 服务器位于同一台机器上。
它无法与本地文件系统搭配使用。例如，它无法执行以下操作：创建本地文件来存储屏幕截图证据，或者下载和存储来自 Web 应用的文件（例如可下载的 PDF）。
它是不确定的。它会尝试执行您让它执行的操作，但本地状态（例如意外的弹出式窗口）可能会中断互动。
它不支持“无头”操作，这意味着它无法在没有实际浏览器窗口的情况下在 CI/CD 流水线中运行。

Playwright

Playwright 是一款更加复杂的工具。这是一个成熟的开源浏览器自动化和测试框架。它可以执行许多 BrowserMCP 无法执行的操作，包括我上面提到的所有要点。

它更适合运行复杂、可靠且可重复的测试场景。它尤其适合处理长时间运行的会话，或者并行运行多个独立的会话。

但这种额外的功能也带来了更陡峭的学习曲线。

技能

幸运的是，我们不必直接学习如何使用 Playwright。相反，我们可以使用代理技能。

那么，代理技能究竟是什么？您可以将其视为一个紧凑的领域专业知识包，当 AI 智能体需要执行特定任务时，您可以将其交给 AI 智能体。其中包含针对特定任务量身定制的说明、最佳实践，有时甚至包含辅助脚本。

真正巧妙之处在于逐步披露。该代理不会将所有可能的 API 文档和测试框架规则都塞进 LLM 的初始系统提示中（这会占用上下文窗口并消耗大量令牌），而只会在实际需要时读取技能。这样可以保持基准上下文的简洁性，并及时提取详细的“操作方法”。当然，技能可以包含有关如何利用特定 MCP 服务器来完成工作的说明。

可以将其想象成《黑客帝国》中的一个场景：智能体看到一个问题，意识到自己需要了解 Playwright，然后下载了相关技能，突然之间就“学会了功夫”。瞬间成为专家。

如果您想详细了解技能，请参阅以下内容：

为什么技能非常适合 Playwright

在这里使用技能是个不错的选择。Playwright 功能非常强大，但其语法可能比较复杂。通过为代理提供 Playwright 技能，我们无需担心 LLM 产生过时的语法或编写脆弱的选择器。我们为它提供了一份精心挑选的权威行动指南，详细介绍了如何正确使用 Playwright。

我将使用 Playwright CLI 及其相关技能。

采用这种方法，我们会在本地安装 Playwright CLI，然后为代理提供使用该 CLI 所需的知识。为避免任何混淆，请注意：我不会安装任何 Playwright MCP 服务器。

安装

我们先来安装开源 Microsoft Playwright CLI。如果您尚未执行此操作，请通过输入 /quit`` 退出互动式 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，以免代理对要使用的工具感到困惑。重新启动 Antigravity CLI (agy)。我们可以通过 TUI 直接暂时停用 browsermcp 服务器：

在提示框内输入 /mcp，打开 MCP 管理面板。
使用箭头键（向上/向下）选择 browsermcp，然后按 Enter/Return 键。
向右移动以选择“停用”，然后按 Enter 键将其切换为关闭状态。

现在，我们将要求代理使用 Playwright 导航到我们的应用。但与 BrowserMCP 不同的是，我们无需先启动浏览器。Playwright 将通过本地进程为我们完成此操作。

在 Agy 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.

（与往常一样，CLI 在运行任何工具之前都会征求许可。）

这里有什么不同之处？

我们无需先启动浏览器。
我们无需启动并连接浏览器扩展程序。
我们无需先告知代理退出登录。测试是从“干净”的会话实例化的。
我们可以截取屏幕截图并将其保存为本地文件。

不久之后，您应该会在输出文件夹中看到 dashboard.png 文件。

请注意，您会在 Agy 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 record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Agy CLI 输出应如下所示：

这有多棒？

9. Antigravity 的内置浏览器代理

Google Antigravity 配备了自己的内置浏览器代理 ( Browser Subagent)，可提供开箱即用的浏览器自动化功能，无需您安装 Playwright CLI 等单独的工具。

运作方式

为了控制浏览器，内置浏览器代理直接通过 Chrome DevTools 协议 (CDP) 工作，从而无需在 Antigravity 2.0 和 IDE 中使用任何浏览器扩展程序或中间插件。

启动后，Antigravity 会通过 WebSocket 连接，经由本地调试端口连接到您的 Chrome 实例。代理提供的高级指令会直接转换为低级 CDP 命令，这些命令：

操纵网页 DOM（例如点击元素或输入文字）。
控制浏览器状态并触发导航。
捕获实时帧和视觉数据。

通过将直接 CDP 控制与视觉多模态分析相结合，子代理会获取您的概括性目标（例如“验证信息中心是否显示正确的遥测值”），直观地分析网页以确定所需的操作，然后自行执行这些操作。它还会自动录制视频并截取操作的屏幕截图，然后将这些内容直接保存到您的工作区中，作为测试作业的直观证据（制品）。

工具可用性

终端优先的 Antigravity CLI (Agy CLI) 尚不支持内置浏览器代理。不过，您现在可以在 Antigravity IDE 和 Antigravity 2.0 中直接使用它。希望在未来的版本中，Agy CLI 将支持浏览器代理！

面向 WSL 用户的注意事项：现在，在 WSL 下的 Antigravity 中运行浏览器代理比以前容易得多。您只需在 WSL 配置中启用“镜像”网络模式，而无需处理复杂的网络路由和端口转发。如需完整的分步演练，请参阅指南使用 Google Antigravity 解决 WSL 摩擦：Agy 2.0 和 Agy IDE 版。

10. 浏览器自动化的其他使用场景

浏览器自动化不仅是为了确保登录按钮在周五下午部署之前正常运行。一旦意识到可以直接将 LLM 连接到浏览器，您就会发现一个全新的自制代理项目世界。

如果您要构建自己的 AI 智能体，不妨考虑使用 BrowserMCP 或 Playwright CLI 等工具来完成繁重的工作，具体方法如下：

个人研究助理：想象一下，您让代理访问某个特定网址，并要求它研究某个主题，但该网站需要登录并浏览复杂的菜单。您只需告诉代理登录、导航到数据，然后让它为您总结数据，而无需编写下周就会失效的自定义网页抓取工具。
“转椅”集成者：我们都有一些没有 API 的旧版 Intranet 系统。您一定知道我说的是哪种情况，即您必须手动从系统 A 复制数据，然后将其粘贴到系统 B 中的表单中。具有浏览器自动化的代理可以充当通用粘合剂，读取旧版系统的屏幕并填写新版系统中的表单。
自动分诊和补救：凌晨 3 点，监控系统发出了 P1 级提醒？智能体可以自动打开特定的信息中心网址，读取图表或日志（使用其多模态视觉功能），并将摘要直接发布到您的 Slack 渠道中，从而在突发事件期间为您节省宝贵的时间。

这种方法的优点在于，您不再受可用 API 的限制。如果人类可以在浏览器中完成某项任务，您的代理也可以。

11. 总结

恭喜！您只需用简单的英语告诉 AI 智能体您想让它做什么，即可构建并执行自动化、可靠的界面测试。无需使用脆弱的 CSS 选择器，也无需复杂的设置脚本。

您已经学习了以下内容：

界面测试不必令人头疼：通过专注于测试的意图，而不是脆弱的 DOM 实现，我们可以大幅减少维护开销。
Model Context Protocol (MCP) 可让您的智能体以即插即用的方式访问各种工具、数据和环境。
BrowserMCP 是一款出色的工具，可将智能体功能引入本地现有的 Chrome 会话。
技能和 Playwright CLI 可实现更高水平的可重复、确定性自动化测试，所有这些都由循序渐进的披露功能提供支持。
Antigravity 的浏览器子代理通过引入开箱即用的自主多模态导航和制品记录功能，将这一过程提升到了新的高度。

现在，开始自动化处理那些无聊的事情吧！

12. 实用链接

如果您想深入了解我们今天介绍的工具和概念，请参阅以下资源：

Repo 代码

agentic-ui-testing GitHub 代码库 - 如果您觉得此 Codelab 有用，请为该代码库添加星标！

核心工具和框架

智能体概念和技能

其他