编程智能体如何自己在真实浏览器中测试我的 Web 应用？

只要有一个能操作的浏览器，编程智能体就能自己测试你的 Web 应用。想让智能体在工作过程中随手检查，就添加 Playwright MCP 这样的浏览器自动化服务器，或者 Playwright CLI。想把检查保留下来，就让智能体编写并运行 Playwright 或 Puppeteer 测试。在 MAO 中，把智能体连线到浏览器门户，它就会用 mao portal 操作一个实时的 Chromium 页面，这个页面和它的终端在同一块画布上，你可以看着它操作。

智能体自己测试 Web 应用需要什么？#

它需要三样东西：打开并操作页面的方式、读取页面内容的方式，以及证明结果的方式。下面每种方案都提供这三样，只是形式不同。

• 操作： 打开 URL、点击、填写字段、按键。
• 读取： 页面的结构（无障碍树）、文本或截图。
• 证明： 一张截图，或者一个能给你看的通过的测试。

各方案的区别在于浏览器在哪里运行、你能不能看到它，以及检查在对话结束后是否还在。

通过 MCP 进行浏览器自动化是怎么工作的？#

智能体调用 MCP 服务器提供的浏览器工具。Playwright MCP 是“一个使用 Playwright 提供浏览器自动化能力的 Model Context Protocol（MCP）服务器”，它基于页面的无障碍树工作，而不是基于像素。

用一条命令把它添加到 Claude Code（需要 Node.js 18 或更高版本）：

claude mcp add playwright npx @playwright/mcp@latest

之后智能体就有了 browser_navigate、browser_snapshot（页面的无障碍快照）、browser_click、browser_type、browser_fill_form 和 browser_take_screenshot 等工具。它的 README 指出，智能体不能根据截图操作，而是根据快照操作。浏览器默认在可见窗口中打开，--headless 会把它隐藏。--device "iPhone 15" 可以模拟手机。

它默认保留一个持久的配置文件，所以登录状态会在会话之间保留；--isolated 把配置文件放在内存中，浏览器关闭时丢弃。

同一份 README 建议，编程智能体使用 Playwright CLI 及其技能可能效果更好，因为 CLI 调用消耗的 token 更少。用 npm install -g @playwright/cli@latest 安装，再用 playwright-cli install --skills 把技能交给你的智能体。除非你用 --headed 打开浏览器，否则它以无头模式运行。

智能体如何编写并运行自己的浏览器测试？#

让智能体把检查写成测试并运行。测试留在代码仓库里，下一次修改会经过同样的检查，CI 也可以运行它。

使用 Playwright Test 时，智能体用 npm init playwright@latest 搭建项目，用 npx playwright test 运行测试。测试默认以无头模式运行；--headed 显示浏览器，--ui 打开 Playwright 的 UI 模式。npx playwright show-report 打开 HTML 报告。Playwright 在 Chromium、WebKit 和 Firefox 中运行测试。

智能体可能为结账页面写的测试：

import { test, expect } from '@playwright/test';

test('checkout shows the confirmation', async ({ page }) => {
  await page.goto('http://localhost:3000/checkout');
  await page.getByRole('textbox', { name: 'Email' }).fill('test@example.com');
  await page.getByRole('button', { name: 'Pay' }).click();
  await expect(page.getByRole('heading', { name: 'Thank you' })).toBeVisible();
  await page.screenshot({ path: 'checkout.png', fullPage: true });
});

另一个常用的库是 Puppeteer：“一个 JavaScript 库，提供高层 API，通过 DevTools Protocol”或 WebDriver BiDi“控制 Chrome 或 Firefox”。npm i puppeteer 会在安装时下载兼容的 Chrome，它默认以无头模式运行。智能体用同样的方式针对它编写脚本。

MAO 浏览器门户是怎么工作的？#

浏览器门户是一个实时的 Chromium 页面，位于 MAO 画布上、你的终端旁边。把智能体的终端连线到它，这个智能体就能用 mao portal 操作页面；其他智能体不能。

1. 1选择 New portal，把它放到画布上，在地址栏中输入你的应用地址。
2. 2把智能体的终端连接到门户。
3. 3智能体运行 mao portal navigate <portal> <url> 打开页面。
4. 4它用 info、screenshot 或 snapshot 检查页面，用 click、fill、type、key、scroll、text 或 evaluate 与页面交互。
5. 5完成后，它运行 mao portal close <portal>。

每条命令都会检查连线是否还在，所以删除连线就收回了浏览器。这些命令操作的是已经打开的门户，它们自己不会启动浏览器。门户需要你的机器上安装了 Chromium 浏览器，例如 Chrome；MAO 会在 Homebrew、/Applications 以及 Windows 和 Linux 的常见安装位置中查找。

智能体测试表单时，有几个细节很重要：

