Web前端性能测试平台开发(Flask)

lsekfe

听说你也在用Python？那一起愉快地玩耍吧—by晴空

开篇先打个小广告，在《牛刀小试-LR性能测试》那篇小文中我有说到性能测试要做到性能的原子化这样我们把性能可以分为前端，网络，中间件，App(应用)，操作系统，数据库等，今天我们来一起开发一个专门对Web前端性能自动化平台(后续可以在该版本的技术和基础上完善其他功能比如说:接口的自动化和接口性能以及对其他层的监控数据做可视化)。

一：要啥自行车？奢侈！

大家都懂敲代码之前有很多事情要做并且是最重要的事情(能敲代码的人多的是，最重要的是能产出发现问题并给出解决策略的idea)，what’s this? 当然是需求分析。

我们的愿景：
实现Web前端性能测试(自动遍历所有页面) 监控每个页面加载时间段的耗时，并且统计每个页面中附加的资源(css/js/img/XmlHttpRequest)最后利用精美的图表作展现。

技术可行性分析：
自动遍历所有页面？没问题啊 webdriver是这块儿的利器啊。
如何统计页面加载时间呢？performance.timing绝对靠谱。
哪儿有精美的图表？百度Echarts团队为你分忧解难。

技术选型：
这是个非常值得探讨的问题，有些Leader是综合团队现状和实施成本(新技术是需要花时间学啊)；有些知乎党就不说了啥最新用啥只用最新的不用最合适的；当然还有一些人完全是靠自己的兴趣拍脑袋决定的。
我们这里选择python+webdriver+flask+sqlite+bootstrap+jquery来完成我们这个小平台的开发，至于为嘛会选择这几种技术,学习成本低开发效率高总而言之一句话 ROI高！

好嘞~ 童鞋们可以先脑补下自己想要什么样的交互页面，我这里给出一个最简单的嘿嘿~

主页面(展示统计到的页面信息并以堆叠图展示性能数据)：

页面详情页面(展示页面中附加资源的组成以及该页面历史版本的数据对比图)

（ps：对技术选型这块儿同学们可以根据自己的需要做改变
如果你不想用flask 可以换成Django框架
如果你不想用sqlite数据库可以换成mysql或者其他的NoSql类数据库
如果你不想用jquery 那你的选择就更多了什么React,Nodejs,Vuejs,Angularjs还有啥backbone.js眼花缭乱。

我个人喜好小而精致的东西就拿flask来说吧它是个微型框架远远没有Django重，但是flask丰富的插件可以供我们快速地完成任务。所以嘛要啥Django 要啥自行车别太奢侈

技术没有Low不Low之分！只有适合不适合。

lsekfe

二：这个轮椅是专门为你设计的
这里是对应软件工程里的概要设计阶段。经过前面的梳理我们很清楚地知道自己想要的是什么了。嗯~  接下来咱把硬邦邦的需要转化为软件工程里的东东吧。
数据库：我们建两张表分别存放所有页面的统计数据就叫WebPages，还需要建立一张表来存放每个页面的详细信息我们叫PageDetail。
建表语句如下：

CREATE TABLE [PageDetail] (
  [project] text,
  [resourceName] text,
  [requestType] text,
  [pageRequestCount] INTERGER,
  [resourcetSize] INTERGER,
  [resourceLoadTime] INTERGER,
  [createTime] datetime,
  [pageName] text,
  [pageLoadTime] INTEGER);

CREATE TABLE WebPages (project text, name text ,url text  ,direct INTERGER ,domReady INTERGER, loadEvent INTERGER ,request INTERGER ,ttfb INTERGER,loadPageAll  INTERGER ,ifredirect INTERGER, createTime  datetime);

接口：
我们重新执行脚本来统计前端性能的话需要调用接口。
我们就命名一个接口吧 python-flask里接口的定义很简单哦~

1. # 重新执行测试脚本
   
2. @app.route('/redo', methods=['GET', 'POST'])
   
3. def redo():
   
4. if request.method == 'GET':
   
5. return u'该接口不支持GET方法访问'
   
6. else:
   
7. # 向测试环境发生get请求来验证测试环境是否存在
   
8. if env_test_code == 200:
   
9.         # 重新执行测试脚本
   
