前端测试回顾及我们为什么选择Karma

前端测试,或者UI测试一直是业界一大难题。最近Q.js使用Karma作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么Q.js选用Karma而不是其他测试框架。

像素级全站对比

曾今有一批人做过这样的UI测试,即最终页面图像是否符合预期,通过图片差异对比来找出可能的问题。

如图所示,所谓像素级站点对比,即利用截屏图像前后对比来找出,站点前后差异,从而发现问题。

Q: 为什么需要这种测试呢? A: CSS容易被破坏,在大型响应式重构案例中,像素级全站对比是一个比较好的测试方案。

目前常用的两大工具:

录制型测试

比较经典的有Selenium,本质上提供了编码型测试,但是因为提供了录制功能,所以广泛被用于录制测试。

编码测试

即通过编写代码来测试UI,但由于各种兼容性问题,这里出现了各种方案。

JsTestDriver式

即启用一个服务器,然后让测试浏览器链接该服务器,便可自动运行测试任务,下面是BusterJS中的一个演示:

  • 启动服务器
  • 打开测试浏览器,并连上服务器,按下按钮使得服务器捕获该浏览器
  • 在服务器发起一次测试,则每个被捕获的浏览器都会跑一次测试用例
静态测试

即通常的打开一个页面进行测试,下面是Mocha的静态测试页面例子:

无头浏览器测试

即通过无头浏览器,如:PhantomJSSlimerJS来进行测试

持续集成测试

这个就需要看持续集成系统能提供什么浏览器支持了,一般至少可以提供PhantomJS来进行测试,比较优秀的持续集成系统有:

下面是Backbone在Sauce Labs里的测试,可见,可使用各种浏览器进行测试:

Karma

Karma是一个测试任务管理工具,可以很容易和Jasmine、Mocha等市面上常用的测试框架打通,通过其插件可以快速集成到各种环境中。例如:本地环境、持续集成环境。

她可以使我们只需输入一行命令就就行测试,并在文件进行修改后,重跑一次用例,过程就像用NodeJS进行测试一样一样的。

所以目前在各大开源项目中使用,下面是使用Q.js进行测试的完整输出:

bogon:Q.js miniflycn$ gulp test
[23:58:30] Using gulpfile ~/github/Q.js/gulpfile.js
[23:58:30] Starting 'test'...
INFO [framework.browserify]: 70617 bytes written (0.30 seconds)
INFO [framework.browserify]: bundle built
INFO [karma]: Karma v0.12.35 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser PhantomJS
INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket YFLQOvttbrfH9Mmxvqeu with id 10368837
WARN [web-server]: 404: /favicon.ico
INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket E1mb7b7zs7Ugi4u-vqev with id 68559341

Start:
  data
    ? should able to get a vm data
    ? should able to set a vm data
    ? should able to pop a vm data
    ? should able to unshift a vm data
    ? should able to shift a vm data
    ? should able to call indexOf for a DataArray
    ? should able to call splice for a DataArray
    ? should return itself when key is undefined
    ? should able to watch vm change
    ? should able traversing a array which has some property
    ? should able to watch push method
  class
    ? should able to define & require a hello component
    ? should able to create a child component
    ? should able to set the data of a children component
  custom
    ? should able to create a custom filter
    ? should able to toggle class
    ? should able to set a class
  if
    ? should able to use if directive
  attrbute
    ? should able to set src
    ? should able to set attribute
  on
    ? should able bind event
  repeat
    ? should able repeat
    ? should able push a data
    ? should able splice a data
    ? should able multiple repeat
    ? should not throw a error when repeat element has been modified
    ? should throw a error when a filter hasn't implemented
    ? should able to use double repeat
  utils
    ? should find a element
    ? should able to copy a array use slice
    ? should able check contains
    ? should able to set and get data
    ? should able to add & remove event
    ? should able to extend objects
    ? should able to extend from multiple srouces
    ? should able to add & remove class
    ? should able to check a object

Finished in 2.447 secs / 2.318 secs

SUMMARY:
? 78 tests completed

在这个构成中,Karma会根据我们设定的配置,自动在本地启动ChromePhantomJS进行测试。

那么我们为什么选择用Karma来测试呢?

  • 方便集成测试
  • 较为通用的开源解决方案,google出品
  • Q.js 是一个js库,不需要像素级测试,由于是程序员我们也不需要录制测试,我们需要的是静态测试(开发阶段)、以及持续集成测试(集成阶段)
    • 可以根据不同环境,选择不同浏览器进行测试。例如原来我们只能使用PhantomJS进行测试,现在我们可以在集成系统中使用FirefoxPhantomJS进行测试,在本地环境我们还可以ChromeIE进行自动化测试。如果有钱,我们更可以购买Sauce Labs(关键没钱= =)的服务来得到更多浏览器支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native热更新方案

随着 React Native 的不断发展完善,越来越多的公司选择使用 React Native 替代 iOS/Android 进行部分业务线的开发,也有不少使...

1.3K7
来自专栏琯琯博客

awesome-php-cn软件资源

PHP 资源列表,内容包括:库、框架、模板、安全、代码分析、日志、第三方库、配置工具、Web 工具、书籍、电子书、经典博文等。 依赖管理 依赖和包管理库 Com...

2235
来自专栏DeveWork

Intro.js:网站功能操作分布引导插件(附中文独家使用教程)

现在如果你是第一次访问Jeff的阳台的首页,你会发现会出现如下图的一个“导游”界面。这个就是使用Intro.js 这个javascript 插件制作的。在当初接...

3329
来自专栏吉浦迅科技

【入门篇】对于新手,拿到Jetson TX2如何愉快地装..

对于新手,面对江湖盛名的Jetson TX2,接好电源、显示器,开机,顺利进入图形界面,此时内心一定澎湃无比,然后发自内心地问一句:接下来我干嘛! 此时我会建议...

3627
来自专栏進无尽的文章

扒虫篇-Bug日志 Ⅰ

之前在集成调试 AsReader的时候,遇到的bug,是一家日本企业生产的产品,官方文档比较简单而且还不写清楚,表面上看是报的不兼容 64位模拟器的错误,我用...

792
来自专栏salesforce零基础学习

salesforce 零基础开发入门学习(一)Salesforce功能介绍,IDE配置以及资源下载

目前国内已经有很多公司做salesforce,但是国内相关的资料确是少之又少。上个月末跳槽去了新公司,主要做的就是salesforce,不过当时想要看一些相关资...

38810
来自专栏维C果糖

创建 GitHub 仓库的步骤及方法

在「GitHub 主页介绍及修改个人信息」一文中,我们已经对 GitHub 的个人主页有了一些了解,并且完成了对个人信息的修改。但是美中不足的是,我们还没有自己...

1726
来自专栏伪君子的梦呓

用 Python 制作微信好友个性签名词云图

0.前言 上次查看了微信好友的位置信息,想了想,还是不过瘾,于是就琢磨起了把微信好友的个性签名拿到,然后分词,接着分析词频,最后弄出词云图来。 1.环境说明 W...

3639
来自专栏以南小隐-数通那些事儿

EVE-NG-PRO导入IOL镜像《EVE-NG系列教程三》

4742
来自专栏张戈的专栏

WordPress强迫症技巧:让文章(ID)地址完美连续(障眼法)

这几天博客一直被 CC 攻击,虽然也没带来什么影响,但是因为多 IP 的并发会导致带宽不够,所以暂时用上了百度云加速。因此,导致之前前台刷新缓存功能也就失效了,...

3174

扫码关注云+社区