python django vue httprunner 实现接口自动化平台(最终版)

一、项目介绍:

1.1 项目地址

后端地址:

GitHub - 18713341733/test_platform_service: django vue 实现接口自动化平台

前端地址:

GitHub - 18713341733/test_platform_front: Django vue实现接口自动化平台

1.2  项目介绍

1.2.1 环境准备

Python >= 3.8.0 (推荐3.9+版本)
nodejs >= 14.0 (推荐最新) 或者 16,千万不要使用18(会报错)
Mysql >= 5.7.0 (可选,默认数据库sqlite3,推荐8.0版本)
Redis(可选,最新版)
项目运行及部署 | Django-Vue-Admin

1.2.2 django-vue-admin 介绍(只做了解,不重要)

接口自动化平台,是基于 开源项目 Django-vue-admin 来写的。

Django-vue-admin 地址:

django-vue-admin: 基于RBAC模型的权限控制的一整套基础开发平台,前后端分离,后端采用 django+django-rest-framework,前端采用 vue+ElementUI。

二、前端项目 test_platform_front

2.1 项目启动

1、克隆项目

git clone https://github.com/18713341733/test_platform_front.git

 2、进入 test_platform_front 项目

cd test_platform_front

3、安装依赖

方式一:

npm install

方式二:

npm install --registry=https://registry.npm.taobao.org

方式三:

先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

再使用cnpm安装依赖

sudo cnpm install --registry=https://registry.npm.taobao.org


4、 启动服务

npm run dev

5、浏览器访问

http://localhost:8080

初始账号:superadmin 密码:admin123456

后端接口文档地址:http://127.0.0.1:8000/swagger

三、后端项目 test_platform_service

3.1 项目启动

1、克隆项目

git clone https://github.com/18713341733/test_platform_service.git

 2、进入test_platform_service 项目

cd test_platform_service

3、安装依赖

pip install -r requirements.txt

4、配置mysql

在conf/env.py 中,配置mysql连接信息

3、在 env.py 中配置数据库信息 

# 使用mysql时,改为此配置
DATABASE_ENGINE = "django.db.backends.mysql"
DATABASE_NAME = 'backend' # mysql 时使用
 
# 数据库地址 改为自己数据库地址
DATABASE_HOST = "127.0.0.1"
# # 数据库端口
DATABASE_PORT = 3306
# # 数据库用户名
DATABASE_USER = "root"
# # 数据库密码
DATABASE_PASSWORD = "123456"

5、创建mysql数据库

需要手动在mysql中,创建名为backend的数据库

  • 1、mysql数据库版本建议:8.0 mysql数据库字符集:utf8mb4
  • 2、在mysql中,创建名为backend的库
CREATE DATABASE backend charset=utf8mb4;


6、生成迁移脚本

python3 manage.py makemigrations


7、执行迁移 

python3 manage.py migrate


8、执行 初始化数据 

python3 manage.py init


9、启动项目 

python3 manage.py runserver 127.0.0.1:8000


或者:

python3 manage.py runserver 0.0.0.0:8000


初始账号:superadmin 密码:admin123456

后端接口文档地址:http://127.0.0.1:8000/swagger

四、前后端联调

4. 1 修改前端监听后端服务的地址

4.1.1 启动后端项目

python3 manage.py runserver 0.0.0.0:8000


启动项目后,查一下后端的ip地址 

4.1.2 启动前端项目


1、修改前端项目监听的后端地址

将两个文件: .env.development 与.env.test 中的监听地址,改成真实的后端地址

# 后端接口地址及端口(域名)
VUE_APP_API = "http://192.192.192.192:8000"

 
2、启动项目:

npm run serve


http://192.192.192.192:8080/

登录前端页面

初始账号:superadmin 密码:admin123456

后台手册 | Django-Vue-Admin

4.2 配置左侧菜单栏

4.2.1 项目初始菜单配置

