一、背景
- 我们目前并没有很好的可视化数据来统计我们每个版本的测试质量，以及开发人员当月的特性bug数来统计各开发人员的提测质量
- 我们希望有一个质量平台可以提供各项的可视化数据来统计我们的一个版本质量。当然我们也希望我们做的各项自动化辅助工具能够集成进来方面大家的使用。
- 另外我们的发版报告能够做到一键发送等等想法，我们从零开始搭建一个自动化质量平台。
- 我们的最终目标是希望能实现：不管是服务端和app（ios/Android），以及H5，当开发提交任意部分存在代码提交的时候，能够拉取最新代码进行部署并能够执行自动化回归测试，及时的将情况反馈开发人员。
二、现状
平台架构如下：
平台框架图如下：
目前我们的基础框架已经搭建起来，目前只实现基本的一个框架，相应的功能待集成和开发，目前我们划分的模块如下：
- UI自动化：基于目前的Maxim自动遍历工具和协议脚本，这些完成之后后续会分层ios/Android/H5的自动化功能测试
- 接口自动化：基于开发提供的已有的接口实现项目管理，模块管理，用例配置，以及持续构建执行自动化
- 辅助工具：目前的运营商测试辅助工具、加解密的页面整合
- jira数据：一系列的可视化数据来统计我们的版本质量和提测质量
- 其他：不确定
- 测试报告：发版的报告做到一键发送
- 平台FAQ：报告平台的一些bug
三、项目结构
项目代码结构树：
项目代码结构解析：
- app文件夹为项目的主应用
- app/templates文件夹中用来存放网站每个html页面
- app/static文件夹中用来存放一些网站的静态文件，如平台框架的css样式，js模板，一些image背景图片，图标之类的
- app/models.py中用来存放数据库模型，所有的数据库表都在这里建立
- app/main/views.py中用来存放路由函数，所有的请求接口功能都是在这里定义的
- app/_ init _.py中主要初始化一个应用，app=Flask( _ name _)用来创建flask对象，并提供注册蓝图函数的功能
- app/main/_ init _.py 用来引入蓝图并创建蓝图对象
- test中是测试代码
- config.py用来存放项目的一些配置信息
- manager.py用来存放一些通用的函数，数据库操作类
四、如何协作
各模块各自独立开发和维护：
-
创建对应按钮的跳转路由和视图函数
①在base.html模板中找到对应的标签，加上对应的跳转链接。
例如加上：href="/user/maxim":
<li class="active"> <a href="/user/maxim" class="active"> <i class="fa fa-angle-right"></i> <span>Maxim自动遍历工具</span> </a> </li>
②然后在app/main/views.py里面加上对应的视图函数
例如：
@main.route('/user/maxim')
def maxim():
return render_template('/maxim.html')
-
编写待开发的html布局
①在app/templates/创建maxim.html
②然后编写它的html布局
jinja模板中最强大的就是模板继承，模板集成允许你构建一个包含你站点共同元素的基本模板“骨架”，并定义子模板可以覆盖的块。
我们是基于基本模板base.html模板进行开发，它定义了一个基本的HTML骨架，你可以使用左栏页面，补充子模版的空白内容，进行开发。
一般子模板继承例如：
{% extends "base.html" %}
{% block title %}Maxim自动化{% endblock %}
{% block content %}
<div style="padding: 50px 400px 20px 100px;">
子模板的内容
</div>
{% endblock %}
-
相应的表单交互可以写在子模板的<script></script>或者app/static/js/app1.v1.js里面
①方法一：写在app/static/js/app1.v1.js里面，并且可以增加它的复用性
例如一个下拉选择列表在maxim.html的布局如下：
<input type="text" id="run" class="form-control" placeholder="选择运行时间">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
运行时间
<span class="caret"></span>
</button>
<ul id="runtime" class="dropdown-menu pull-right">
<li><a href="#">0.5h</a></li>
<li><a href="#">1h</a></li>
<li><a href="#">2h</a></li>
<li><a href="#">4h</a></li>
我们可以在app/static/js/app1.v1.js后面加上对应的js命令，如下：
$("#runtime").on("click", "li", function(){$("#run").val($(this).text());});
②方法二：我们也可以在子模板下的<script></script>里面加上相应的ajax请求
html布局如下:
<div>
<button type="button" class="col-md-offset-1 btn btn-success" data-toggle="modal" data-target="#myModal"
id="send" onclick="add_modajax('#add_module')">点击提交</button>
</div>
<script>
... ...
function add_modajax(id) {
document.getElementById('popmsg').innerHTML='';
var data = $(id).serializeJSON();
if(data['module_name'].length == 0 )
{
document.getElementById('popmsg').innerHTML='模块不能为空!';
return;
}
if(data['lifting_time'].length == 0 )
{
document.getElementById('popmsg').innerHTML='提测时间不能为空!';
return;
}
var url;
var addpro =data['belong_user'];
if (id ==='#add_module') {
url = '/api/'+ addpro+'/add_module/';
}
$.ajax({
type:'post',
url:url,
data:JSON.stringify(data),
contentType:"application/json",
success: function (data) {
if (data ==='添加成功'){
document.getElementById('popmsg').innerHTML=data;
$('#myModal').modal('show');
$(function () {
$('#myModal').on('hide.bs.modal', function () {
window.location.href='/api/'+ addpro+'/add_module/';
})
});
}else {
document.getElementById('popmsg').innerHTML=data;
return;
}
},
error: function () {
alert('sorry,服务器可能开小差了，请重试')
}
});
... ...
</script>
五、相关链接
1.月分析之获取jira缺陷数据：http://url.cn/5CFZ8Ae
2.Python-Jenkins官网：https://pypi.python.org/pypi/python-jenkins/
3.Python-Jenkins Doc：http://python-jenkins.readthedocs.io/en/latest/index.html
4.CSS链接：http://www.runoob.com/css/css-link.html
5.js链接：http://www.runoob.com/js/js-tutorial.html
6.bootstrap相关组件：https://v3.bootcss.com/components/
