概览：可视化前端测试

腾讯云技术社区-掘金主页持续为你们呈现云计算技术文章，欢迎你们关注！

---

做者：莫卓颖

背景

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

前端测试分类

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

• 界面样式测试

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

• 功能测试

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

• 多浏览器测试

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

• 性能测试

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

前端测试工具

欲善其事必利其器，在深刻讨论若是打造可视化测试工具以前，咱们先得讨论目前前端流行的测试工具

• PhantomJS

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

• casperjs

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

• PhantomCSS

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

• Selenium

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

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

总结：

随着互联网产品的日益复杂，前端的单页面应用、前端界面、前端功能逻辑变得愈来愈复杂，为了保证功能的正常，所以前端测试变得愈来愈重要，可是进行前端测试必然会影响到前端开发的效率，所以咱们后面将会提供一种自动化前端测试方案来平衡效率与稳定性的问题。

原文连接：ivweb.io/topic/55e3e…

相关推荐
前端 fetch 通讯
教你用webgl快速建立一个小世界
前端开发框架简介:angular和react

---

此文已由做者受权腾讯云技术社区发布，转载请注明文章出处
原文连接：www.qcloud.com/community/a…
获取更多腾讯海量技术实践干货，欢迎你们前往腾讯云技术社区