前端项目中的绝大多数代码是GUI界面，如何测试GUI一直是比较头疼的问题，主流的UI自动化（QTP、Selenium等）也大都缺少对界面的验证，这主要和前端项目迭代性高、维护成本大相关。GUI界面自动化目前在业界也没什么较好的解决方案。
一个标准的互联网应用产品的前端部分，粗略估计大概有20%的业务基础代码比较稳定，比如通用组件、通用算法和数据模块等，可以针对这些建立复杂一些的API和GUI测试用例来保证质量。剩下80%的部分不是很稳定，每天都在迭代，针对他们维护case的成本非常高。目前业界中号称做了自动化测试的项目，也大多是在做那稳定的20%。
二八原则在此得以体现。目前业内大部分测试团队还是靠堆人来完成简单的界面测试，可以说，GUI界面测试的成本非常高。那是否可以略过这80%？显然是否定的，事实往往遵循墨菲定律：任何事都没有表面看起来那么简单；会出错的事总会出错。可是即使耗费了人力进去，常令人沮丧的是，仍有隐蔽且无法轻易测出的BUG。
初衷
如何解决UI界面测试的困局？从0出发，测试人员是如何测试界面的，首先要有个参照物，可能是设计图，也可能是上一版本的产品；看 ⊙＿⊙ 、肉眼比对，俗称 “大家来找茬”。 几个页面还可以玩玩，但是，如果是全站点，本身页面就多，还包括很多弹窗，再好玩也不好玩了。。。
那是否可以把这一整套流程进行自动化呢？初步设定了以下方案，就差Coding了 (? ??_??)?
实际上这个想法并非独树一帜，国外已有团队使用，早在2012年，Twitter分享的开发流程，其中有一个环节就是页面对比监控，利用了一个叫pdiff的工具，每次提交代码，会自动对比页面之间的差异然后提醒测试人员注意回归。
解决方案——页面差异检测
网站页面截图
很多UI自动化测试工具/框架均支持页面截图，实现起来不难。之前开发的 Selenium + Python UI自动化测试框架，就可支持截屏；且支持各种测试场景，如点击后出现弹窗或一系列操作等；也支持多浏览器（IE、Chrome、FireFox）。
以上为一个很简单的用例示例，即访问百度页面并截图，访问本地下载的百度页面截图（做了一些元素变更）
针对截屏，部分页面可能有如下问题：
1、需滚动条滚屏截图
2、一些自动播放的插件，如幻灯片自动播放等截图会不一样
对于问题一，建议直接加JS代码操作滚动条操作后分段截图；至于问题二，插件可设置为静止（测试服务器），或者就让差异存在，检测出之后人工排除该问题即可。
若是静态页面，且不需要登录等授权操作，一些多浏览器截图服务可被使用，如阿里FTS前端测试服务： http://fts.aliyun.com/index.htm
图像比对
图像比对本身可作为一个大课题，这边化大为小，直接使用Python的Image模块来进行简单的图像比对（程序保证截屏的图片大小一致）。
以下图片来自上述自动跑UI自动化用例的自动截图，下文作为示例图来分析如何图像比对（有看出哪不同了么）：
这边的图片对比代码原理：获取图像每一像素点，若RGB相同，定为相同，不同的定为不同，相同的像素/总像素即为相似比。
实际上大部分页面相似度较高，若仅对截取的页面进行比对，示例相似度为 0.995369926989。那么问题来了，判定相似率必定100%才是相同，这合理么？虽然后续又跑了好几次截图，与图一对比都是100%。。。
先略过100%判定的问题，再来看下图三，初看和图一没什么不一样，但执行代码后得出的相似率为0.977268178495。程序不会骗你，肯定有不一样。所以，再仔细看看 = — =
看出来了么？Tida~ 就是二维码图片。来看下我对本地页面做了什么，实际仅仅改了一个数字，即下图样式，原 “qrcode-item-1” 改成了 “qrcode-item-2” 而已。
上述示例展示了较隐蔽且会被人眼忽视的盲区，且若为真实Bug，影响较大。通过页面比对，可以轻易检测出类似Bug。那么问题又来了，检测出不同后，如何标识出不同的范围？程序代码固然可以捞出一大堆不一样的元素点坐标，并以不同颜色标识，但看上去很恶心（试过。。真的很恶心），如果能像找茬一样框出不同可好。于是想到了裁切对比并标识的想法 ???? 顺便也可解决大100%定判定的问题，来具体看下如何操作。
