自动化测试工具chrome devtools mcp
简介
chrome官方推出的AI控制chrome的工具，可以使用自然语言驱动浏览器做自动化表单填写、模拟点击事件、获取网络请求，性能分析，console日志分析。
前置要求，需要安装nodejs 24
安装
手工安装
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
]
}
}
}
通过界面安装
示例为trae的方法，cursor的设置地方法大同小异
文件 -> 首选项 -> 设置
选择从市场添加，搜索Chrome Devtools mcp
设置对话框使用MCP模式
编写全局测试规则
# 1.测试概述
本方案旨在系统性验证目标应用系统所有功能页面的可访问性、稳定性及性能表现，确保用户能够正常访问和使用各项功能。
# 2.测试目标
- **目标网站URL**：来自用户输入的URL或者当前上下文的URL
- **全面覆盖**：系统性验证平台所有页面(包括动态生成的页面)的可访问性
- **功能验证**：验证页面的核心交互功能（查询、分页、排序等）是否正常工作
- **错误检测**：确保每个页面无白屏、404、500等HTTP错误状态码和访问异常,确保页面调用的所有API接口无异常，无404、500等错误状态码
- **日志分析**：检查并记录浏览器控制台错误日志，确保无JS错误、网络请求错误等异常，无其他异常信息
- **性能监控**：评估页面加载性能，识别性能瓶颈
# 3.测试工具与环境
- **主要工具**：Chrome DevTools MCP
- **测试方法**：严格使用**Chrome DevTools MCP**工具进行测试，不要生成任何测试代码
- **浏览器**：Google Chrome
- **网络环境**：稳定网络连接
- **分辨率**：1920x1080 (标准测试分辨率)
- **测试超时设置**：单个页面测试超时时间为30秒，超过此时间视为测试失败
# 4.测试执行流程
## 4.1初始化测试环境
- **打开目标网站**：见**目标网站URL**
- **登录处理**：
- 如遇登录页面，暂停测试流程，待人工登录完成后继续
- **登录状态判断标准**：通过检查页面URL变化（从登录页跳转到主页面）或检查页面中是否存在特定元素（如用户头像、用户名、退出按钮等）来判断登录是否成功
- 登录成功后，等待首页完全加载完成(通过Network面板确认无pending请求)
- **加载确认**：等待首页完全加载完成(通过Network面板确认无pending请求，且DOMContentLoaded事件已完成)
## 4.2页面测试执行流程
- **页面访问**：访问目标URL
- **初始加载等待**：
- 等待页面DOMContentLoaded事件完成
- 通过Network面板监控，等待所有关键网络请求完成（无pending状态的XHR/Fetch请求）
- 如果页面有加载动画或骨架屏，等待其消失
- **动态等待机制**：优先使用网络请求完成状态判断，如果30秒内仍有pending请求，则记录为超时并继续测试
- **功能交互测试**：参照**功能交互测试清单**执行测试
- 定位页面中的查询按钮（通常包含"查询"、"搜索"等关键词或放大镜图标）
- 执行点击操作触发查询功能
- **查询后等待**：等待查询相关的网络请求完成（通过Network面板确认无pending请求），或等待2-5秒（根据页面复杂度调整），确保查询结果加载完成
- **页面验证**：参照**页面验证标准流程**进行验证
- **报告生成**：为每个页面生成独立的测试报告，报告模板参考**页面测试报告规范**规范
- **立即生成测试报告**：在每个页面测试完成后立即生成测试报告，确保每个页面的测试结果及时记录
## 4.3功能交互测试清单
- **查询/搜索功能**：如页面存在查询按钮或搜索框，必须执行查询操作并验证结果
- **数据列表加载**：验证页面数据是否正常加载和显示
- **分页功能**（如适用）：点击分页控件，验证分页切换是否正常
- **排序功能**（如适用）：如列表支持排序，验证排序功能是否正常
- **筛选功能**（如适用）：如页面包含筛选条件，验证筛选功能是否正常
## 4.4页面验证标准流程
### 4.4.1内容验证标准流程
- **页面完整性检查**：确认页面内容是否完整加载，无空白页面，无内容缺失
- **网络请求验证**：检查页面是否触发了预期的网络请求，确保无缺失或异常请求
- **错误信息检测**：检查页面是否显示系统错误提示或异常信息（如"加载失败"、"网络错误"等提示）
- **布局验证**：确认页面布局是否正常(无错位、重叠、溢出等问题)
### 4.4.2网络请求监控
- **错误请求捕获**：过滤并记录所有HTTP状态码≥400的请求，重点关注404、500、503、504等严重错误
- **响应超时记录**：监控并记录所有响应时间超过3秒的网络请求，标记为性能优化关注点
- **资源大小评估**：监控单个资源的大小，对超过1MB的资源进行详细分析和标记，标记为资源优化关注点。
- **重点错误标记**：特别记录404(资源未找到)、500(服务器错误)等严重错误的请求URL和响应内容
- **请求详情记录**：记录异常请求的方法、关键请求头和简要请求体信息
- **无CORS错误**：跨域请求正常，无跨域资源共享错误
- **HTTPS安全**：无混合内容警告（HTTP资源在HTTPS页面中）
### 4.4.3控制台错误分析
- **日志分类捕获**：仅捕获并记录控制台警告(Warn)和错误(Error)日志，其他日志类型(如信息(Info)、调试(Debug)等)不记录
- **异常重点标记**：重点记录JavaScript未处理异常、资源加载失败等关键错误
- **日志留存**：仅留存控制台警告(Warn)和错误(Error)日志，其他日志类型不留存
### 4.4.4性能指标评估
- **加载时间记录**：使用Performance API记录准确的页面加载时间(从点击到DOMContentLoaded完成)
- **性能阈值标记**：对加载时间超过3秒的页面标记为性能优化关注点
- **资源大小监控**：记录页面关键资源大小，对超过1MB的资源进行详细分析和标记
- **性能瓶颈识别**：识别导致性能问题的具体资源（慢资源、大资源）
### 4.4.5 页面截图
- **页面截图**：使用Chrome DevTools的截图功能，对当前页面进行完整截图，确保包含页面的所有可视内容
- **截图命名**：截图文件命名为`[菜单名称.png]`，确保文件名清晰且易于识别
- **截图路径**：使用相对路径 `/report/screenshots/[菜单名称.png]`（工作目录为项目根目录）
- **截图存档**：将截图保存至项目目录下的`/report/screenshots`文件夹中，确保路径正确且文件可访问
- **截图验证**：截图后必须验证文件是否成功保存，如果失败则使用绝对路径重试，确保每个测试条目都有对应的截图文件
# 5.页面测试报告规范
- **报告命名格式**：`/report/[测试报告_菜单名称].md`
- **测试时间**：必须填写实际测试时间，格式为YYYY-MM-DD HH:MM:SS，不要使用模板字符串
- **表格格式**：网络请求分析和控制台日志分析部分必须严格使用表格格式
- **无数据处理**：如果某个部分没有数据，请按照模板中提供的方式填写"无"，不要留空
- **内容完整性**：确保所有必填字段都已填写，不要遗漏任何章节或段落
- **截图存档**：确保页面截图已保存并提供正确的相对文件路径
## 5.1 测试报告一致性
严格遵循**测试报告模板**进行结构化输出，**禁止添加任何模板外的自定义内容**。所有章节标题、编号、表格格式、截图及占位符的使用方式均须与模板保持完全一致。
1. 严格按照模板中的7个章节结构输出，章节标题必须为：
- `## 1. 基本信息`
- `## 2. 测试结果概览`
- `## 3. 网络请求分析`
- `## 4. 控制台日志分析`
- `## 5. 页面性能分析`
- `## 6. 页面内容与布局验证`
- `## 7. 测试结论与优化建议`
2. 所有表格格式必须与模板完全一致，包括列标题、分隔符等
3. 对于无数据的情况，严格按**测试报告模板**示例的"无 | 无 | 无 | 无 | 无 | 无"等格式填写
4. **禁止添加任何模板外的自定义内容**
5. 所有占位符（如测试时间、URL、数值等）必须替换为实际测试数据
## 5.2测试报告模板
```markdown
# 测试报告：[页面名称]
## 1. 基本信息
- **测试执行时间**：[YYYY-MM-DD HH:MM:SS]
- **页面访问路径**：[菜单名称]
- **目标页面URL**：[完整访问链接]
- **测试环境配置**：Chrome [版本号] / Windows 10 专业版 / 1920×1080分辨率
- **测试耗时**：[X]秒
## 2. 测试结果概览
- **总体状态**：通过 / 不通过
- **页面加载性能**：[X]秒（正常≤3秒 / 超时>3秒）
- **核心功能验证**：
- 查询功能执行[成功/失败]（若适用）
- 数据加载[成功/失败]（若适用）
- 其他功能验证结果[成功/失败]（若适用）
## 3. 网络请求分析
- **请求统计**：总请求[X]个 | 成功[X]个 | 失败[X]个
- **错误请求详情**：
| HTTP状态码 | 请求方法 | 完整URL | 请求时间 | 错误原因描述 | 影响范围 |
|------------|----------|---------|----------|--------------|----------|
| [HTTP状态码] | [请求方法] | [完整URL] | [YYYY-MM-DD HH:MM:SS] | [错误原因描述] | [数据加载/功能模块等] |
| 404 | GET | https://example.com/api/data | 2023-10-26 14:30:22 | 资源路径不存在 | 人员列表数据加载 |
| 无 | 无 | 无 | 无 | 无 | 无 |
- **超时请求详情**：
| 瓶颈类型 | 请求URL | 请求方法 | 耗时(秒) | 超时阈值 | 影响范围 |
|----------|---------|----------|----------|----------|----------|
| 慢请求 | [完整URL] | [GET/POST等] | [X] | 3秒 | [数据加载/表格渲染等] |
| 无 | 无 | 无 | 0 | 3秒 | 无超时请求 |
- **资源太大响应详情**：
| 瓶颈类型 | 资源类型 | 资源URL | 大小(MB) | 阈值(MB) | 影响范围 |
|----------|----------|---------|----------|----------|----------|
| 大资源 | [资源类型] | [完整URL] | [X] | 1 | [数据加载/表格渲染等] |
| 无 | 无 | 无 | 0 | 1 | 无大资源请求 |
## 4. 控制台日志分析
- **错误日志**：共[X]条（严重[X]条 | 一般[X]条）
| 错误类型 | 错误内容摘要 | 影响范围 | 建议处理优先级 |
|----------|--------------|----------|----------------|
| [错误类型] | [具体错误文本摘要] | [相关功能模块/页面功能] | [高/中/低] |
| 无 | 无 | 无 | 无 |
- **警告日志**：共[X]条
| 警告类型 | 警告内容摘要 | 影响范围 | 建议处理优先级 |
|----------|--------------|----------|----------------|
| [警告类型] | [具体警告文本摘要] | [相关功能模块/性能指标] | [高/中/低] |
| 无 | 无 | 无 | 无 |
## 5. 页面性能分析
- **页面加载时间**：[X]秒（正常≤3秒 / 超时>3秒）
- **性能评估结果**：正常 / 需优化（超过3秒阈值）
- **关键性能指标**：
| 性能指标 | 数值 | 阈值 | 评估结果 | 说明 |
|----------|------|------|----------|------|
| DOMContentLoaded | [X]秒 | ≤3秒 | [正常/超时] | 页面DOM加载完成时间 |
| 首次内容绘制(FCP) | [X]秒 | ≤1.8秒 | [正常/超时] | 首次内容渲染时间 |
| 最大内容绘制(LCP) | [X]秒 | ≤2.5秒 | [正常/超时] | 最大内容元素渲染时间 |
- **性能瓶颈分析**：
| 瓶颈类型 | 资源URL | 资源类型 | 大小(MB) | 加载时间(秒) | 影响范围 |
|----------|---------|----------|----------|--------------|----------|
| [慢资源/大资源] | [完整URL] | [资源类型] | [X] | [X] | [页面渲染/交互响应等] |
| 无 | 无 | 无 | 0 | 0 | 无性能瓶颈|
## 6. 页面内容与布局验证
- **内容完整性**：完整加载 / 部分缺失（缺失元素：[列表]） / 完全空白
- **布局显示**：正常 / 异常（异常描述：[元素错位/重叠/溢出等具体现象]）
- **功能交互验证**：
- 查询功能：[成功/失败/不适用]（失败原因：[如有]）
- 数据加载：[成功/失败/不适用]（失败原因：[如有]）
- 其他功能：[测试结果]（若适用）
- **页面截图**：
截图存档路径：screenshots/[菜单名称].png
## 7. 测试结论与优化建议
- **结论摘要**：[通过/不通过原因简述，如"页面加载超时且存在404资源错误"]
- **修复建议**：
1. [优先级高] [具体问题]：[技术解决方案]
2. [优先级中] [性能问题]：[优化方向建议]
3. [优先级低] [其他问题]：[优化建议]（若适用）
- **风险提示**：[如"该页面错误可能导致用户无法查看关键数据"]
- **测试异常说明**：[如有测试中断、重试等情况，需在此说明]
```
# 6.测试质量保证
- **测试完整性**：确保每个页面都执行了完整的测试流程，不遗漏任何验证项
- **报告准确性**：确保测试报告中的数据准确反映实际测试结果
- **问题可追溯性**：确保所有发现的问题都有详细的记录，包括错误信息、影响范围等
- **测试一致性**：确保所有页面的测试标准和报告格式保持一致
使用自然语言与mcp对话
提前生成测试进度,菜单列表提示词(如果直接要AI分析菜单，会出现会话上下文爆炸)
获取用户输入的树形菜单数据结构文件，生成一个结构化测试进度表格。
树形菜单数据结构文件包含多级菜单：
- 如果菜单项的 url 为空字符串或存在 children 数组（表示有子菜单），则为菜单目录，无需生成测试行
- 如果菜单项的 url 不为空且 children 为空数组，则为可访问的页面，需要生成测试行
请按照以下要求生成表格：
1. 菜单名称 ：按层级结构拼接，格式为 [一级菜单]-[二级菜单]-[三级菜单]-[...]-[页面名称]
2. URL ：使用基础地址 https://smart.saas.vppark.cn/ 与菜单项的 url 字段组装完整可访问地址，需特别处理：
- 如果菜单项的 url 以 / 开头，则直接拼接（避免重复）
- 如果菜单项的 url 不以 / 开头，则添加 / 后再拼接
- 最终 URL 应符合 Vue 项目 hash 模式的访问格式
3. 测试状态 ：[进行中/已完成],默认为: --
4. 开始时间 ：yyyy-MM-dd HH:mm:ss,默认值为：--
5. 完成时间 ：yyyy-MM-dd HH:mm:ss,默认值为：--
6. 测试结果 ：[通过/未通过],默认值为：--
请确保表格覆盖文件中所有符合条件的页面菜单项，不要遗漏任何层级。
生成菜单列表
根据树形结构@全局测试/nav.json ，按照@全局测试/生成菜单列表.md 要求，生成测试进度.md
编写开始测试语句提示词
严格按照 `global.md` 文件中规定的测试规范、操作流程，对 `系统菜单测试进度.md` 文档中的每个条目执行以下操作：
## 测试范围
- 仅测试"测试状态"字段为 `--` 的条目（跳过已完成的条目）
- 如果所有条目都需要重新测试，则测试所有条目
## 测试执行流程
1. **逐项执行完整测试流程**，包括：
- 测试环境准备（打开浏览器、登录等）
- 测试用例执行（页面访问、功能交互、验证等）
- 结果记录和问题跟踪
2. **测试报告生成**：
- 每完成单个条目的测试后，立即按`global.md`中的`页面测试报告规范`生成结构化测试报告
- 报告格式必须严格遵循`global.md`中的测试报告模板，包含7个章节
3. **测试结果回写**：
将测试结果实时回写到 `./系统菜单测试进度.md` 文件中对应条目的指定字段，确保：
- **测试状态字段**：更新为"进行中"（测试开始时）/ "已完成"（测试完成时）
- **开始时间字段**：填写测试开始执行的时间戳（格式：YYYY-MM-DD HH:mm:ss）
- **完成时间字段**：填写测试完成执行的时间戳（格式：YYYY-MM-DD HH:mm:ss）
- **测试结果字段**：填写测试执行结果，格式为：
- 通过：`✅ [简要描述，如"页面正常加载，查询功能正常"]`
- 失败：`❌ [失败原因描述]`
- 阻塞：`⛔ [阻塞原因描述]`
- 保持原始文档的Markdown表格结构完整，仅修改指定字段内容
- 每次更新后立即保存文档变更，确保进度文件始终反映最新测试状态
4. **测试异常处理**：
- 如遇到页面无法访问、登录失败等情况，将测试状态标记为"阻塞"，并在测试结果中说明原因
- 如测试过程中出现网络超时（超过30秒），记录为失败，继续执行后续测试
- 所有异常情况都应在测试报告中详细记录
5. **测试规范一致性**：
- 每次开始新条目测试前（包括多轮测试场景），必须重新核对`global.md`中的测试规范、操作流程及报告模板要求
- 确保每轮测试使用的报告格式与最新规范完全一致
- 严格按照`global.md`中的功能交互测试清单执行测试
与MCP对话开始测试
`开始测试输入语句.md` 根据要求对 `巡检任务管理` 进行测试
测试报告样例
