+ 首页>>工具>>单元测试工具>>内容

工具Viff,一种新的页面样式测试策略500+次围观

Viff,一种新的页面样式测试策略

测试页面样式时遇到的问题

在我们测试Web页面的时候,往往需要面对如下几个问题

手工测试多个浏览器

Viff,一种新的页面样式测试策略

多浏览器

跨浏览器测试,测试页面在多个浏览器中的表现,浏览器可能包括Chrome,Firefox,Safari,IE和Opera。除了测试基本功能是否健全以外,还需要测试外观样式,因为当前的CSS技术在各个浏览器里的表现不完全一致。比如会看看IE和其他现代浏览器的差距有多大,从而判定之间的差别是否能被接受。

除了测试多个浏览器之外,很可能需要进行多版本的测试,现在浏览器的更新速度是非常快的,这样就导致了用户群在浏览器版本之间的跨度变大,为了保证质量,多个版本的测试也是必要的。比如IE6到IE10的测试。

其次,随着Mobile Webapp的发展,响应式设计的广泛应用,页面的测试还需要照顾到移动设备和多尺寸屏幕。

可以看出,页面样式的测试情况是十分复杂的,更甚的是,我们现在都是用手工在测试,耽误很多时间。

可复用的样式代码容易影响现有样式

Viff,一种新的页面样式测试策略

复用的影响?

我们推荐在开发样式的时候使用SASS或LESS的CSS预编译语言,这样可以更好的管理CSS代码,但是也会导致一个问题,一个可复用的样式的修改可能会影响很多个页面,比如一个颜色变量的改变。而我们往往是让页面引入所有样式,很难判断哪些页面会有影响。可能一个能力很强的QA能预见到一些并做了测试,可能有些影响到了回归测试的时候才发现,也可能到了生产环境上也没有发现。

现有CSS测试的问题

样式不是不可以“测试”的,项目中可能会使用

expect($('#my-target')).toHaveCss({margin: '10px'});
expect($('#my-target')).toHaveClass('box');

的方式去测试某个元素是否含有某种特定的属性并断言值是多少,但是每个元素在页面上的样式是由它的Computed Style决定的,这些属性是非常多的,几乎做不到通过这些属性值来表达某个元素是否显示得正确,而且这样代码维护成本是非常大的,频繁的UI修改你同时需要修改测试。同样地,如果你断言某个元素是否拥有某种样式,最终的页面显示难以预见。

依赖感觉的测试是不严谨的

无论是谁来做页面样式的测试,都是基于看和感觉的,这种测试不能有效的发现细节问题,不能得出严谨的结果,每个测试者都会有自己的答案。虽然说眼见为实,但有时候看到了也不可信赖。例子中的两个对比图片,肉测很难发现细小的差异。

感知测试中的新成员 – Viff

viff Github 地址

Viff的解决方式是,通过配置测试页面,对比在同一个浏览器下,同一个页面在不同环境(开发环境,生产环境)的截图差异来,发现最终样式的影响,从而提升交付质量和信心。

Viff的出现不是用来解决“依赖感觉来测试困难”这个问题的。它作为感知测试领域中的一员,是一个半自动的测试框架,通过(整体或部分)的截图对比来帮助测试人员快速发现开发造成的样式改变和影响,提升页面样式的测试效率和软件交付信心。

现在Viff支持的功能有

  • 基于CSS的部分页面截图对比
  • 支持Firefox、Chrome、Safari、Opera、PhantomJS、IE、iOS、Android。Firefox、PhantomJS、iOS表现完美
  • 命令行支持
  • 定义处理页面事件
  • 报表功能帮助差异Review

Viff测试策略

在使用Viff的过程中,几个基本的测试策略有

  • 尽量保持一样的页面内容,如果页面内容是动态生成的,尽量使用基于CSS的部分截图功能
  • 没有必要测试所有页面,尽量找到能够找到覆盖CSS样式的最小集合。推荐模块化的方式开发CSS的好处就在于此
  • 针对复用性的UI组件,推荐使用基于CSS的部分截图功能
  • 如果有style guide页面,直接测试它也可以
  • 期望建立一种使用Viff的机制,每天或者部署前查看Viff的报表,也可以把Viff继承到CI中,每天定时运行。但不推荐每次提交都运行,因为生成的图片文件会很快占满你的硬盘。

via ishouldbeageek.me

+ 猜你喜欢...

===== 关于 DiggerPlus =====
DiggerPlus是国内新锐测试人垂直内容博客,专注于挖掘测试工具,普及测试技术,专注于测试人能力提升,博客上线后就受到广大测试人的热烈追捧;此外,DiggerPlus深度整合评测资源,揭秘科技数据和真相,让读者更懂科技,更好地把玩科技。 我们始终保持"独立,客观,严谨,优秀"的优良作风,努力为读者带来源源不断的优质内容。想访问更多酷毙的测试人网站?赶紧来DiggerPlus测试人网址导航看看吧!

===== DiggerPlus Team =====
DiggerPlus Team是DiggerPlus官方发起的团队,这是一群热爱科技,热爱测试,喜欢深度挖掘的热血测试人,他们是评测师,测试专家。 我们欢迎优秀的测试人加入DiggerPlus Team。 加入DiggerPlus,可以成为我们的认证Dper,认证Dper拥有DiggerPlus独一无二的专栏并得到个人展示。

===== DiggerPlus 官方读者群 =====
DiggerPlus官方读者群(一)

+ 关于本文作者

Python/C/C++/Javascript程序员,持续学习者,目前专注于前端开发。

的专栏 | 专栏作者 | 访问小A的主页

+ 已有1个评论

Copyright © 2014 DiggerPlus. 74 queries in 0.394 seconds.
使用合作网站账号快速登录,更多精彩等着您: 开源中国