10. Else：
    
11. Return 测试环境不存在
    

复制代码

如果我们选择不同版本的话我们也需要调用接口来返回所选版本的测试数据:

1. @app.route('/index', methods=['GET', 'POST'])
   
2. def index():
   
3. if request.method == 'POST':
   
4. # 从ajax请求中取参数selected_version 取不到则为null
   
5. version_text = request.form.get("selected_version", "null")
   
6. else:
   
7.         version_text = '默认版本号'
   
8.     # 接下来巴拉巴拉从sqlite中取数据并返回
   

复制代码

lsekfe

三：走两步~  走两步！
让我们开始敲代码吧？好啊！来吧！
接下来我们先完成前端部分的开发工作然后再搞后台部分的任务，bootstrap&flask学起！

3.1：flask环境搭建和基础知识
啥是flask？
Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。
Flask也被称为 “microframework” ，因为它使用简单的核心，用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具。然而，Flask保留了扩增的弹性，可以用Flask-extension加入这些功能：ORM、窗体验证工具、文件上传、各种开放式身份验证技术。

环境搭建：
先用pip安装virtualenv库~ (这样做是为了单独拉一个python环境出来以便我们一台服务器上可以跑多套服务)
Dos窗口里敲命令:pip install virtualenv
然后，新建一个目录我们就叫AutoMan吧，Dos窗口里切换到AutoMan目录后执行：virtualenv venv(创建虚拟环境目录)
我们如果要在virtualenv里安装需要的包，需要先激活虚拟环境(切到venv/scirpts里执行activate)然后再执行pip安装即可。
我们这里需要安装的环境有flask,selenium,requests。我们可以分别执行安装，也可以将flask,selenium,requests放到requirement.txt文件里然后执行pip install –r requirement.txt。

目录说明：
1：Web我们的项目目录
1.1：static存放静态文件的目录，它下面又分为css,img,js目录分别存放样式文件图片和js文件(下载jquery.js放到js目录下，bootstrap.css放到css目录下)。
1.2：templates目录存放的是我们的html静态页面。
1.3：views.py里定义了接口以供前端发起请求。
1.4：__init__.py里初始化了Web这个服务。
2：和Web平级的venv是我们flask虚拟环境的目录，发布的时候不需要它。
3：AutoMan.db我们用到的sqlite数据库文件。
4：config.py文件里是我们用到的配置信息，比如说页面信息，统计性能的js方法等。
5：manage.py是我们程序的执行入口。
我们先来初始化我们的应用：
在__init__.py文件里输入：

接着，我们可以尝试下在页面输出一个字符串是什么感受，嗯啊，感受！
在views.py文件里输入：

1. # 定义路由
   
2. @web_app.route('/')
   
3. def root():
   
4. return 'Hello Flask'
   
5. 
   
6. 在manage.py文件里启动我们的应用：
   
7. from Web import web_app
   
8. web_app.run(host='0.0.0.0', port=5566)
   

复制代码

启动服务(我用的是pycharm调试)，在浏览器里输入http://localhost:5566

是不是很神奇~~~~   我们继续补充下flask中的路由知识。
Flask中route() 装饰器把一个函数绑定到对应的 URL 上，灰常简单！
比如下面的

1. @app.route('/ajaxAnalyse')
   
2. def ajax_analyse():
   
3. return render_template('ajaxAnalyse.html')
   
4. 我们通过浏览器访问localhost:5566/ajaxAnalyse，flask路由会指定该地址并返回ajaxAnalyse.html模板交给浏览器渲染后呈现给我们。
   
5. 
   
6. @app.route('/resource_<name>_<version>')
   
7. def resource_analyse(name, version):
   
8. print name
   
9. return render_template('pages_detail.html')
   

复制代码

如果我们想在路由中使用变量，<>包含起来即可，上面这个例子中我们使用两个变量，分别是name(页面名称)和version(项目版本)。
好嘞~  接下来就简单了，我们开始构造url路由。
首先是首页，首页的话我们想展示所有页面的统计信息和堆叠图。所以下面的代码即可实现（我们从数据库中读取数据并和html模板一起返回让浏览器渲染）。

1. # 主页显示所有页面前端信息
   
