开篇先打个小广告,在《牛刀小试-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之分! 只有适合不适合。)
二:这个轮椅是专门为你设计的
这里是对应软件工程里的概要设计阶段。经过前面的梳理,我们很清楚地知道自己想要的是什么了。嗯~接下来咱把硬邦邦的需要转化为软件工程里的东东吧。
数据库:我们建两张表分别存放所有页面的统计数据就叫WebPages,还需要建立一张表来存放每个页面的详细信息 我们叫PageDetail。
... ...
三:走两步~走两步!
让我们开始敲代码吧?好啊!来吧!
接下来我们先完成前端部分的开发工作然后再搞后台部分的任务,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是我们程序的执行入口。
... ...
版权声明:51Testing软件测试网及相关内容提供者拥有51testing.com内容的全部版权,未经明确的书面许可,任何人或单位不得对本网站内容复制、转载或进行镜像,否则将追究法律责任。