BAE玩转截图对比测试

BAE的截图测试可以精确地截取页面中某一元素的快照,单独的截图测试一般用于获取图源,作为后续图片处理分析的基础,而截图对比测试则可以用于页面样式的监控。网站的更新迭代往往伴随着页面样式布局的更新,而一些较为重点的元素,有时希望固定其样式不受样式更新的影响,截图对比测试就可以用于监控页面某元素,利用md5对比,捕捉其细微的变化。
以百度凤巢广告样式为例:广告样式模板的更新很快,每次ci都有可能会影响现有广告的样式,截图对比测试可以检测到广告样式是否变化,从而判断这次ci是否存在bug。
在截图对比之前,首先会使用截图测试获取一张基准图片,在bae自动测试中创建一个截图测试,指定页面url和被截取元素的查找方式即可。

提交任务后会得到元素的图片(配图仅用于说明用法)。


随后创建一个截图对比测试,重复基准图片的url和元素查找方式,并选择一个历史截图或者基准图片的url。

执行结果如果图片对比一致,则显示测试成功,如果如果存在差异,会在log中展示基准图片、本次测试的截图、对比差异图片。例如本次测试的截图如下:

虽然与基准图片差不多,但是飘红字体却明显不同,展示的差异图片可以显著地反应出来两者的不同之处:

根据图片对比测试的结果,即可准确分析定位问题所在。Bae支持多种页面元素定位的方法,基本能够做到定位页面中任意元素:
id:元素的id属性具有唯一性,是常用的定位方式,当元素存在固定的id值时,首推使用id定位元素。
classname:大部分元素具有class属性,虽然class属性并不一定是唯一的,但是也是常用的定位方式之一。
name:适用于元素存在name属性,且具有唯一性能够准确定位该元素的场景。
linktext:针对标签,已标签的文本值作为定位元素的方式。
tagname:使用元素的标签名定位元素,由于标签名是通用的,因此主要用于表示全页面,例如body标签。
cssselector:支持使用css选择器的语法定位元素。
xpath:支持使用xpath表达式定位元素,当元素没有id、class等明显特征时,可使用强大的xpath根据元素的特有属性值、父子关系来定位元素(chrome调试器使用ctrl+f支持xpath查找元素,可验证表达式的正确性,亦可右键元素,直接导出基于元素路径的元素的xpath表达式)。

最后,将截图对比测试总结为以下几个步骤:
1. 使用截图测试获取一张基准图片。
2. 选择一张基准图片进行截图对比测试。
3. 查询测试结果以及对比差异图片。

此条目发表在 BAE使用 分类目录。将固定链接加入收藏夹。

发表评论