回顾
上两篇文章我们介绍了swagger&yapi接口文档转换jmeter使用的方式,第三篇文章实现了yapi接口登录,已经可以覆盖大多数公司的接口文档转换,可以帮助我们的测试攻城狮解放双手,节省很多时间!
但是问题又来了,使用此工具需要一定的python基础,还需要本地有python环境才能使用,我们总结反思,看起来这样不太友好,我们要把我们的工具服务化,可视化,随时随地都可以接入使用,带给你丝滑般的接口测试脚本编写体验!!
愿景
一键自动生成接口测试脚本,解放双手,降低纯手力劳动占比,进而给自己提供更多的时间去思考、理解产品和设计更多“聪明”的用例
实现效果
今天我们将我们的工具包装成一个网页工具,让我们的测试同学随时随地的使用。
- 可视化界面展示
准备
python 环境搭建就不仔细说明,直接进入到 Flask 使用和服务器搭建。
先说一下,为什么使用 Flask,有两点,一是几种框架中比较轻量级,二是不会封装得太厉害。具体 Flask 使用目前接触的也只是能将项目运行起来并未前端提供接口服务。
「使用 Flask Web框架」
1)安装步骤
- 安装 flask 库:pip3 install flask;
- 安装之后在项目中 import flask 后才能真正找到 flask module。
2)运行项目
- 在哪个文件中使用了 flask,运行对应的 xxx.py,会提示在 http://localhost:5000 监听;
- 打开浏览器,输入 http://localhost:5000,如果使用了 flask ,可以使用 Jinja 2 写前端模板文件(这里其实整个系统可以直接通过 flask 实现)。Tips:这种情况类似在本地使用 npm run dev 查看build后的 vue 页面一样,只能本终端访问,并没有部署到服务器中。
代码举例【非本项目代码】
- 前端
<template> <div> <span>{{ serverResponse }} </span> <button @click="getData">GET DATA</button> </div> </template> <script> import axios from 'axios'; export default { name: "my-first-vue", data: function() { return { serverResponse: 'resp' } }, methods: { getData() { var that = this; // 对应 Python 提供的接口,这里的地址填写下面服务器运行的地址,本地则为127.0.0.1,外网则为 your_ip_address const path = 'http://127.0.0.1:5000/getMsg'; axios.get(path).then(function (response) { // 这里服务器返回的 response 为一个 json object,可通过如下方法需要转成 json 字符串 // 可以直接通过 response.data 取key-value // 坑一:这里不能直接使用 this 指针,不然找不到对象 var msg = response.data.msg; // 坑二:这里直接按类型解析,若再通过 JSON.stringify(msg) 转,会得到带双引号的字串 that.serverResponse = msg; alert('Success ' + response.status + ', ' + response.data + ', ' + msg); }).catch(function (error) { alert('Error ' + error); }) } } } } </script>
- 后端
from flask import Flask from flask import jsonify from flask_cors import CORS app = Flask(__name__) cors = CORS(app, resources={r"/getMsg": {"origins": "*"}}) @app.route('/') def hello_world(): return 'Hello World!' @app.route('/getMsg', methods=['GET', 'POST']) def home(): response = { 'msg': 'Hello, Python !' } return jsonify(response) # 启动运行 if __name__ == '__main__': app.run() # 这样子会直接运行在本地服务器,也即是 localhost:5000 # app.run(host='your_ip_address') # 这里可通过 host 指定在公网IP上运行
注意事项
「使用 Flask + Vue 实现一个应用,简单来说主要是以下几个步骤:」
- Vue.js 实现前端页面 & 通过 axios 库请求后台接口获取数据后重新渲染页面;
- Flask & Flask-CORS 提供接口 & 实现跨域服务。
- 打包 Vue.js 文件 & 部署到服务器,通过 index 页面进行访问。
「如果需要最终可以在公网访问最终打包好的 Vue 前端界面,则执行以下操作:」
- 在服务器实现文件 get_msg.py 文件中配置 app.run(host=’your_ip_address’);
- 配置 Vue axios请求接口的 base_url 为 your_ip_address;
- 通过 npm run build 打包得到最终 dist 文件并部署到服务器中(部署可通过 python -m http.server 进行简单部署,然后通过 http://your_ip_address:8000 端口访问最终的页面)。
总结+反问
「大家觉得方便高效有没有质和量的区别?」
- 用java+TestNG编写接口自动化脚本方不方便?也挺方便!
- 用python+pytest编写接口自动化脚本方不方便?也挺方便!
- 用我们一键生成接口测试脚本的工具方不方便?好像也挺方便!
就经常问人,如果这三种方式能给够同样给你带来方便,也就是说这三 种方式你都欣赏过都使用过,你都觉得还不错对吧!