1.前端自动化测试 之 视觉测试

前端自动化测试 之 视觉测试

前端测试分类

前端测试主要分五大方向测试，而这五大方向也分很多小方向测试，首先简单的介绍每个方向的概念

1. 界面样式测试

   • 固定界面样式测试：主要针对文字内容不变的区域，例如页面的页头，页脚这类结构、内容不变的区域，而测试一般通过截图对比解决。

   • 结构不变界面样式测试：主要针对结构不变的区域，例如新闻区域这类结构不变，内容变化的区域，这类测试一般通过DOM元素对比解决。

   • 计算样式测试：主要针对计算样式不变的区域，这类测试一般通过比较计算样式解决，但是这种测试不推荐，因为测试成本比较大。

2. 功能测试

   • 服务器数据预期测试：主要针对用户在前端界面进行某种操作后，提交数据给后台后，测试后台能否返回预期的数据

   • 界面功能测试：主要针对用户在前端界面进行某种交互性操作后，测试能否获取预期的功能、界面交互

3. 多浏览器测试

   • 多浏览器测试：基于界面样式测试、功能测试的基础上来进行不同浏览器的的测试，俗称兼容性测试。

4. 性能测试

   • 白屏时间：用户浏览器输入网址后至浏览器出现至少1px画面为止。
   • 首屏时间：用户浏览器首屏内所有的元素呈现所花费时间。
   • 页面回归时间：用户浏览器非第一次加载所有的元素呈现所花费时间。
   • 用户可操作时间(dom ready) ：网站某些功能可以使用的时间。
   • 页面总下载时间(onload):网站中所有资源加载完成并且可用时间。

5. 质量测试

   • 雅虎网站优化规则

什么样的项目适合自动化测试呢？

如上图所示，真正工作中无法全部满足以上条件，所以需要作出权衡，一般来说，只需要满足以下几点，就可以对项目开展自动化测试：

1. 需求稳定，不会频繁变更

   自动化测试最大的挑战就是需求的变化，而自动化脚本本身就需要修改、扩展、debug，去适应新的功能，如果投入产出比太低，那么自动化测试也失去了其价值和意义；

   折中的做法是选择相对稳定的模块和功能进行自动化测试，变动较大、需求变更较频繁的部分用手工测试；

2. 多平台运行，组合遍历型、大量的重复任务

   测试数据、测试用例、自动化脚本的重用性和移植性较强，降低成本，提高效率和价值；

3. 软件维护周期长，有生命力

   自动化测试的需求稳定性要求、自动化框架的设计、脚本开发与调试均需要时间，这其实也是一个软件开发过程，如果项目周期较短，没有足够的时间去支持这一过程，那自动化测试也就不需要了；

4. 被测系统开发较为规范，可测试性强

   主要出于这几点考虑：被测试系统的架构差异、测试技术和工具的适应性、测试人员的能力能否设计开发出适应差异的自动化测试框架；

什么是UI测试

对于界面布局，传统的测试都是由人工对比设计图和产品界面。当界面有修改之后，再由人通过肉眼去检查修改(包括正确的和错误的修改)，这样即费时而且测试结果又不稳定，因为人工对比测试存在两个巨坑：1.效率低；2.人的不确定性。对于拥有大量复杂界面的Web应用，界面布局的测试的数量巨大，再加上这两个问题，导致这类应用的界面布局测试/回归测试时间很长，成本很高，所以很多基于Agile(敏捷开发)项目基本不可能在迭代周期内高质量的完成其视觉测试。对于每天做一次，那更是不可能完成的任务。

视觉感知测试/视觉回归测试

为了解决上面提到的各种问题，视觉感知测试孕育而生。它使用传统的对图片进行二进制比较的办法，结合敏捷迭代开发的理念，产生的一种针对界面布局的自动化测试方法。

视觉感知测试

视觉感知测试就是对第一个版本的所有界面进行第一次测试。

视觉感知测试包含以下几个主要的测试步骤：

需要注意的是！

1. 配对URL（忽略hostname）

   通过配对URL，对所有的截图按照相同的URL进行分组。当然有时候会出现新的界面，有时候老的界面会被删除。对于新的界面就需要人工进行首次验证测试 。

2. 像素级别的图形比较

   对于分组之后的截图进行像素级别的比较并生产差别图。有时候为了降噪，可以只对局部关心的组件进行比较。

3. 人工查看所有不同

   最后通过人工审查差别图报告完成测试。

视觉感知测试结果：

预期(expected)	实际(actual)	比较结果(diff)

视觉回归测试

我们认为如果一个界面通过第一次的人工验证并发布之后，它就是一个正确的标准界面，并且是包含了人工测试价值的资产。当下一次测试的时候，这部分价值就应该被保留并重用起来，用于减少新的一次测试的时间，从而实现界面的快速回归测试。

视觉回归测试包含以下几个主要的测试步骤：

回归和感知测试流程差不多只是差异值要更小一点，并且只有效果图需要替换内容。

视觉自动测试怎么做？

要进行视觉自动测试，有三种方式。
* 第一种是截屏比对（局部、整页）。
* 第二种通过JavaScript调用window.getComputedStyle()获取计算后的样式并进行断言。
* 第三种dom结构对比加css样式对比。

这三种各有明显的优势和不足。 第二种方式强绑定了实现，从而变得可能比较脆弱。 第一种方式离设计太近了，当页面中有可变内容时就会有问题。
第三种方式，无法进行视觉感知测试结果只能进行视觉回归测试和上一版的dom继续比较差异。

我更倾向与第一种截图对比；它的测试基于用户所见而不是用户所见的抽象。当然第三种也是非常好的 page-monitor 有兴趣的朋友可以自行了解。为什么第三种那么好为什么不使用呢？因为上面这个库是基于phantomjs并且它的实现方式过于复杂不适合新手玩玩。

像素对比工具，有哪些？

名称	地址
PhantomCSS	https://github.com/HuddleEng/PhantomCSS
GhostStory	https://github.com/thingsinjars/Hardy
Cactus	https://github.com/winston/cactus
Needle	http