WebUI自动化测试平台

一、UI自动化面临的痛点

  1.维护case耗时较长，需要在页面上手动找元素，脚本形式运行配置较多，无法校验是否配置正确性，需要一定的代码基础，上手难度较高。
  2.易用性较差，通常以代码命名的模块无法做到见名知义，需要一段时间来熟悉项目，没有模块化和结构化的概念，只能做到小团队内推广使用，对外输出能力较弱，无法对其他团队如开发、产品进行推广。
  3.对于case的长期积累不利，以文件形式存储case、配置、参数等信息，case量起来后，项目会越来越大，对于case的动态查找不方便。
  4.后期拓展空间不大，若需要实现某些定制化的功能，如：对测试报告进行处理，需要重新开发对应的报告模板、case结果数据结构需要重构，可能需要对框架本身需要重构。

二、解决方案

  1.针对case的维护问题，从整个ui自动化的特性出发，本身是基于页面操作的流程回放，一个case就是一个完整的业务流程，case内部是各个页面元素的操作集合，所以基于这种形式，就可以通过浏览器插件(Selenium Ide)录制的方式来生成ui自动化的case，回放成功后，导入系统会自动解析成我需要的数据对象。
  2.针对case的易用性、长期积累、后期拓展，解决办法是将框架web化，case原始数据持久化（入库处理）统一维护入口，使用人群不局限于测试团队，会开放给开发、产品团队使用。

三、架构图

架构图

四、后端项目简介

  • 开发语言&框架：Java+Maven+SpringBoot+Mybatis+Mysql+Redis(java版本>=1.8)
  • 项目各目录简介：

后端结构图

  • 本地运行:
  直接运行Application类的main方法即可
  后端地址:http://127.0.0.1:9998/webui
  • jar包运行
  打包:maven clean install
  运行:java -jar WebUiAutomation.jar
  后端地址:http://127.0.0.1:9998/webui

五、前端项目简介

前端结构图

构建&运行

  • 安装依赖
  1. npm install(官方默认安装方式,速度比较慢,建议使用后两种)
  2. 或者指定国内镜像安装:npm install --registry=https://registry.npm.taobao.org
  3. 或者通过cnpm install （前提是需要安装cnpm：npm install cnpm --registry=https://registry.npm.taobao.org）
  • 开发环境运行
  命令:npm run dev
  • 生产环境构建
  命令:npm run build
  • 生产构建并查看报告
  命令:npm run build --report
注意事项
  1. package.json中dependencies不要使用xxx版本的方式指定版本,一旦有新版本发布,会有兼容性问题产生(""是使用更高版本,不要"^"是使用固定版本,建议各个依赖都是固定版本)
  2. 项目是vue2.x,安装时不要弄错vue版本

posted on 2022-11-18 17:30  zw520ly  阅读(370)  评论(1)  编辑  收藏  举报

导航