注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

Web自动化页面样式检查尝试  

来自飞凌fly   2013-02-06 16:44:05|  分类: 自动化测试 |举报 |字号 订阅

  下载LOFTER 我的照片书  |
      

UI自动化测试局限性

      自动化测试的目的就是能够解放劳动力,提高测试效率。在UI自动化测试方面,selenium作为一个功能强大的框架,提供了比较方便的检查页面是否存在 某个元素的方法,也能够模拟点击、按键等一些操作,可谓是满足了自动化功能测试的大部分需求。但是对于许多对视觉或样式要求较高的页面来 说,selenium就显得比较无力,毕竟样式的检查并不像功能的检查,带有一定的主观性。
      但是也并非说样式的检查就不能通过自动化来实现了。分析手工测试样式检查的过程,其实测试人员也是根据视觉稿给出的既定样式作为标准,然后在页面上各个检 查点与这个标准进行对比,如果对比结果一致则通过,如果结果不一致就可以作为样式上的bug。如果要进行样式的自动化比较,很容易想到进行图片的对比,幸 运的是,selenium提供了截图的方法,因此可以容易的与selenium的功能自动化测试相结合,采用图片对比的方法来检查样式。与手工测试同样的 思路,如果我们事先有一个标准的图片作为模版,每次进行样式检查的时候自动截取相同位置的图片与标准的模版进行对比,就可以完成样式的检查。

图片对比的缺陷

      自动的截图然后进行比较也有一个问题,在实际的页面中,往往有一些我们并不需要进行验证的部分,例如文本,图片,统计的数字,滚动的广告等,这些元素往往 在不同的时间点都会有不同的展现,在手工测试的过程中我们会自动过滤这些干扰信息。但是如果进行自动化比较,就必须先设置好过滤这些因素,只着眼于需要检 查的样式点。在selenium中,我们可以容易的定位到元素,并得到元素相对于页面的位置和大小。因此我们只需要根据这些信息比较需要检查样式的元素就 行了。

图片对比算法

      在理论上,进行图片对比验证时,只需要验证图片每个像素的颜色值或者RGB分量的值是否一致即可。但在实际测试中,这样的图片对比方式会有一个问题,因为 在RGB色彩模型中,通常用8bit来存储RGB的每个分量,在24bit和32bit的颜色深度下会有不同的表现。无论是否采用压缩格式存储图片,如果 将32bit颜色转换为24bit颜色图片就会发生失真,同一位置像素的颜色值或RGB颜色向量值就就会有差异。此外,如果获取作为验证时基线的参照图片 时的环境与实际的测试执行环境有差异,即使是产品的界面元素没有发生任何变化,也有可能发生误报。因此为了避免这样的情况,可以在LAB色彩空间中比较像 素的颜色值,这是一种与设备无关的色彩空间。从RGB转换到LAB需要进行一些公式进行计算,这里不作详细叙述。

结合selenium的图片对比样式检查

      基本的步骤如下:
1.在用例中设置样式检查点,首次运行用例得到作为样本的截图
2.每次运行得到截图,与样本进行比较
3.如果比较结果一致,则测试通过;如果比较结果不一致,则输出差异的图片
      图片对比的算法采用的是在LAB空间中计算每个像素点的色差,如果色差大于一定的阈值则可以认为图片不一致。为了方便与现有的自动化测试用例相结合,封装了图片对比和图片截图及处理的类。在用例中,只需要添加一个方法即可:


Web自动化页面样式检查尝试 - 网易杭州QA - 网易杭州 QA Team
       传入的参数分别为WebDriver,用例的模块,样式检查点,检查点元素的xpath值。在配置文件type.properties中设置不同的值来区分当前是截取样本图片或是样式对比。

      例如设定的样本图片如下,检查点是相册页面的TAB条:

Web自动化页面样式检查尝试 - 网易杭州QA - 网易杭州 QA Team

运行程序进行截图比较(为了对比,在运行时设置默认显示下拉菜单):
Web自动化页面样式检查尝试 - 网易杭州QA - 网易杭州 QA Team

 输出差异图片,差异处标色突出:
Web自动化页面样式检查尝试 - 网易杭州QA - 网易杭州 QA Team
 
      由于检查点取的是元素相对于页面的位置,因此在任何CSS布局上值的偏差都会导致对比的失败,换言之,比如待检查的元素向下偏移了一个像素,那么在 空出的那一个元素的位置的色差就会发生变化,也就会通过对比得出差异。通常样本图片一旦确定后就不需要经常发生变动,如果遇到需求变更导致的页面样式排版 等的变化,只需要重新选取一张样本图片即可。

      这种对比方法适用于样式回归,在脚本运行到需要验证元素样式的位置插入验证方法即可。另外值得注意的是,样本图片和每次得到的截图必须有同样的分辨率,不然会匹配失败。

  评论这张
 
阅读(1533)| 评论(8)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016