【测试平台开发】
一、 后端开发
1、常见的技术架构与组件
语言:
项目注重高并发:选用go
注重区块链:选用go、rust(主打高性能)
大型浏览网站(如电商):Java
技术架构与组件:
前端技术架构:bootstrap、vue、react
后端技术架构:django、flask、spring boot
数据存储:mysql、res
任务调度架构:jenkins
数据报表:echarts、vega、kibana、grafana、allure
2、常见的测试平台开发模式
大而全(比如公司产品定位是向外出售付费服务,需要花费较多人力):
python Django
Java Sping Boot
React(前端框架)
小而简(适合初学者):
python Flask
Java sparkjava
vue(上手快)
测试平台技术架构:
3、接口路由技术
Flask 是一个轻量级的 web 开发框架。 它依赖 jinja2 和 Werkzeug WSGI 服务的一个微型框架。
中文文档:http://docs.jinkan.org/docs/flask
英文文档:https://flask.palletsprojects.com/en/2.0.x/
from flask import Flask
#创建应用程序实例
app = Flask(__name__)
#添加路由
#https://ceshiren.com/search?q=appium
#(前端通过URL给后端发送请求,后端接收到请求后,会把请求映射到方法hello_world上,执行代码,并将执行结果返回到前端界面)
#https————协议
#ceshiren.com————域名
#/search————路由
#q=appium————请求参数
@app.route("/")
def hello_word():
return "<p>Hello, World!</p>"
@app.route("/demo")
def demo():
return "<p>这是demo</p>"
#动态路由
@app.route("/userinfo/<username>")
def username(username):
return f"这是{username}同学的信息"
#启动程序
if __name__ == '__main__':
app.run()
4、HTTP请求方法
HTTP请求方法一共15种,常用的有4种。
请求 | 说明 |
---|---|
GET | 获取服务器资源(对数据有长度限制,如IE浏览器限制2083个字符,超过了点提交,浏览器没有反应) |
POST | 新增服务器资源 |
PUT | 更新服务器资源(客户端提供改变后的完整资源) |
DELETE | 删除服务器资源 |
eg.
from flask import Flask
app = Flask(__name__)
# methods 是一个列表类型,可以添加多种 请求方式 ,get, post, put,delete...
@app.route("/cases", methods=["get"])
def get_case():
return {"code": 0, "msg": "get success"}
@app.route("/cases", methods=["post"])
def post_case():
return {"code": 0, "msg": "post success"}
# put 请求
@app.route("/cases", methods=["put"])
def put_case():
return {"code": 0, "msg": "put success"}
# delete 请求
@app.route("/cases", methods=["delete"])
def delete_case():
return {"code": 0, "msg": "delete success"}
if __name__ == '__main__':
app.run()
post请求工具(模拟post请求):curl、postman
5、测试环境配置
if __name__ == '__main__':
# flask 服务启动起来,
# 轮询等待的方式 ,等待浏览器发来请求,
# 会一直接受请求,直到程序停止
app.run(host="0.0.0.0", port=5008, debug=True) #监听主机
# 1、设置 host 参数
# 127.0.0.1 只能本机访问
# 0.0.0.0 服务发布到局域网
# 2、设置端口5000
# 3、打开debug模式,方便调试(运行过程中修改代码,直接ctrl+s,不需要重新跑)
二、前端界面
1、测试平台原型图
顶部栏、侧边栏、用户界面
三大组件
页面设计:vuetify
页面跳转:router
前后端通过接口交互方式:axios
2、VUE UI初始化项目
- 安装vue脚手架工具: npm install -g @vue/cli
- 启动vue ui: vue ui
- 新建项目: test_fronted
- 配置项目:选择默认
- 安装插件:router
- 安装插件:vuetify
- 安装依赖:axios
3、Vuetity搭建主界面Layout
vuetify UI组件官网:vuetifyjs.com
4、Vuetity搭建侧边栏 - 选择UI组件
- 选择Navigation drawers(导航抽屉)
5、Vuetity搭建测试用例界面