关于前端页面监控工具的设想和实践

八戒你干嘛 · 发表于 2017-6-28 13:11:06

关于前端页面监控工具的设想和实践

必读：本人语文作文没及过格，请见谅

想法产生背景

　　公司背景：
　　游戏媒体公司

　　想法产生的原因：
　　领导让我每天检查已上线的web项目，其实就是查看样式是否有会问题，我粗略算了一下，每天需要检查50-60个页面，这需要大量的检查时间，所以我需要一个检查页面样式的工具，来替我检查页面样式，我只需要查看最后的结果。

　　为什么页面样式会产生错误？
　　原因1.人为原因，因为后台限制不足或没有限制，导致人工录入时错误，比如该填写的字段没有填写，填写的字段参数错误等。
　　原因2.开发修改导致。因为开发动了项目1的线上代码，而项目2使用了项目1的部分功能。导致项目1出错。
　　原因3.我想不起来了...

寻找解决方案

　　既然有了需求，我们就需要寻找工具，来解决目前的问题。
　　工欲善其事必先利其器。目前页面回归有两个方向：图片对比和DOM对比

　　图片对比
　　图片对比就是截取页面的部分图片，与历史图片对比，通过阀值来提示是否出错。工具有PhantomCSS等。

图片引用自参考

图片对比的缺点：文字较多，图片内容较少的页面不太试用。经常变换的图片不适用

　　图片对比适用于局部的检查。

　　DOM对比
　　个人觉得dom对比更适合页面回归的检查。同样是于历史记录进行对比。通过结构的变化，如新增节点、删除的节点、样式变化来监控页面。工具有：page-monitor

图片引用自参考

　总结
　　试用了这两类的对比工具，感觉仍然不太适合我。page-monitor虽然能回归检查页面，但即使没有错误的页面也需要我自己查看改动。我需要工具能自行判断页面，只将错误的页面告诉我。

为什么重造轮子

　　主要是以下几点：
　　- dom对比工具不能在多浏览器下运行，只能在PhantomJS下运行
　　- 大量页面的检测
　　- JS的错误检查
　　- 只需展示错误的页面
　　- 个人定制功能

重造轮子

　　开始重造轮子前，需要确定需要的技术。目前需要一个收集页面样式数据的工具，初步定为selenium。其次需要存储、对比和展示结果的工具，可使用springmvc+mybatis+mysql。（虽然感觉有点过了，有点笨拙，但是就是想试试自己能做出来不。）

页面样式收集工具

　　使用selenium2.5.3，因为有良好的多浏览器兼容性（selenium3.0不支持低版本IE浏览器）。
收集工具可称为客户端，客户端主要用于获取服务器的页面数据，启动浏览器并执行JS代码，将抓取的页面样式返还给服务端。

　　抓取的数据主要有：html元素的tagName, className,xpath, x轴坐标,y轴坐标,宽度,高度,及常用的css属性值（其中css键值对以MD5加密后存储）。抓取结果以json形式存储，并上传给服务端

如下：

数据、对比和报告

　　这里可称为服务端，服务端主要有三个功能，存储客户端需要的数据，如页面的url、返回的样式信息等。结果对比，将两次抓取的数据进行对比。报告展示，将有问题的结果告诉测试人员。

　　数据
　　基础数据部分的设计：
　　基础数据主要是包括：站点、页面、模块。
　　+ 站点：页面的集合
　　+ 页面：独立的页面，每个URL代表一个页面
　　+ 模块：客户需要抓取页面的某一个部分、通常使用的是xpath，页面的其他部分不会抓取和对比。如导航可以列为一个单独的模块。（对比时也是安模块对比的）这样做的好处是展现的结果清晰，可以直接显示页面的某一块是否出了问题，缺点是增加了后期的维护。当然也可以设置整个页面，如/html/body为模块值，这样就抓取整个页面。

　　保存站点的信息