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

  • 时间:
  • 浏览:0
  • 来源:大发uu快3_uu快3注册_大发uu快3注册

前端测试回顾及亲戚亲戚让让让他们 为哪些地方选折 Karma

2015-06-08 00:10  Justany_WhiteSnow  阅读(...)  评论()  编辑  收藏

前端测试,愿意 UI测试时不时是业界一大大问题。最近Q.js使用Karma作为测试任务管理工具,本文在回顾前端测试方案的一起,也分析下为哪些地方Q.js选折 Karma而是不是 一点测试框架。

像素级全站对比

曾今有一批人做过一点 的UI测试,即最终页面图像是不是 符合预期,通过图片差异对比来找出愿意 的大问题。

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

Q: 为哪些地方须要这俩测试呢?

A: CSS容易被破坏,在大型响应式重构案例中,像素级全站对比是一个多多 多比较好的测试方案。

目前常用的两大工具:

  • BackstopJS
  • PahntomCSS

录制型测试

比较经典的有Selenium,本质上提供了编码型测试,愿意 愿意 提供了录制功能,一点广泛被用于录制测试。

编码测试

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

JsTestDriver式

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

  • 启动服务器

  • 打开测试浏览器,并连上服务器,按下按钮使得服务器捕获该浏览器

  • 在服务器发起一次测试,则每个被捕获的浏览器是不是 跑一次测试用例

静态测试

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

无头浏览器测试

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

持续集成测试

这俩就须要看持续集成系统能提供哪些地方浏览器支持了,一般大约还都都还可以 提供PhantomJS来进行测试,比较优秀的持续集成系统有:

  • Sauce Labs
  • Travis

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

Karma

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

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

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

bogon:Q.js miniflycn$ gulp test
[23:58:60

] Using gulpfile ~/github/Q.js/gulpfile.js
[23:58:60

] Starting 'test'...
INFO [framework.browserify]: 70617 bytes written (0.60

 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(关键没钱= =)的服务来得到更多浏览器支持。
  • 分类 Javascript
  •