在dvadmin/system/fixtures/init_menu.json 中,配置初始菜单。

 {
                "name": "部门管理",
                "icon": "bank",
                "sort": 3,
                "is_link": false,
                "is_catalog": false,
                "web_path": "/dept",
                "component": "system/dept/index",
                "component_name": "dept",
                "status": true,
                "cache": false,
                "visible": true,
                "parent": 277,
                "children": [],
                "menu_button": [

is_link:如果不是外部的连接,就填写 false

is_catalog: 是否是目录

web_path: 当前页面的uri地址。

 "component": "system/dept/index" 前端组件的地址

component_name: 前端组件名称

4.2.2 配置菜单举例

TODO

4.3 后端项目结构介绍

 4.3.1  apps

apps 存放的是接口自动化所需要的app。

包括:

  • 项目模型
  • 接口模型
  • 用例模型
  • 配置模型
  • 套件模型
  • 内置函数模型
  • 环境变量模型
  • 测试报告模型
  • 用户模型

 4.3.2 conf

项目配置地址conf

4.3.3. reports

测试报告地址reports

4.3.4 utils

接口自动化所需要的工具

4.3 前端项目结构介绍

 4.3.1 接口自动化前端组件

/test_platform_front/src/views/apitest

4.3.2 接口自动化路由

/test_platform_front/src/apitestapi

五、编写接口自动化case

接口自动化底层驱动,是基于httprunner 1 实现的。

如编写一个百度的接口请求。

https://ug.baidu.com/mcp/pc/pcsearch

POST

body: {"invoke_info":{"pos_1":[{}],"pos_2":[{}],"pos_3":[{}]}}

header: 

Content-Type:application/json

1、创建项目

接口自动化-项目管理-项目新增

 2、配置base url

环境管理-环境新增

这里只需要填写接口的host就可以。

 3、新增接口

接口管理-接口新增

 4、配置管理--配置新增

在这里可以编写统一的header,如

Content-Type:application/json

 5、编写case

新增case

 编写body 

编写断言:

点击保存

5、运行case

 用例管理--用例列表

6、测试报告 

 

六、其他相关资料

Django实现接口自动化平台(七)数据库设计_做测试的喵酱的博客-CSDN博客

Django实现接口自动化平台(五)httprunner(2.x)基本使用【持续更新中】_做测试的喵酱的博客-CSDN博客

三、django-vue-admin开源项目二次开发——后端快速实现curd及接口_做测试的喵酱的博客-CSDN博客

二、django-vue-admin开源项目二次开发——修改默认菜单_做测试的喵酱的博客-CSDN博客

element-ui 接口自动化平台是基于element-ui框架开发的一个用于接口自动化测试的平台。element-ui是一套基于Vue.js的UI组件库,它提供了丰富的组件和强大的功能,可以帮助开发人员快速构建现代化的Web界面。而element-ui 接口自动化平台则是在element-ui的基础上进行扩展,提供了一套专门用于接口自动化测试的工具和功能。 element-ui 接口自动化平台的主要特点和优势包括: 1. 统一的界面风格和使用方式:平台的设计风格与element-ui一致,提供了简洁、直观的界面和易于使用的操作方式,使得测试人员可以快速上手并进行测试工作。 2. 强大的接口测试功能:平台支持多种常见的接口测试技术和协议,如RESTful API、SOAP、HTTPHTTPS等,能够满足不同类型接口的测试需求。同时,平台还提供了丰富的验证和断言方式,可以对接口返回的数据进行校验,确保接口的正确性。 3. 多样化的测试用例管理:平台支持测试用例的创建、编辑、执行和管理,可以方便地进行用例的维护和管理,并提供了灵活的用例批量执行和调度功能,提高了测试效率。 4. 自动化测试报告和结果展示:平台提供了详细的测试报告和结果展示功能,包括测试用例的执行结果、接口的响应时间、错误日志等,方便测试人员进行问题定位和分析,并支持导出报告和结果分享。 总之,element-ui 接口自动化平台基于element-ui框架,提供了丰富的功能和易于使用的界面,可以帮助测试人员快速进行接口自动化测试,并提供了全面的测试报告和结果展示功能。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

做测试的喵酱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值