前言

截止今天入职新公司正好3个月，了解了公司测试团队的现状以后，发现测试团队不能没有一个功能的测试平台，之前开展了好多的自动化测试相关脚本、压测脚本零散分布的厉害，导致虽然感觉什么都做了，但是发现什么都拿不出手。
索性，我来做，公司也是一个重前端的业务，我就用他们用的vue来做前端。经过2个多月从学习到建设目前基本也成型了，感觉还不错，记录一下自己的成长。

测试平台

1. 功能计划

测试平台设计

2.一边看图一边介绍

登录

• 涉及技术难点：自定义了Django用户系统，包含用户表管理、修改为JWT认证方式。

首页

2.1 相关技术

相信做过web服务的同学都能看出来，这里有浓浓的AdminLTE-3.0 的影子。
实际上该平台我将AdminLTE与Element做了一个集成，即大框架采用的是前者的，里面的每个小组件大部分都使用的是后者。
前端技术：

• @vue/cli 4.5.4 教程
• AdminLTE 3 教程
• ElementUI 教程

后端框架：

• Django 3.0.4
• 接口采用 REST framework
• 数据库 MySQL
• 缓存 Redis
• 通过nginx + gunicon 方式进行部署

2.2 主导航菜单

当前主导航菜单支持2级配置，且可根据不同用户组进行动态生成导航。

菜单管理

• 涉及的技术就是vue动态生成路由的功能

2.3 接口管理

• 接口管理 设计灵感来源于yapi，但是高于yapi设计。更适合测试同学。 接口管理

• 设计理念

  
  设计理念

• 接口详情
  在接口详情中，可直接进行接口调试、接口健壮性探测，同时支持对接口调试测试保存为测试用例，是不是很爽。

  
  接口详情1
  接口详情2

• 新增接口测试用例 直接选中接口，点击新增接口即可。

  
  image.png

• 测试用例列表

  
  测试用例列表

• 多接口场景构建

  
  场景列表

• 点击新增接口 进入场景公共配置中

  
  场景公共配置

• 下一步 选择接口

  
  image.png

• 开启公共配置变量

  
  场景内公共配置

• 使用公共配置

  
  image.png
  

  以此类推，下一个接口可使用上一个接口定义的变量，然后通过${{变量名称}}的方式进行引用。

image.png

---

先介绍这些，目前该平台已经开始在团队内部使用了，还需要继续优化。
整个平台从设计、到开发完成、到应用满打满算2个月。
目前总的来看接口达到的自己的预期结果。
同时我也在新公司圆满的完成了试用期。
看后期反馈，如果需要的同学比较多，我可以将这个平台开源哈。
！技术无止境，继续努力吧少年。
下一步 go 语言 我之向往。