• 密码或一次性验证码字段只向智能体显示是否已填写，在快照中以及在 mao portal text 和 mao portal html 中都是如此。
• fill 之后会检查字段里实际的内容，字段不能一次接受输入时，会逐个按键输入。
• 点击被隐藏、在屏幕外或被遮挡的元素时，会报告错误，而不是报告成功。
• 重新打开门户时只保留当前标签页。浏览器配置文件数据、弹出窗口和下载不包括在内。

这些方案怎么比较？#

智能体如何测试对结账页面的修改？#

下面是使用 MAO 浏览器门户的完整流程：智能体修改结账页面，打开它，填写表单，截图，然后告诉你发生了什么。

1. 1启动应用的开发服务器。
2. 2在智能体的终端旁边放一个浏览器门户，在其中打开结账页面的本地地址，并把智能体的终端连接到门户。
3. 3在一条提示词里同时交代任务和检查（见下文）。
4. 4智能体修改代码，然后用 mao portal navigate 在门户中打开页面。
5. 5它运行 mao portal snapshot 找到表单字段和支付按钮，用 fill 填写每个字段，用 click 按下按钮。
6. 6它对结果运行 mao portal screenshot，如果需要准确的错误或确认信息，就用 mao portal text 读取页面。
7. 7它报告改了什么、页面显示了什么，并附上截图。如果有东西坏了，它修复代码并重新检查。

提示词：

Move the coupon field above the card details on the checkout page.
Then open the checkout page in the portal you are connected to, fill
the form with test data, pay, and take a screenshot of the result.
Tell me what you changed and whether checkout still reaches the
confirmation screen.

智能体用来打开、读取和截取页面的命令：

mao portal navigate <portal> http://localhost:3000/checkout
mao portal snapshot <portal>
mao portal screenshot <portal>

你在画布上的门户里看着这一切发生。使用 Playwright MCP 时流程相同，只是用 browser_navigate、browser_snapshot、browser_fill_form、browser_click 和 browser_take_screenshot 代替 mao portal 命令。流程跑通后，让智能体把它写成 Playwright 测试，这样检查就能保留下来。

什么时候需要改用设备门户？#

当你要测试的东西运行在手机上、而不是桌面浏览器里时，就用设备门户。Playwright 和 Puppeteer 在桌面浏览器引擎中模拟手机的屏幕尺寸、用户代理以及（Playwright 的）触控；MAO 设备门户里则是真实的 Android 模拟器、连接到电脑的 Android 手机，或 iOS Simulator。

• Android： 选择 New device portal，然后选一个模拟器或已连接的设备。MAO 需要 Android SDK 工具或一台已连接的设备，并通过 ANDROID_HOME、Homebrew 和 SDK 的默认文件夹查找 adb 和模拟器。
• iOS： 在装有 Xcode 的 Mac 上，设备门户可以显示一个已有的 iOS Simulator。模拟器在 Xcode 中创建和删除。智能体用 mao portal launch 启动应用时，可以读取应用的无障碍树。

连线的智能体用 info、screenshot 或 snapshot 检查设备，用 click、swipe、type、button、launch、terminate、boot 和 shutdown 控制设备。门户在屏幕上时，设备画面会实时传输；在屏幕外或已折叠的门户会停止传输。

常见问题#

资料来源#

• Playwright MCP README：Playwright MCP 是什么、基于无障碍树的方式、Claude Code 安装命令、Node.js 18、工具名称、默认可见、--headless、--device、持久配置文件和 --isolated，以及关于编程智能体使用 CLI 的说明。
• Playwright CLI README：安装和技能命令、默认无头以及 --headed。
• Playwright：安装：npm init playwright@latest、npx playwright test、--headed、--ui、HTML 报告和支持的浏览器。
• Playwright：编写测试：getByRole、fill、click 和 toBeVisible 断言。
• Playwright：截图：page.screenshot 和 fullPage。
• Playwright：模拟：对用户代理、屏幕尺寸、视口和触控的设备模拟。
• Puppeteer：Puppeteer 是什么、使用的协议、默认无头，以及安装时下载 Chrome。
• Puppeteer：page.emulate()：设备尺寸和用户代理模拟。
• 浏览器门户和设备门户：门户能做什么、对 Chromium 的要求以及 MAO 在哪里查找它。
• 打开浏览器门户：放置门户、门户的控件以及重新打开时保留什么。
• 让智能体操作已授权的浏览器：mao portal 命令和连接检查。
• 操作 Android 设备门户：Android 设置、设备命令和画面传输。
• 查看 iOS Simulator 门户：仅限 macOS 的 iOS Simulator 门户。
• MAO 0.11.6 更新说明：密码和一次性验证码遮盖、fill 检查和点击错误。
• MAO 0.8.0 更新说明：iOS Simulator 支持、启动时读取无障碍树，以及 MAO 如何查找 Chromium 和 Android 工具。
• MAO 0.11.0 更新说明：智能体使用的命令是 mao。

检查于 2026-10-28。