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、修改前端项目监听的后端地址

python django vue httprunner 实现接口自动化平台(最终版)_第1张图片

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

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

 
2、启动项目:

npm run serve


http://192.168.43.224: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 后端项目结构介绍

python django vue httprunner 实现接口自动化平台(最终版)_第2张图片

 4.3.1  apps

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

包括:

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

 4.3.2 conf

项目配置地址conf

4.3.3. reports

测试报告地址reports

4.3.4 utils

接口自动化所需要的工具

4.3 前端项目结构介绍

python django vue httprunner 实现接口自动化平台(最终版)_第3张图片

 4.3.1 接口自动化前端组件

/test_platform_front/src/views/apitest

4.3.2 接口自动化路由

/test_platform_front/src/apitestapi

五、编写接口自动化case

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

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

python django vue httprunner 实现接口自动化平台(最终版)_第4张图片

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

POST

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

header: 

Content-Type:application/json

1、创建项目

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

python django vue httprunner 实现接口自动化平台(最终版)_第5张图片

 2、配置base url

环境管理-环境新增

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

python django vue httprunner 实现接口自动化平台(最终版)_第6张图片

 3、新增接口

接口管理-接口新增

python django vue httprunner 实现接口自动化平台(最终版)_第7张图片

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

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

Content-Type:application/json

python django vue httprunner 实现接口自动化平台(最终版)_第8张图片

 5、编写case

新增case

python django vue httprunner 实现接口自动化平台(最终版)_第9张图片

 编写body 

python django vue httprunner 实现接口自动化平台(最终版)_第10张图片

编写断言:

python django vue httprunner 实现接口自动化平台(最终版)_第11张图片

点击保存

5、运行case

 用例管理--用例列表

6、测试报告 

 python django vue httprunner 实现接口自动化平台(最终版)_第12张图片

六、其他相关资料

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

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

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

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

你可能感兴趣的:(测开工具,自动化,运维)