2. @app.route('/index', methods=['GET', 'POST'])
   
3. def index():
   
4. if request.method == 'POST':
   
5. # 从ajax请求中取参数selected_version 取不到则为null
   
6. version_text = request.form.get("selected_version", "null")
   
7. else:
   
8.         version_text = 'Syf1.1.1'
   
9. g.db = sqlite3.connect(config.db_dir)
   
10.     all_page_load_data = {}
    
11.     page_time_detail = []
    
12. # 从数据库中查询所有页面汇总信息
    
13. for value in ['direct', 'domReady', 'loadEvent', 'request', 'ttfb', 'loadPageAll', 'name']:
    
14.         sql = 'select ' + value + " from webLoad where project='" + str(version_text) + "'" + ' order by name'
    
15. current_data = g.db.execute(sql).fetchall()
    
16.         current_list = []
    
17. if value == 'name':
    
18. for data in current_data:
    
19.                 current_list.append(str(data).strip("(u'").strip("',)"))
    
20.             all_page_load_data[value] = current_list
    
21. else:
    
22. for data in current_data:
    
23.                 current_list.append(int(str(data).strip('(').strip(')').split(',')[0]))
    
24.             all_page_load_data[value] = current_list
    
25. # 查询每个页面的时间详细
    
26. page_detail_sql = "select name, url, loadEvent, domReady, request, ttfb, 0 as request_count, 0 as request_size " \
    
27. "from webLoad where project='" + str(version_text) + "'" + ' order by name'
    
28. page_detail_data = g.db.execute(page_detail_sql).fetchall()
    
29. for data in page_detail_data:
    
30.         page = {}
    
31.         page['name'] = data[0]
    
32.         page['url'] = data[1]
    
33.         page['loadEvent'] = data[2]
    
34.         page['domReady'] = data[3]
    
35.         page['request'] = data[4]
    
36.         page['ttfb'] = data[5]
    
37.         page['request_count'] = data[6]
    
38.         page['request_size'] = data[7]
    
39.         page_time_detail.append(page)
    
40.     g.db.close()
    
41. return render_template("index.html", all_page_load_data=all_page_load_data, page_time_detail=page_time_detail)
    
42. 
    

复制代码

lsekfe

咦？这里我们貌似引入了一个新词模板，没错flask中使用Jinja作为模板。
我们一起来看下Jinja中一些常用知识点。

1. <font color="black">0：表达式
   
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
   
3. <htmllang="en">
   
4. <head>
   
5. <title>My Webpage</title>
   
6. </head>
   
7. <body>
   
8. <ulid="navigation"> {% for item in navigation %}
   
9. <li><ahref="{{ item.href }}">{{ item.caption }}</a></li>
   
10. {% endfor %} </ul>
    
11. <h1>My Webpage</h1> {{ a_variable }}
    
12. </body>
    
13. </html></font>
    

复制代码

两种分隔符{% … %} 和 {{ … }}. 前者用于执行表达式, 后者打印表达式的结果.

1. 1.变量
   
2. #这两种表达方式是一样的，如果属性不存在默认的设置是返回空字符串
   
3. {{ foo.bar }}{{ foo['bar']}}
   
4. 2.Filters(过滤器，我们也可以自定义过滤器)
   
5. 对变量操作的函数，以|的形式写在后面
   
6. #几个例子
   
7. 1.        attr(obj, name)
   
8. foo|attr("bar")<=>(等价于) foo["bar"]
   
9. 
   
10. 2.batch(value, linecount, fill_with=None)
    
11. #从左边取3个值，fill_with为不够的情况下的填充值
    
12. {%-for row in items|batch(3,' ')%}
    
13. 
    
14. 4.注释Comments
    
15. #写在{# ... #}之间
    
