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

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

　　手工测试多个浏览器

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

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

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

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

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

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

　　现有CSS测试的问题

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

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

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

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

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

　　感知测试中的新成员 - Viff

　　在Github上查看Viff

　　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中，每天定时运行。但不推荐每次提交都运行，因为生成的图片文件会很快占满你的硬盘。

　　在PPT里了解更多

　　Viff才刚开始

　　Viff从刚开始从想法到这个版本，开发周期只有不到4周的时间。Viff需要经历更多的项目验证才能走得更远，如果你对Viff还有那么点兴趣，打算尝试一下，欢迎在Github Issue页面提交反馈。