概览:可视化前端测试

作者:莫卓颖

可视化前端测

背景

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

前端测试分类

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

  • 界面样式测试 固定界面样式测试:主要针对文字内容不变的区域,例如页面的页头,页脚这类结构、内容不变的区域,而测试一般通过截图对比解决。 结构不变界面样式测试:主要针对结构不变的区域,例如新闻区域这类结构不变,内容变化的区域,这类测试一般通过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作性能异常监控,而不是性能指标的评测。

总结:

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

原文链接:http://ivweb.io/topic/55e3e7e6771670e207a16bd6

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Debian社区

Debian下安装搜狗拼音输入法

2013年12月,搜狗与Ubuntu Kylin团队开始合作开发“搜狗输入法Linux版”。经过五个月的合作,于2014年4月17日,正式发布了1.0版本。20...

29330
来自专栏玄魂工作室

PPT导出时嵌入字体的方法

使用ppt的时候,很多时候会使用一些特殊字体,在其他计算机上无法正常显示。这个时候就需要导出PPT的时候进行字体嵌入。 1.1 常规方法 所谓常规方法,是指那些...

35640
来自专栏Nian糕的私人厨房

WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

10330
来自专栏coderhuo

ARM下char类型符号问题

最近在项目中遇到问题,在x86平台下调试好的程序,移植到arm上,程序行为完全变了。

7510
来自专栏林德熙的博客

win10 uwp 装机必备应用 含源代码

zhxilin大神在文章说到了使用await Windows.System.Launcher.LaunchUriAsync(new Uri(uri));打开应用...

15320
来自专栏微信小开发

小程序界面设计指南

“上一期文章讲了小程序平台的特点以及场景需求,这一期文章主讲小程序设计规范,这是我通过阅读官方文档后归纳总结的,需要详细了解的小伙伴可以去看官方设计指南,文末有...

74270
来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(9)--常用组件的使用方法[附源码]

经过两天的学习,把常用的组件都学习了一遍,并做成了App 学习可能真没有捷径,跟学习html有点类似,都是一个控件一个控件学习并使用,最后拼凑成一个系统 链接:...

19660
来自专栏移动开发之家

从Android到React Native开发(一、入门)

大家好┏ (ω)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。 关于React N...

9620
来自专栏web前端教室

MVVM - 遇见未来

MVVM是新的前端开发模式,它的全称是Model View ViewModel,据说最初是由微软提出来的,。。 这种模式的实现,大意上是用自定义的标签把数据绑定...

20670
来自专栏移动开发之家

从Android到React Native开发(一、入门)

 大家好┏ (^ω^)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。

10420

扫码关注云+社区

领取腾讯云代金券