| name | browser-test |
| description | 基于 Playwright MCP 的浏览器自动化测试，支持页面交互、录制回放、接口验证、结合后端代码做端到端测试。当用户提到浏览器测试、页面测试、UI测试、录制操作、自动化测试、playwright 时激活。 |
🌐 浏览器自动化测试 Skill (Browser Auto Test)
基于 Playwright MCP Server 的浏览器自动化测试工具，支持：
- 实时操作浏览器（导航、点击、填写、截图）
- 录制人工操作并生成自动化脚本
- 结合后端代码做端到端验证
- 监控网络请求验证接口调用
使用方式：在聊天中输入 #browser-test 并描述测试需求。
前置条件：安装 Playwright MCP
第一步：确认 Node.js 环境
node --version
npx --version
如果未安装 Node.js，从 https://nodejs.org/ 下载 LTS 版本安装。
第二步：配置 Playwright MCP Server
在 Kiro 的 MCP 配置文件中添加 Playwright Server。
工作区配置（推荐，仅对当前项目生效）：
文件路径：项目根目录/.kiro/settings/mcp.json
用户全局配置（对所有项目生效）：
文件路径：~/.kiro/settings/mcp.json（Windows: C:\Users\<用户名>\.kiro\settings\mcp.json）
在 mcpServers 中添加以下配置：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"],
"disabled": false,
"autoApprove": []
}
}
}
第三步：安装 Playwright 浏览器
首次使用前需下载 Chromium 浏览器内核（约 184MB）：
npx -y playwright install chromium
如果网络较慢，可设置国内镜像：
set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright
npx -y playwright install chromium
$env:PLAYWRIGHT_DOWNLOAD_HOST="https://npmmirror.com/mirrors/playwright"
npx -y playwright install chromium
第四步：验证安装
重启 Kiro 或在命令面板搜索 "Reconnect MCP Server" 重新连接。
在 Kiro 的 MCP Server 面板中应能看到 playwright 状态为 running。
可选：连接已有 Chrome 浏览器（CDP 模式）
如果需要操作你正在使用的 Chrome 浏览器（观察你的手动操作）：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
然后 MCP 配置改为：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--cdp-endpoint", "http://localhost:9222"],
"disabled": false,
"autoApprove": []
}
}
}
使用示例
#browser-test
打开 http://localhost:3000 首页，验证页面加载是否正常
#browser-test
登录管理后台，检查用户列表分页功能
#browser-test
录制一个 IPO 认购申请的操作流程，生成自动化测试脚本
#browser-test
打开 Swagger UI，测试 /api/users 接口返回是否正确
#browser-test
对比后端 UserController 代码逻辑，验证前端页面数据展示一致性
核心能力
1. 实时浏览器操作
| 能力 | 说明 |
|---|
| 页面导航 | 打开 URL、前进后退、新标签页 |
| 元素交互 | 点击、双击、右键、拖拽、悬停 |
| 表单操作 | 输入文本、选择下拉框、勾选框、上传文件 |
| 键盘操作 | 按键、快捷键组合 |
| 等待机制 | 等待元素出现/消失、等待指定时间 |
| 截图 | 全页截图、元素截图 |
| JavaScript | 在页面中执行任意 JS 代码 |
| 网络监控 | 查看请求列表、请求/响应详情 |
| 控制台 | 捕获 console.log/error 信息 |
2. 录制与回放（三种方式）
方式一：Playwright Codegen 录制（推荐，最简单）
npx playwright codegen http://你的测试地址
npx playwright codegen --target java http://你的测试地址
npx playwright codegen --target python http://你的测试地址
npx playwright codegen --device="iPhone 14" http://你的测试地址
npx playwright codegen --save-storage=auth.json http://你的测试地址
npx playwright codegen --load-storage=auth.json http://你的测试地址
运行后会打开两个窗口：
- 一个浏览器窗口供你手动操作
- 一个代码窗口实时生成对应的自动化代码
操作完成后复制代码给我，我可以帮你优化、添加断言、参数化。
方式二：通过 MCP 逐步引导
- 我通过
browser_snapshot 获取页面结构
- 你描述操作步骤
- 我用 MCP 工具执行操作并记录
- 最后生成完整的自动化测试脚本
方式三：CDP 连接观察你的操作
- 你用调试模式启动 Chrome
- MCP 连接到你的浏览器
- 你正常操作，我通过
browser_network_requests 监控 API 调用
- 根据捕获的请求参数和响应，生成接口测试用例
3. 结合后端代码验证
- 读取 Controller/Service 代码，理解接口逻辑和参数
- 在浏览器中触发对应操作，验证实际行为
- 对比接口文档（Apifox）与页面展示
- 检查前后端数据一致性
4. 生成测试脚本格式
| 格式 | 命令参数 | 适用场景 |
|---|
| JavaScript/TypeScript | --target javascript | 前端团队、Node.js 项目 |
| Java | --target java | Java 后端团队 |
| Python | --target python | 测试/运维团队 |
| C# | --target csharp | .NET 项目 |
工作流程
模式 A：直接自动化测试
用户描述测试目标
↓
1. 分析需求，确定测试步骤
2. browser_navigate 打开页面
3. browser_snapshot 获取页面结构
4. 执行交互操作（click/fill/select）
5. 验证结果（截图/snapshot/network）
6. 输出测试报告
模式 B：录制 → 优化 → 回放
用户运行 codegen 录制操作
↓
1. 用户复制录制的代码给我
2. 我优化脚本（添加等待、断言、参数化）
3. 封装成可重复执行的测试用例
4. 可选：通过 MCP 执行回放验证
模式 C：结合后端代码的端到端验证
用户指定要验证的 Controller/接口
↓
1. 读取 Controller 代码，提取接口路径和返回结构
2. 读取 Vo/DTO 定义，了解字段含义
3. 在浏览器中触发该接口调用
4. 对比页面展示与后端返回数据
5. 检查边界情况（空数据、分页、错误处理）
Playwright MCP 工具速查表
| 工具名 | 功能 | 常用场景 |
|---|
browser_navigate | 导航到 URL | 打开测试页面 |
browser_navigate_back | 浏览器后退 | 返回上一页 |
browser_snapshot | 页面可访问性快照 | 分析页面结构、查找元素 |
browser_find | 搜索页面内容 | 查找特定文本/元素 |
browser_click | 点击元素 | 按钮、链接、菜单项 |
browser_type | 输入文本 | 搜索框、表单输入 |
browser_fill_form | 填写多个表单字段 | 登录、注册表单 |
browser_select_option | 选择下拉选项 | 下拉框选择 |
browser_hover | 悬停在元素上 | hover 效果、菜单展开 |
browser_drag | 拖拽元素 | 拖放排序 |
browser_press_key | 按键 | Enter/Escape/Tab |
browser_file_upload | 上传文件 | 文件上传功能 |
browser_take_screenshot | 页面截图 | 视觉验证、存档 |
browser_evaluate | 执行 JavaScript | 获取数据/注入Token/修改状态 |
browser_wait_for | 等待条件 | 等待加载完成 |
browser_network_requests | 网络请求列表 | 监控 API 调用 |
browser_network_request | 请求详情 | 查看请求/响应内容 |
browser_console_messages | 控制台消息 | 检查 JS 错误 |
browser_handle_dialog | 处理弹窗 | alert/confirm/prompt |
browser_tabs | 标签页管理 | 多页面测试 |
browser_close | 关闭浏览器 | 测试结束清理 |
测试报告输出格式
# 🌐 浏览器自动化测试报告
**测试目标：** [功能描述]
**测试环境：** [local/dev/test/prod]
**测试地址：** [URL]
**测试时间：** [日期时间]
**浏览器：** Chromium (Playwright)
---
## 📋 测试步骤与结果
| # | 步骤描述 | 操作 | 预期结果 | 实际结果 | 状态 |
|---|---------|------|---------|---------|------|
| 1 | 打开首页 | navigate | 页面正常加载 | HTTP 200 | ✅ |
| 2 | 点击登录 | click | 跳转登录页 | 跳转成功 | ✅ |
## 🔍 网络请求验证
| # | 接口 | 方法 | 状态码 | 响应时间 | 是否正常 |
|---|------|------|--------|---------|---------|
| 1 | /api/login | POST | 200 | 156ms | ✅ |
## ❌ 发现的问题
| # | 问题描述 | 严重级别 | 截图 | 相关代码 |
|---|---------|---------|------|---------|
## ✅ 结论
[测试通过 / 部分通过 / 未通过]
常见测试场景模板
场景一：登录流程测试
1. 导航到登录页
2. 填写用户名和密码
3. 点击登录按钮
4. 等待跳转完成
5. 验证登录后页面显示用户信息
6. 检查 localStorage/Cookie 中的 Token
场景二：列表分页测试
1. 打开列表页，验证默认第一页
2. 点击下一页/指定页码
3. 验证数据切换正确
4. 修改每页条数，验证列表数量变化
5. 检查网络请求中的分页参数
场景三：表单提交测试
1. 打开表单页面
2. 不填必填字段直接提交 → 验证错误提示
3. 填写无效数据 → 验证校验规则
4. 填写正确数据并提交
5. 验证成功提示和跳转
6. 检查网络请求的请求体
场景四：接口响应与页面渲染对比
1. 打开页面触发接口调用
2. 通过 network_requests 捕获目标接口
3. 检查请求参数是否符合预期
4. 验证响应数据与页面展示一致
5. 对比后端 VO 定义的字段
注意事项
- 环境安全：不要在生产环境执行写操作（下单、删除等）
- 登录处理：可通过
browser_evaluate 注入 Token 到 localStorage
- 异步等待：SPA 页面需要
browser_wait_for 确保数据加载完成
- 截图存档：重要步骤截图保存作为测试证据
- 网络监控：
browser_network_requests 验证前端是否正确调用后端接口
- 控制台错误：
browser_console_messages 检查 JS 报错
- 多标签页：复杂流程使用
browser_tabs 管理多个页面
故障排查
| 问题 | 解决方案 |
|---|
| MCP Server 启动失败 | 确认 Node.js >= 18，运行 npx -y @playwright/mcp@latest --help 测试 |
| 浏览器未安装 | 运行 npx -y playwright install chromium |
| 下载浏览器很慢 | 设置 PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright |
| 页面加载超时 | 检查目标 URL 是否可达，增加等待时间 |
| 元素找不到 | 使用 browser_snapshot 查看实际页面结构 |
| 需要代理 | MCP args 中添加 --proxy-server=http://proxy:port |
| CDP 连接失败 | 确保 Chrome 以 --remote-debugging-port=9222 启动，且端口未被占用 |
