跳转到主要内容

自动化测试工具chrome devtools mcp

简介

chrome官方退出的AI控制chrome的工具，可以使用自然语言驱动浏览器做自动化表单填写、模拟点击事件、获取网络请求，性能，console日志。

前置要求，需要安装nodejs 24

安装

trae

文件 -> 首选项 -> 设置

选择从市场添加，搜索Chrome Devtools mcp

设置对话框使用MCP模式

使用自然语言与mcp对话

编写提示词

# 出入口管理测试方案

验证出入口管理模块是否能正常访问，确保没有404,500错误和其他访问异常，console中没有报错信息。

## 测试工具

chrome devtools mcp

## 页面地址

https://smart.saas.vppark.cn/#/personnel-access/access-management/index


## 查询功能
- 组合查询：出入口名称、楼栋
- 点击查询按钮进行查询
- 截图记录测试结果
- 测试完成后重置所有的查询条件
与MCP对话

使用chrome mcp 根据 <出入口管理.md> 描述进行测试

全局检查404、500，控制台异常

# 测试所有的页面是否能正常访问

打开 https://smart.saas.vppark.cn ，逐个展开左侧的菜单，点击每个菜单下的子项，查看是否能正常访问。观察网络请求，确保没有404错误。查看console是否有报错信息。

## 测试工具

chrome devtools mcp

## 测试步骤
- 打开 https://smart.saas.vppark.cn
- 遍历左侧导航菜单的所有主菜单项：  
   - 逐一点击展开每个主菜单  
   - 对每个展开的子菜单，递归点击所有层级的子菜单项,跳转不超过3层深度
- 对每个被点击的菜单项执行验证：  
   - 检查页面内容是否正确加载（无空白/错误提示）  
   - 监控网络请求：  
     ∙ 过滤并记录所有状态码≥400的请求  
     ∙ 特别标记404/500状态码的请求URL  
   - 实时检查浏览器控制台：  
     ∙ 捕获并分类所有警告/错误日志  
     ∙ 重点记录未处理异常和资源加载失败信息  
   - 记录每个页面的加载时间  
       - 记录页面加载时间，对加载时间超过3秒的页面进行记录
       - 记录资源大小，对资源大小超过1MB的资源进行记录
- 生成结构化测试报告：  
   - 按菜单层级记录所有访问路径  
   - 列出存在问题的URL及其状态码  
   - 附上关键报错信息的截图和日志片段  
   - 标记通过/失败的测试用例  
- 输出测试报告到Excel表格
   - 表格格式：
      - 列1：菜单层级
      - 列2：子菜单名称
      - 列3：URL
      - 列4：状态码
      - 列5：加载时间（秒）
      - 列6：资源大小（MB）
      - 列7：是否通过
      - 列8：报错信息
测试报告样例

测试报告 - 人员名单页面

访问路径

智慧安防 > 人员管控 > 人员名单

测试结果

项目详情
URLhttps://smart.saas.vppark.cn/#/intelligent-security/people-roster/index
页面内容正常加载，显示人员名单界面，包含黑名单、白名单、红名单等标签页和人员分组列表
状态码所有请求均返回200成功状态码
控制台信息无错误或警告信息
加载时间1.30秒（未超过3秒阈值）
资源大小有3个资源超过1MB：
  • EasyPlayer-pro.js (1.81MB)
  • index-8535afd8.js (1.05MB)
  • YouSheBiaoTiHei-dab883d6.ttf (1.35MB) | | 是否通过 | ✅ 通过 |

问题总结

  • 发现3个资源文件大小超过1MB，可能影响页面加载性能
  • 建议对大资源文件进行优化处理
回到顶部