前端自动化测试探索 _前端

背景测试是完善的研发体系中不可或缺的一环。前端同样需要测试，你的css改动可能导致页面错位、js改动可能导致功能不正常。由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。
为什么需要自动化测试一个项目最终会经过快速迭代走向以维护为主的状态，在合理的时机以合理的方式引入自动化测试能有效减少人工维护成本。自动化测试的收益可以简单总结为：
自动化的收益 = 迭代次数 * 全手动执行成本 - 首次自动化成本 - 维护次数 * 维护成本对于自动化测试来说，相对于发现未知的问题，更倾向于避免可能的问题。
可测试方向首先本文不会探讨单元测试方向，因为单测已经有完善的工具体系。但前端开发中，除了一些框架和库，愿意去写单测的少之又少。另外单测维护成本较高，而且也没法满足前端测试的所有需求。
前端自动化测试可以在几个方向进行尝试：

界面回归测试测试界面是否正常，这是前端测试最基础的环节
功能测试测试功能操作是否正常，由于涉及交互，这部分测试比界面测试会更复杂
性能测试页面性能越来越受到关注，并且性能需要在开发过程中持续关注，否则很容易随着业务迭代而下降。
页面特征检测有些动态区域无法通过界面对比进行测试、也没有功能上的异常，但可能不符合需求。例如性能测试中移动端大图素材检测就是一种特征检测，另外常见的还有页面区块静态资源是否符合预期等等。

业界开源工具工欲善其事，必先利其器。业界在自动化测试领域已经有不少优秀的框架和库，善于利用能事半功倍。
界面回归测试界面回归测试常见的做法有像素对比和dom结构对比两个方向。
像素对比
像素对比基本的思想认为，如果网站没有因为你的改动而界面错乱，那么在截图上测试页面应当跟正常页面保持一致。可以跟线上正常页面对比或者页面历史记录对比。像素对比能直观的显示图像上的差异，如果达到一定阈值则页面可能不正常。
PhantomCSS
像素对比比较出名的工具是PhantomCSS 。PhantomCSS结合了 Casperjs截图和ResembleJs 图像对比分析。单纯从易用性和对比效果来说还是不错的。

文章插图

不支持PhantomJS 2.0的问题
由于PhantomJS 2.0暂时禁用了文件上传，PhantomCSS默认不支持PhantomJS 2.0。如果还是想使用可以修改源码中获取图片文件的方式，改为通过ajax获取同域名下文件的方式，具体可以参考ResembleJs官网示例。
如何测试多浏览器
如果想测试多浏览器下的兼容性情况，只需要拿到多个浏览器下的截图即可。多浏览器测试最出名的当属selenium , selenium可以自动化的获取多个浏览器下的截图，前端工程师来说还可以借助Node的webdriver 来轻松开发测试脚本。
但selenium的安装和上手成本要稍大些，而且对于多浏览器来说，各个浏览器之间的兼容性对比容易出错。不同浏览器截图可能一像素的偏差就导致截屏对比失败，多浏览器可能更适用回归性测试。
响应式页面测试
国外有人将像素对比应用到了响应式页面上，如果您针对PC和移动设备使用同一个网页，响应式测试可以很快的回归你的页面在不同尺寸上的页面是否正常。与单纯针对移动端开发的响应式不同，同时支持PC移动的页面更容易发生错乱。
例如BackstopJS 项目，便是通过PhantomJS、capserJS等工具在不同尺寸下截图然后根据resemberJS进行像素比对判断是否正常: