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

发表于:2017-4-26 09:15

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:晴 空    来源:51Testing软件测试网原创

  开篇先打个小广告,在《牛刀小试-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。
   ... ...
   查看全文内容,请点击下载http://www.51testing.com/html/64/n-3717264.html
  三:走两步~走两步!
  让我们开始敲代码吧?好啊!来吧!
  接下来我们先完成前端部分的开发工作然后再搞后台部分的任务,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是我们程序的执行入口。
   ... ...
   查看全文内容,请点击下载http://www.51testing.com/html/64/n-3717264.html
版权声明:51Testing软件测试网及相关内容提供者拥有51testing.com内容的全部版权,未经明确的书面许可,任何人或单位不得对本网站内容复制、转载或进行镜像,否则将追究法律责任。
《2023软件测试行业现状调查报告》独家发布~

精彩评论

  • 菜鸟@大虾
    2017-5-08 13:00:07

    谢谢~ 后续可以将接口这块儿的平台化,另外UI自动化 如果使用RF  也可以对接进来;如果再加上job执行然后再集成各种编译工具  逐步取代Jenkins

  • tianyalikai
    2017-4-26 11:18:57

    方案很好

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号