跳转到主要内容

自动化测试工具chrome devtools mcp

简介

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

前置要求，需要安装nodejs 24

安装

示例为trae的方法，cursor的设置地方法大同小异

文件 -> 首选项 -> 设置

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

设置对话框使用MCP模式

手工安装


{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

使用自然语言与mcp对话

编写提示词

# 出入口管理测试方案

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

## 测试工具

chrome devtools mcp

## 页面地址

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


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

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

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


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

打开 https://smart.saas.vppark.cn ，逐个展开左侧的菜单，点击每个菜单下的子项，查看是否能正常访问。观察网络请求，确保没有404,500错误和其他访问异常。查看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：报错信息
测试报告样例

回到顶部