关于前端页面监控工具的设想和实践
关于前端页面监控工具的设想和实践必读：本人语文作文没及过格，请见谅
想法产生背景
公司背景：
游戏媒体公司
想法产生的原因：
领导让我每天检查已上线的web项目，其实就是查看样式是否有会问题，我粗略算了一下，每天需要检查50-60个页面，这需要大量的检查时间，所以我需要一个检查页面样式的工具，来替我检查页面样式，我只需要查看最后的结果。
为什么页面样式会产生错误？
原因1.人为原因，因为后台限制不足或没有限制，导致人工录入时错误，比如该填写的字段没有填写，填写的字段参数错误等。
原因2.开发修改导致。因为开发动了项目1的线上代码，而项目2使用了项目1的部分功能。导致项目1出错。
原因3.我想不起来了...
寻找解决方案
既然有了需求，我们就需要寻找工具，来解决目前的问题。
工欲善其事必先利其器。目前页面回归有两个方向：图片对比和DOM对比
图片对比
图片对比就是截取页面的部分图片，与历史图片对比，通过阀值来提示是否出错。工具有PhantomCSS等。
图片引用自参考
https://testerhome.com/uploads/photo/2017/d37de477a7497764bad2e0d541fd7666.png!large
图片对比的缺点：文字较多，图片内容较少的页面不太试用。经常变换的图片不适用
图片对比适用于局部的检查。
DOM对比
个人觉得dom对比更适合页面回归的检查。同样是于历史记录进行对比。通过结构的变化，如新增节点、删除的节点、样式变化来监控页面。工具有：page-monitor
图片引用自参考
https://testerhome.com/uploads/photo/2017/951e031d63e3897d2f749f10895d4e03.png!large
总结
试用了这两类的对比工具，感觉仍然不太适合我。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形式存储，并上传给服务端
如下：
https://testerhome.com/uploads/photo/2017/d23eca20bf6f567d9d0d3bed3af290f6.jpg!large
数据、对比和报告
这里可称为服务端，服务端主要有三个功能，存储客户端需要的数据，如页面的url、返回的样式信息等。结果对比，将两次抓取的数据进行对比。报告展示，将有问题的结果告诉测试人员。
数据
基础数据部分的设计：
基础数据主要是包括：站点、页面、模块。
+ 站点：页面的集合
+ 页面：独立的页面，每个URL代表一个页面
+ 模块：客户需要抓取页面的某一个部分、通常使用的是xpath，页面的其他部分不会抓取和对比。如导航可以列为一个单独的模块。（对比时也是安模块对比的）这样做的好处是展现的结果清晰，可以直接显示页面的某一块是否出了问题，缺点是增加了后期的维护。当然也可以设置整个页面，如/html/body为模块值，这样就抓取整个页面。
保存站点的信息
https://testerhome.com/uploads/photo/2017/6704a02e64ca293c4b47adb14b78173b.jpg!large
页面信息
https://testerhome.com/uploads/photo/2017/62c887ca42c7da4bba9fe2e15da7e183.jpg!large
具体模块
https://testerhome.com/uploads/photo/2017/8a9a8485975ca913aaa06fdbef5f7f86.jpg!large
对比
对比功能，如果该页面有基线（手动设置），则与基线对比，否则与上次历史记录对比。
报告
主要展示所有页面的对比状态和对比结果
https://testerhome.com/uploads/photo/2017/16224176ba2e228a646f73f22a7dc88b.jpg!large
单个页面的报告
https://testerhome.com/uploads/photo/2017/63e3dff2e20c561a786632dd48f2e2c2.jpg!large
https://testerhome.com/uploads/photo/2017/6eca5d9919c0b0cb44dd88ffbf10bbff.jpg!large
遇到的问题和不足
以后再说...后面写的有点不详细了，刚干完活有点困了，望见谅。欢迎各位探讨、拍砖和批评
这个属于UI界面回归，对页面的样式进行抓取、保存和对比，不会有动态的交互。你说的那个应该属于功能自动化了吧。 今天看到个 BackstopJS ，css样式回归工具，不知道能不能满足楼主需要 selenium+browsermobproxy也可以做到的，我自己也写了一套，先参考意一下楼主的看看我自己的有什么可以改进
页:
[1]
