可视化前端测试 | 易学教程

背景

相信进行过前端开发的同学都知道，前端测试不仅仅涉及到功能的测试，而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分析目前前端测试的现状，并讨论目前流行的测试工具，下篇文章将会介绍工具的使用方法

前端测试分类

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

界面样式测试

固定界面样式测试：主要针对文字内容不变的区域，例如页面的页头，页脚这类结构、内容不变的区域，而测试一般通过截图对比解决。结构不变界面样式测试：主要针对结构不变的区域，例如新闻区域这类结构不变，内容变化的区域，这类测试一般通过DOM元素对比解决。计算样式测试：主要针对计算样式不变的区域，这类测试一般通过比较计算样式解决，但是这种测试不推荐，因为测试成本比较大。

功能测试

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

多浏览器测试

多浏览器测试：基于界面样式测试、功能测试的基础上来进行不同浏览器的的测试。

性能测试

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

前端测试工具

欲善其事必利其器，在深入讨论如果打造可视化测试工具之前，我们先得讨论目前前端流行的测试工具

PhantomJS

工具地址：http://phantomjs.org/ 工具介绍：是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于页面自动化，网络监测，网页截屏，以及无界面测试等,简单来说就是通过js操作浏览器。工具可测试类型：性能测试、功能测试、界面测试。工具点评：作为众多测试工具的核心基础库，PhantomJS可谓无所不能，基本上在前端测试领域只有你想不到的，没有它做不到的，但是也正是因为PhantomJS的功能过于强大，更加接近原生浏览器，导致其语法十分晦涩。

casperjs

工具地址：http://casperjs.org/ 工具介绍：CasperJS 是基于PhantomJS作为内核的测试工具，为界面测试、功能测试提供了更加易用的API, 增强了测试的便利性工具可测试类型：性能测试、功能测试、界面测试工具点评：CasperJS极大的简化了PhantomJS的接口，特别在前端测试方面，封装了大量相关的函数，而且支持定制化的单元测试结果

PhantomCSS

工具地址：https://github.com/Huddle/PhantomCSS 工具介绍：PhantomCSS是基于CasperJS作为内核，并结合Resemble.js 去进行图像像素级的比较，支持不一致的地方。工具可测试类型：界面测试。工具点评：PhantomCSS加强了CasperJS在界面测试中图像比较的不足，在Resemble.js的基础上提供更加易用的图像比较接口。

Selenium

工具地址：http://www.seleniumhq.org/ 工具介绍：Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE(7、8、9)、Mozilla Firefox、Mozilla Suite等。这个工具的主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。工具可测试类型：多浏览器测试。工具点评：Selenium作为多浏览器的测试工具，解决前端在多浏览器测试的空缺。但Selenium与PhantomJS类似语法十分晦涩难懂，而且各个浏览器之间的兼容性对比比较容易出错。因不同浏览器之间由于标准原因很难做到像素级别的比较，因此不推荐使用Selenium作界面比较比较测试，而推荐进行功能回归测试。

Phantomas 工具地址：https://github.com/macbre/phantomas 工具介绍：基于PhantomJS的性能数据收集工具。工具点评：Phantomas作为自动化性能数据收集工具，解决了日常性能数据收集的问题的，但是性能优化的指标数据需要的是大样本、更加贴近用户数据的平均值，而不是使用假设在条件良好的环境下获取的性能数据，因此更推荐使用Phantomas作性能异常监控，而不是性能指标的评测。