# 自动化测试工具chrome devtools mcp #### 马上体验 #### 简介 chrome官方推出的AI控制chrome的工具，可以使用自然语言驱动浏览器做自动化表单填写、模拟点击事件、获取网络请求，性能分析，console日志分析。 前置要求，需要安装nodejs 24 #### 安装 ##### 手工安装 ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest" ] } } } ``` ##### 通过界面安装 示例为**trae**的方法，cursor的设置地方法大同小异 文件 -> 首选项 -> 设置 [![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/oytzyPdwrOyeOV5u-image-1765247560036.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/oytzyPdwrOyeOV5u-image-1765247560036.png) 选择从市场添加，搜索**Chrome Devtools mcp** [![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/WI7o5D9ulxEYMlI5-image-1765247666505.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/WI7o5D9ulxEYMlI5-image-1765247666505.png) 设置对话框使用MCP模式 [![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/O84SoG0KWMEBxsak-image-1765248066866.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/O84SoG0KWMEBxsak-image-1765248066866.png) #### 编写全局测试规则 ``````markdown # 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) 截图存档路径：screenshots/[菜单名称].png ## 7. 测试结论与优化建议 - **结论摘要**：[通过/不通过原因简述，如"页面加载超时且存在404资源错误"] - **修复建议**： 1. [优先级高] [具体问题]：[技术解决方案] 2. [优先级中] [性能问题]：[优化方向建议] 3. [优先级低] [其他问题]：[优化建议]（若适用） - **风险提示**：[如"该页面错误可能导致用户无法查看关键数据"] - **测试异常说明**：[如有测试中断、重试等情况，需在此说明] ``` # 6.测试质量保证 - **测试完整性**：确保每个页面都执行了完整的测试流程，不遗漏任何验证项 - **报告准确性**：确保测试报告中的数据准确反映实际测试结果 - **问题可追溯性**：确保所有发现的问题都有详细的记录，包括错误信息、影响范围等 - **测试一致性**：确保所有页面的测试标准和报告格式保持一致 `````` #### 使用自然语言与mcp对话 ##### 提前生成菜单列表提示词(如果直接要AI分析菜单，会出现会话上下文爆炸) ``````markdown 获取用户输入的树形菜单数据结构文件，生成一个结构化测试进度表格。 树形菜单数据结构文件包含多级菜单： - 如果菜单项的 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 `````` [![](https://iovhm.com/book/uploads/images/gallery/2026-01/scaled-1680-/nzgJWIhIok9fGNu3-image-1768219069689.png)](https://iovhm.com/book/uploads/images/gallery/2026-01/nzgJWIhIok9fGNu3-image-1768219069689.png) ##### 编写开始测试提示词 `````` 严格按照 `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`中的功能交互测试清单执行测试 `````` ##### 开始测试 ``````markdown `开始测试输入语句.md` 根据要求对 `巡检任务管理` 进行测试 `````` [![](https://iovhm.com/book/uploads/images/gallery/2026-01/scaled-1680-/oyWHmsdJusbooImb-image-1768218562374.png)](https://iovhm.com/book/uploads/images/gallery/2026-01/oyWHmsdJusbooImb-image-1768218562374.png) ##### 测试报告样例 [![](https://iovhm.com/book/uploads/images/gallery/2026-01/scaled-1680-/GjVpwPFQK3JuRLLS-image-1768218231280.png)](https://iovhm.com/book/uploads/images/gallery/2026-01/GjVpwPFQK3JuRLLS-image-1768218231280.png)