本文章转载于搜狗测试
测试需求
日常任务中涉及到一些和线上样式对比的需求，如无线resin版本升级，需要验证下升级后页面样式与线上升级之前的版本页面样式展现是否一致，由于无线搜索涉及到的query较多，且不同query对应的结果样式差别较大，因此通过人工的方式来比较几乎是不可能的，那如何解决这个问题呢？
技术解决方案
PhantomJS+图片对比实现无线网页样式与线上样式验证。
涉及到的技术工具：Python、Phantomjs、Beyond Compare。
PhantomJS简介
先介绍下什么是PhantomJS，PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。说白了，PhantomJS就是一个没有UI的浏览器。其中页面中的翻动、点击需要通过代码实现。目前PhantomJS已经在网络爬虫、web自动测试得到了广泛应用。这个时候有人就会提出疑问了，一个都没有UI的浏览器，怎么实现图片对比呢？请看下面的介绍。
Beyond Compare简介
Beyond Compare是一套由Scooter Software推出的软件，主要用途是对比两个文件夹或者文件，并将差异以颜色标示。
脚本的设计过程：
1、设置UA，可以根据我们自己的需求来配置不同的UA;
2、 分别配置无线前端线上、线下的url，通过在本机设置host将wap.sogou.com配置成线下的测试机IP；
配置线上无线前端的url：
配置线下无线前端的测试url：
3、 实现截屏功能，并保存图片到本地；
4、 实现线上、线下图片对比功能，将线上url截图和线下url截图进行对比，并打印出对比结果。如果完全一致返回结果1，如果存在差异返回浮点数，表示两张图片的相似度。
5、 部分测试结果如下：
测试结果验证
通过脚本，发现了不同的图片，那如何来验证呢？
推荐一款图片对比的软件：Beyond Compare，可以对比失败的case具体有什么异同， 如第一个case：
上面两张为原图，下面一张为对比后的结果。
可以看到线上的环境中有一个广告，线下环境中没有展现，最终影响了图片对比度，由于广告每次返回的内容有可能不一致，在某些情况下广告的展现不在测试范围之内，PhantomJS可以在访问url之后调用js将线上广告结果的div隐藏掉，方法如下：
A）定义js:
B）执行js：
执行js后再将图片对比，发现case通过：
再次用Beyond Compare对比下，效果如下：
总结下该方法的优点：
1、case设计几乎没有门槛，只要有query就可实现，不用检测页面元素；
2、case失败后定位问题非常好定位，直接对比图片即可；
3、一个case可以验证结果页中的所有结果，覆盖面大；
4、效率较人工检验有很大提高，一个query整体时间花销在2s左右，完全一致的case不再需要人工校验，只需要关注异常case，节省了大量的测试时间；
5、个别case人工不易发现，比如我们对比结果的第六个query，对比度结果为0.86，如果人工比较的话不易察觉，对比如下图：