16. {# note: disabled template because we no longer usethis
    
17. {%for user in users %}...{% endfor %}#}
    
18. 5.空白 whitespace control
    
19. 1.没有配置trim_blocks 和 lstrip_blocks
    
20. <div>{%ifTrue%} yay {% endif %}</div> -><div> yay </div>
    
21. 2.        配置了 trim_blocks 和 lstrip_blocks
    
22. <div> yay </div>
    
23. 3.        手动开启lstrip_blocks
    
24. <div> {%+ if something %}yay{% endif %} </div>
    
25. 4.        手动删除空白
    
26. {%for item in seq -%}{{ item }}{%- endfor %}
    
27. 6.转换符Escaping
    
28. # 使用{{}} ，或者raw block {% raw %}
    
29. {{'{{'}}{% raw %}<ul>{%for item in seq %}<li>{{ item }}</li>
    
30. {% endfor %}</ul>{% endraw %}
    
31. 7.Line Statements
    
32. 配置后可以mark a line as a statement
    
33. # for item in seq:
    
34. <li>{{ item }}</li>## this comment is ignored
    
35. # endfor
    
36. 这种方法同{%for item in seq %}<li>{{ item }}</li>{% endfor %}
    
37. 8.模板继承 Template Inheritance
    
38. #1.父类模板 Template
    
39. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
40. <html lang="en"><html xmlns="http://www.w3.org/1999/xhtml">
    
41. <head>{% block head %}
    
42. <link rel="stylesheet" href="style.css"/>
    
43. <title>{% block title %}{% endblock %}-MyWebpage</title>
    
44. {% endblock %}
    
45. </head>
    
46. <body><div id="content">{% block content %}{% endblock %}</div>
    
47. <div id="footer">{% block footer %}&copy;Copyright2008by<a href="http://domain.invalid/">you</a>. {% endblock %} </div>
    
48. </body>
    

复制代码

2.子类模板继承Child Template

1. {% extends "base.html" %}
   
2. {% block title %}Index{% endblock %}
   
3. {% block head %} {{ super() }}
   
4. <style type="text/css"> .important { color: #336699; } </style> {% endblock %} {% block content %} <h1>Index</h1>
   
5. <p class="important"> Welcome on my awesome homepage. </p> {% endblock %}
   

复制代码

3.还可以用self，引用block的变量

1. <title>{% block title %}{% endblock %}</title>
   
2. <h1>{{ self.title() }}</h1> {% block body %}{% endblock %}
   

复制代码

Super Blocks 引用parent block的内容

1. {% block sidebar %} <h3>Table Of Contents</h3> ... {{ super() }} {% endblock %}

复制代码

5.block 结束符也可以加上名字

1. {% block sidebar %} {% block inner_sidebar %} ...
   
2. {% endblock inner_sidebar %}
   
3. {% endblock sidebar %}
   

复制代码

6.block中的变量引用

1. {% for item in seq %} <li>{% block loop_item %}{{ item }}{% endblock %}</li> # 打印为空，因为block内部不能引用外面的item变量 {% endfor %}
   
2. 需要改变为 {% for item in seq %} <li>{% block loop_item scoped %}{{ item }}{% endblock %}</li> {% endfor %}
   

复制代码

1. 7.If a template object was passed to the template context you can extend from that object as well {% extends layout_template %}

复制代码

Jinja2模板的用法非常多，我们只需要掌握常用的即可，遇到不会的直接去官网搜吧。
下面贴上我这边Index.html页面源码中所用到的Jinja：
基类模板内容：

1. <!doctype html>
   
2. <html>
   
3. <head>
   
4. <meta charset="utf-8">
   
5.         <title>{% block title %} {% endblock %}</title>
   
6.         <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
   
7.         <script src="../static/js/jquery.min.js"></script>
   
8.         <script type="text/javascript" src="../static/js/echarts-all.js"></script>
   
9.         <script type="text/javascript" src="../static/js/bootstrap.js"></script>
   
10.         <script type="text/javascript" src="../static/js/events.js"></script>
    
11.         {% block head %}{% endblock %}
    
12. </head>
    
13. 
    
14. <body>
    
15.         <nav class="navbar text-info" role="navigation">
    
16.         <ul class="nav nav nav-tabs panel-title">
    
17.                         <li class="dropdown">
    
18.                                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">前端性能<b class="caret"></b></a>
    
19.                                 <ul class="dropdown-menu">
    
20.                                         <li><a href="/index">Clinical项目</a></li>
    
21.                                         <li><a href="#">GeStorage项目</a></li>
    
22.                                         <li><a href="#">Training项目</a></li>
    
23.                                         <li><a href="#">PerformanceTiming学习</a></li>
    
24.                                 </ul>
    
25.                         </li>
    
26.                         <li class="dropdown">
    
27.                                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">UI自动化测试<b class="caret"></b></a>
    
28.                                 <ul class="dropdown-menu">
    
29.                                         <li><a href="ui_auto">Clinical项目</a></li>
    
30.                                         <li><a href="ui_auto">GeStorage项目</a></li>
    
31.                                         <li><a href="ui_auto">Training项目</a></li>
    
32.                                         <li><a href="ui_auto">RobotFrame知识库</a></li>
    
33.                                         <li><a href="ui_auto">UI自动化脚本设计</a></li>
    
34.                                 </ul>
    
35.                         </li>
    
36.                         <li class="dropdown">
    
37.                                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">接口自动化测试<b class="caret"></b></a>
    
38.                                 <ul class="dropdown-menu">
    
39.                                         <li><a href="service_auto">Clinical项目</a></li>
    
40.                                         <li><a href="service_auto">GeStorage项目</a></li>
    
41.                                         <li><a href="service_auto">Training项目</a></li>
    
42.                                         <li><a href="#">接口测试知识库</a></li>
    
43.                                 </ul>
    
44.                         </li>
    
45.                         <li class="dropdown">
    
46.                                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">兼容性自动化测试<b class="caret"></b></a>
    
47.                                 <ul class="dropdown-menu">
    
48.                                         <li><a href="#">Clinical项目</a></li>
    
49.                                         <li><a href="#">GeStorage项目</a></li>
    
50.                                         <li><a href="#">Training项目</a></li>
    
51.                                         <li><a href="#">兼容性实施原理</a></li>
    
52.                                 </ul>
    
53.                         </li>
    
54.                         <li class="dropdown">
    
55.                                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">性能测试<b class="caret"></b></a>
    
56.                                 <ul class="dropdown-menu">
    
57.                                         <li><a href="#">Clinical项目</a></li>
    
58.                                         <li><a href="#">GeStorage项目</a></li>
    
59.                                         <li><a href="#">Training项目</a></li>
    
60.                                         <li><a href="#">性能测试实施细则</a></li>
    
61.                                 </ul>
    
62.                         </li>
    
63.                         <li><a href="per_auto">全局变量配置</a></li>
    
64.         </ul>
    
65. 
    
66.         </nav>
    
67. 
    
68. <div id="content" class="container">
    
69.                 {% block content %}
    
70.                 {% endblock %}
    
71. </div>
    
72. 
    
73. </body>
    
74. </html>
    

复制代码

我这边index.html内容如下：
{% extends "base.html" %} //继承基类模板

1. {% block title %}平台主页{% endblock %}
   
2. {% block content %}
   
3. <div class="row">
   
4.         <label>项目版本</label>
   
5.         <select id="project_version" onchange="optionChange()">
   
6.                         {% for option in project_version.Clinical %}
   
7.                 <option value={{option}}>{{option}}</option>
   
8.                         {% endfor %}
   
9.         </select>
   
10.         <button id="redo" onClick="ajaxReRun()">重新执行</button>
    
11. </div>
    
12. <br>
    
13. <table id="pages_summary" class="table table-hover">
    
14.         <th>页面名称</th>
    
15.         <th>页面URL</th>
    
16.         <th>DNS耗时</th>
    
17.         <th>Request耗时</th>
    
18.                 <th>解析DOM耗时</th>
    
19.         <th>DomReady耗时</th>
    
20.         <th>LoadEvent耗时</th>
    
21.         <th>白屏时长</th>
    
22.         <th>整个页面加载耗时</th>
    
23.                 {% for page in page_load_result %} //Jinja中的循环体
    
24.         <tr class="active hover">
    
25.                 <td class="active"><a href="javascript:{{page.page_name}}()">{{page.page_name}}</a></td>
    
26.                         <script type="text/javascript">
    
27.                                 function {{page.page_name}}()
    
28.                                 {
    
29.                                         var href = $('#project_version').get(0).selectedOptions[0].text + "_" +"{{page.page_name}}";
    
30.                                         location.href = href
    
31.                                 }
    
32.                         </script>
    
33.                 <td class="active">{{page.url}}</td>
    
34.                         <td class="active">{{page.dns}}</td>
    
35.                 <td class="active">{{page.request}}</td>
    
36.                         <td class="active">{{page.dom_parser}}</td>
    
37.                 <td class="active">{{page.dom_ready}}</td>
    
38.                 <td class="active">{{page.load_event}}</td>
    
39.                 <td class="active">{{page.whitewait}}</td>
    
40.                 <td class="active">{{page.loadall}}</td>
    
41.         </tr>
    
42.                 {% endfor %} //Jinja中循环体的结束标识
    
43. </table>
    
44.         <br><br>
    
45. <h4>所有页面加载数据统计堆叠图</h4>
    
46.         <div id="page_summary_chart">
    
47.         <table id="data_chart" width="100%">
    
48.         <tr>
    
49.                 <td align="center">
    
50.                 <div id="chart" class="text-align：center" style="width: 1250px;height:650px;">
    
51.                                 <script type="text/javascript">
    
52.                                 // 基于准备好的dom，初始化echarts实例
    
53.                                 var myChart = echarts.init(document.getElementById('chart'));
    
54. 
    
55.                                 // 指定图表的配置项和数据
    
56.                                 option = {
    
57.                                     tooltip : {
    
58.                                         trigger: 'axis',
    
59.                                         axisPointer : {type : 'shadow'}
    
60.                                     },
    
61.                                     legend: {
    
62.                                         data:['dns(ms)', 'request(ms)', 'dom_parser(ms)', 'dom_ready(ms)', 'load_event(ms)', 'whitewait(ms)', 'loadall(ms)'],
    
63.                                     },
    
64.                                     toolbox: {
    
65.                                         show : true,
    
66.                                         feature : {
    
67.                                             mark : {show: true},
    
68.                                             dataView : {show: true, readOnly: false},
    
69.                                             magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
    
70.                                             restore : {show: true},
    
71.                                             saveAsImage : {show: true}
    
72.                                         }
    
73.                                     },
    
74.                                     calculable : true,
    
75.                                     xAxis : [
    
76.                                         {
    
77.                                             type : 'value'
    
78.                                         }
    
79.                                     ],
    
80.                                     yAxis : [
    
81.                                         {
    
82.                                             type : 'category',
    
83.                                             data :  {{page_chart_data.page_name|safe}}
    
84.                                         }
    
85.                                     ],
    
86.                                     series : [
    
87.                                         {
    
88.                                             name:'dns(ms)',
    
89.                                             type:'bar',
    
90.                                             stack: 'Time',
    
91.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
    
92.                                             data: {{page_chart_data.dns|safe}}
    
93.                                         },
    
94. 
    
95.                                         {
    
96.                                             name:'request(ms)',
    
97.                                             type:'bar',
    
98.                                             stack: 'Time',
    
99.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
    
100. 
     
101.                                             data: {{page_chart_data.request|safe}}
     
102.                                         },
     
103. 
     
104.                                         {
     
105.                                             name:'dom_parser(ms)',
     
106.                                             type:'bar',
     
107.                                             stack: 'Time',
     
108.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
     
109.                                             data: {{page_chart_data.dom_parser|safe}}
     
110.                                         },
     
111. 
     
112.                                         {
     
113.                                             name:'dom_ready(ms)',
     
114.                                             type:'bar',
     
115.                                             stack: 'Time',
     
116.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
     
117.                                             data: {{page_chart_data.dom_ready|safe}}
     
118.                                         },
     
119. 
     
120.                                         {
     
121.                                             name:'request(ms)',
     
122.                                             type:'bar',
     
123.                                             stack: 'Time',
     
124.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
     
125.                                             data: {{page_chart_data.request|safe}}
     
126.                                         },
     
127. 
     
128.                                       {
     
129.                                             name:'load_event(ms)',
     
130.                                             type:'bar',
     
131.                                             stack: 'Time',
     
132.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
     
133.                                             data: {{page_chart_data.load_event|safe}}
     
134.                                         },
     
135.                                         {
     
136.                                             name:'whitewait(ms)',
     
137.                                             type:'bar',
     
138.                                             stack: 'Time',
     
139.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
     
140.                                             data: {{page_chart_data.whitewait|safe}}
     
141.                                         },
     
142.                                         {
     
143.                                             name:'loadall(ms)',
     
144.                                             type:'bar',
     
145.                                             stack: 'Time',
     
146.                                             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
     
147.                                             data: {{page_chart_data.loadall|safe}}
     
148.                                         }
     
149.                                     ]
     
150.                                         };
     
151.                                 // 使用刚指定的配置项和数据显示图表。
     
152.                                 myChart.setOption(option);
     
153.                         </script>
     
154.                         </div>
     
155.                         </td>
     
156.                 </tr>
     
157.         </table>
     
158.         </div>
     
159. {% endblock %}
     
160. (PS：在一个表格中循环查询到的结果并输出到页面)
     

复制代码

下面贴出来我这边views.py文件里的全部内容供同学们参考：

1. # -*- coding:utf-8 -*-
   
2. 
   
3. import sqlite3
   
4. import sys
   
5. import time
   
6. 
   
7. import requests
   
8. from flask import render_template, g, redirect, url_for, request, send_file
   
9. from selenium import webdriver
   
10. 
    
11. import config
    
12. from Web import web_app
    
13. 
    
14. reload(sys)
    
15. sys.setdefaultencoding("utf-8")
    
16. 
    
17. 
    
18. # 定义根路由
    
19. @web_app.route('/')
    
20. def root():
    
21.     return render_template('login.html')
    
22. 
    
23. 
    
24. @web_app.route('/login_success')
    
25. def login_success():
    
26.     return render_template('login_success.html')
    
27. 
    
28. 
    
29. # 定义路由index
    
30. @web_app.route('/index', methods=['GET', 'POST'])
    
31. def index():
    
32.     if request.method == 'POST':
    
33.         version = request.form.get("selected_version", "null")
    
34.     else:
    
35.         version = 'syf1.1.1'
    
36.     g.db = sqlite3.connect(config.db_dir)
    
37.     summary_data_sql = 'select page_name, url, dns, request, dom_parser, dom_ready, load_event, whitewait, loadall '\
    
38.                        + " from WebLoad where version='" + str(version) + "'" + ' order by page_name'
    
39.     page_load_result = query_db(summary_data_sql)
    
40.     g.db.close()
    
41.     project_version = config.project_version_info
    
42.     # 将页面信息转换为Echarts使用的数据
    
43.     page_chart_data = {}
    
44.     page_name_list = []
    
45.     page_dns_list = []
    
46.     page_request_list = []
    
47.     page_dom_parser_list = []
    
48.     page_dom_ready_list = []
    
49.     page_load_event_list = []
    
50.     page_whitewait_list = []
    
51.     page_loadall_list = []
    
52.     for result in page_load_result:
    
53.         page_name_list.append(str(result['page_name']).strip("u'"))
    
54.         page_dns_list.append(result['dns'])
    
55.         page_request_list.append(result['request'])
    
56.         page_dom_parser_list.append(result['dom_parser'])
    
57.         page_dom_ready_list.append(result['dom_ready'])
    
58.         page_load_event_list.append(result['load_event'])
    
59.         page_whitewait_list.append(result['whitewait'])
    
60.         page_loadall_list.append(result['loadall'])
    
61.     page_chart_data['page_name'] = page_name_list
    
62.     page_chart_data['dns'] = page_dns_list
    
63.     page_chart_data['request'] = page_request_list
    
64.     page_chart_data['dom_parser'] = page_dom_parser_list
    
65.     page_chart_data['dom_ready'] = page_dom_ready_list
    
66.     page_chart_data['load_event'] = page_load_event_list
    
67.     page_chart_data['whitewait'] = page_whitewait_list
    
68.     page_chart_data['loadall'] = page_loadall_list
    
69.     return render_template('index.html', project_version=project_version, page_load_result=page_load_result, page_chart_data=page_chart_data)
    
70. 
    
71. 
    
72. # 定义重新执行脚本的路由
    
73. @web_app.route('/redo', methods=['GET', 'POST'])
    
74. def redo():
    
75.     if request.method == 'GET':
    
76.         return 'route does not support get'
    
77.     else:
    
78.         # 向测试环境发生get请求来验证测试环境是否存在
    
79.         env_for_test = request.form.get("selected_version", "null")
    
80.         current_env = config.hosts['164'] + env_for_test
    
81.         env_test_code = requests.get(current_env).status_code
    
82.         if env_test_code == 200:
    
83.             # 定义页面名称列表
    
84.             all_page_data = {}
    
85.             page_urls = config.page_urls
    
86.             timing_js = config.timing_js
    
87. 
    
88.             # 统计页面加载时间的6个维度登录页专用
    
89.             index_data = {'dns': 0, 'request': 0, 'dom_parser': 0, 'dom_ready': 0, 'load_event': 0, 'whitewait': 0, 'loadall': 0}
    
90.             # index页面资源的信息登录页专用
    
91.             page_index_info = []
    
92.             # 将统计数据保存到sqlite
    
93.             connection = sqlite3.connect(config.db_dir)
    
94.             cursor = connection.cursor()
    
95.             # 先删除页面资源细分表webDetailLoad所有数据
    
96.             clear_resource_sql = "delete from PageDetail where project='Clinical' and version='" + env_for_test + "'"
    
97.             cursor.execute(clear_resource_sql)
    
98.             # 先清理上次的数据
    
99.             clear_webload_sql = "delete from WebLoad where project='Clinical' and version='" + env_for_test + "'"
    
100.             cursor.execute(clear_webload_sql)
     
101.             connection.commit()
     
102.             # get到clinical登录页(登录页需要单独收集其页面加载性能指标)
     
103.             driver = webdriver.Chrome()
     
104.             login_url = current_env + '/login/index'
     
105.             driver.get(login_url)
     
106.             driver.maximize_window()
     
107.             time.sleep(5)
     
108.             time_line = driver.execute_script(config.timing_js)
     
109.             # 将页面加载时间存入all_page_data
     
110.             for key in index_data.keys():
     
111.                 index_data[key] = time_line[key]
     
112.             # 将index的数据存入all_page_data
     
113.             all_page_data['Index'] = index_data
     
114. 
     
115.             # 获得index页面所有的资源实体
     
116.             entries = driver.execute_script(config.get_entries_js)
     
117.             # 遍历登录页面所有资源
     
118.             for items in entries:
     
119.                 # 以页面名：数组形式保存页面信息
     
120.                 page_index_resource = {}
     
121.                 # 资源名称
     
122.                 page_index_resource['name'] = items['name']
     
123.                 # 资源类型分类
     
124.                 resource_type = str(items['name']).split('.')[-1]
     
125.                 if resource_type in ['jpg', 'png', 'gif', 'jpeg']:
     
126.                     page_index_resource['resourceType'] = 'img'
     
127.                 elif resource_type == 'js':
     
128.                     page_index_resource['resourceType'] = 'js'
     
129.                 elif resource_type == 'css':
     
130.                     page_index_resource['resourceType'] = 'css'
     
131.                 else:
     
132.                     if items['initiatorType'] == 'xmlhttprequest':
     
133.                         page_index_resource['resourceType'] = 'xmlhttprequest'
     
134.                     elif items['initiatorType'] == 'script':
     
135.                         page_index_resource['resourceType'] = 'js'
     
136.                     else:
     
137.                         page_index_resource['resourceType'] = 'other'
     
138.                 # 资源大小
     
139.                 page_index_resource['transferSize'] = items['transferSize']
     
140.                 # 资源耗时
     
141.                 page_index_resource['duration'] = items['duration']
     
142.                 # 将登录页资源信息存入列表
     
143.                 page_index_info.append(page_index_resource)
     
144.                 # 将登录页资源列表信息存入字典对象对应key为Index
     
145.                 save_resource_sql = 'insert into PageDetail ' + "values('Clinical','" + str(env_for_test) + "'," + "'" + str(
     
146.                     'Index') + "'," + "'" + str(page_index_resource['name']) + "'," + "'" + str(
     
147.                     page_index_resource['resourceType']) + "'," + "'" \
     
148.                                     + str(page_index_resource['transferSize']) + "'," + "'" + str(
     
149.                     page_index_resource['duration']) + "'," + 'CURRENT_TIMESTAMP)'
     
150.                 cursor.execute(save_resource_sql)
     
151.                 connection.commit()
     

复制代码

lsekfe

具体内容请查看。

szc123qq