1、Jasmine
Jasmine是一个行为驱动的测试开发框架,用于对JavaScript代码进行测试。它不依赖其它任何JavaScript框架,也不需要DOM。它的语法简洁、明确,写测试非常容易。
2、Mocha
Mocha是一个功能丰富的JavaScript测试框架,既运行于Node.js环境中,也可以运行于浏览器环境中。Mocha以串行方式运行测试,能做出灵活而准确的报告,也能将测试中未捕捉的异常映射到正确的测试用例。
3、Chai
Chai是个支持BDD/TDD的库,可用于node和浏览器,可配合任何JavaScript测试框架使用。
4、QUnit
QUnit是个功能强大又易于使用的JavaScript单元测试框架。jQuery、jQueryUI和jQueyMobile项目都使用这个框架,它能测试普通的JavaScript代码。
5、Sinon
Sinon.JS为JavaScript提供了独立的spies、stubs和mocks[译者注:Spy、Stub和Mock都是测试专用名词,Stub常被翻译为桩,spies是Spy的复数形式,是一种可以监视方法、调用和参数的技术]。它不依赖任何东西,可以配合任何单元测试框架工作。
6、Karma
Karma是针对连通浏览器的一个框架无关测试运行器。每一个测试结果对应每个浏览器,它的测试和显示都是通过命令行暴露给开发者的,这样他们就可以看到浏览器测试的通过或失败。
7、Selenium
Selenium有一个简单的目标:就是自动化浏览器。它主要用于自动化测试web应用程序,但是只是很简单地考虑到了基于网络的管理任务。
8、WebdriverIO
WebdriverIO允许用户仅添加几行代码就可以控制浏览器或移动应用程序,使测试代码更简单、简洁、易读。集成的TestRunner同样允许你以同步的方式调用异步命令,这样你不需要关心如何处理Promise以避免竞态条件。此外,它取消了所有的繁琐的设置工作,并且会为您管理的Selenium会话。
9、Nightwatch
Nightwatch.js是一个易于使用的Node.js,它是为基于浏览器的app和网站设计的终端到终端(E2E)的测试方法。它使用强大的W3CWebDriverAPI,用于在DOM元素上执行命令和断言。
10、PhantomCSS
PhantomCSS获得CasperJS捕获的屏幕截图,并使用Resemble.js将其与基准图进行对比,以测试RGB像素差异。java课程http://www.kmbdqn.cn/发现PhantomCSS然后生成图像差异对比,用于帮助您找到原因。
11、PhantomFlow
PhantomFlow使用决策树提供UI测试方案。针对PhantomJS,CasperJS和PhantomCSS的NodeJS包装器——PhantomFlow能够流畅地在代码中描述用户流程,同时生成用于可视化的结构化树数据。
@ TOC
阅读本文章之前,相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了,那么他们之间究竟有什么区别呢?
gulp文档上面有这么一句话 ,也就是说 gulp是一个自动化构建工具;
gulp的一些功能如下(包括但不限于):
其实Webpack和另外两个并没有太多的可比性
傻瓜式起步照搬官网文档
1.安装
2.在项目根目录下创建一个名为 gulpfile.js 的文件:
3.运行 gulp:
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档
新建一个项目gulp-test
环境:
1.新建文件以下文件如下
其中 gulpfile.js 是我们gulp的配置文件,启动gulp默认会找个这个文件并执行;
2.接下来安装依赖
一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了
安装依赖
这里页面实时刷新只讲这个 gulp-connect ,其他详情可以参照 Browsersync 和文章 gulp-livereload
安装完依赖后配置gulpfile.js如下:
大概讲解一下gulpfile.js:
gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务(task)
如上我们定义了 my-task-js , my-task-css , html , clean , default , watch , server 等任务,其中:
my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下;
my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下;
html 是将 符合所提供的匹配模式的html进行监听,如果有变化则connect.reload()
clean 是如果任务重新启动时 删除旧文件;
default gulp默认启动的任务
watch gulp的api 监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。
server 依赖gulp-connect启动一个服务器
配置完gulpfile.js之后,我们给js和css及html加点东西:
首先js/helloworld.js
css/index.scss
index.html
运行gulp
浏览器效果:
接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:
按保存之后,终端给我们报了一个错:
查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法,有问题解决问题,es6=>es5
解决方案:
安装gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
运行
依然报上面的错;找了一些原因发现,虽然安装了相关依赖,却没有配置.babelrc文件,即babel还没转化es6
根目录添加.babelrc文件
重新运行:
查看dist下的js文件
改变helloworld.js检查页面是否刷新
保存,页面的天空蓝换成你们喜欢的yellow颜色
修改index.scss 查看是否会刷新页面
最后修改index.html 查看是否会刷新页面
今天主要学习了gulp的简单项目搭建及实时更新配置;其实gulp类似于grunt的弱化版,但更简单好用,只是插件会少一些,目前主流的项目搭建工具主要是webpack,但依然有不少项目还用着gulp或者grunt
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客