Angularjs E2E test Report/CoverageReport - 使用Gulp
上一篇(http://www.cnblogs.com/xiaoningz/p/7122633.html)使用grunt-protractor-coverage 做为覆盖率测试插件，如果项目的管理工具刚好是grunt，那就完美了，不过有些项目是使用gulp做管理工具，那维护两套管理工具就有点资源浪费了，刚好gulp也有配套protractor的e2e测试覆盖插件，这篇文章就是如何使用gulp配套的插件做protractor e2e 覆盖率报告。
环境前提：
1. nodejs 安装(https://nodejs.org/en/download/)
步骤：
1. npm init 创建一个nodejs工程。
2. 使用以下npm install 命令 下载node modules,
npm install angular -D
npm install angular-mocks -D
npm install gulp -D
npm install gulp-clean -D
npm install gulp-istanbul -D
npm install istanbul - D
npm install http-server -D
npm install protractor -D
npm install protractor-istanbul-plugin -D
npm install protractor-jasmine2-html-reporter -D
然后在package.json的scripts节点添加命令如下：
"scripts": {
"start": "http-server -a localhost -p 8000 -c-1",
"test": "gulp clean && gulp instrument && protractor protractor.conf.js",
"report": "istanbul report --include e2eReport/*.json --dir e2eReport/coverage html"
},
start: 为了在当前项目目录启动一个http服务，这样在测试时候就可以直接通过url访问。
test:
gulp clean: 执行gulp的clean task， 具体行为请看下面的glupfile.js配置， 主要是清空instrument和report目录。
gulp instrument: 执行gulp的instrument task， 具体行为请看下面的gulpfile.js配置，主要作用就是拷贝非注入的必要文件，和注入拷贝被测试的js文件。
protractor protractor.conf.js: 执行protractor e2e 测试。
report: 执行istanbul report命令，将*.json 覆盖率信息文件转化为html 报告。
2.1 同前一篇一样，使用protractor一样需要更新jar和driver, 在项目目录node_modules\protractor\node_modules\.bin\ 下执行webdriver-manager update命令下载seleniu server jar和chrome driver， 否则在执行测试时候会报找不到server jar的错误， 如果无法下载，试试添加代理的方式，如下:
webdriver-manager update --ignore_ssl --proxy http://username:pwd@xxxx.xxx:port
因为下载的protractor是最新版，所以通常通过以上命令下载的selenium server和driver也会是最新版，如果不确定，到node_modules\protractor\node_modules\webdriver-manager\selenium目录下查看下载的版本，如果不符合你的需求，可以更改webdriver-manager目录下的config.json文件为指定版本，然后在更新一遍。
3. 创建一个以Angularjs为框架的demo做为测试的站点，只是为了测试用，不用太复杂。 跟前一片文章相同，
新建js/index.js
var angular = window.angular
var app = angular.module('app', []);
app.controller('indexCtrl', function($scope) {
$scope.add = function (a, b) {
if(a&&b) {
return Number(a) + Number(b)
}
return 0;
},
$scope.minus = function(c, d) {
if(c&&d) {
return Number(c) - Number(d)
}
return 0;
}
});
新建html/index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>index</title> </head>
<body>
<div ng-controller="indexCtrl">
<div>
<input type="text" ng-model="a" value="0">
+
<input type="text" ng-model="b" value="0">
=<span id='result'>{{add(a,b)}}</span>
</div>
<div>
<input type="text" ng-model="c" value="0">
-
<input type="text" ng-model="d" value="0">
=<span id='result1'>{{minus(c,d)}}</span>
</div>
</div>
</body>
</html>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-mocks/angular-mocks.js"></script>
<script src="../js/index.js"></script>
新建E2E测试代码 e2etest/index-e2eTest.js. 注意，测试所填写的网站路径必须是使用被注入的JS的项目路径，否则获取的覆盖率报告就是空。
describe('index.html', function() {
beforeEach(function() {
browser.get('http://localhost:8000/istanbulCode/html/index.html');
});
it('test minus', function() {
var a = element(by.model('c'));
var b = element(by.model('d'));
a.sendKeys(4);
b.sendKeys(2);
var result = element(by.id('result1'));
expect(result.getText()).toEqual('2');
});
it('test add', function() {
var a = element(by.model('a'));
var b = element(by.model('b'));
a.sendKeys(1);
b.sendKeys(2);
var result = element(by.id('result'));
expect(result.getText()).toEqual('3');
});
});
4. 配置protractor配置文件和gulp配置文件，如下：
根目录下新建protractor.conf.js, 添加protractor-jasmine2-html-reporter 是为了E2E测试产生一个HTML的报告，添加plugins节点，使用protractor-istanbul-plugin 插件将e2e测试的覆盖率信息生成json文件到e2eReport目录下：
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
var istanbulPlugin = require('protractor-istanbul-plugin');
exports.config = {
allScriptsTimeout: 11000,
baseUrl: 'http://localhost:8000/html/',
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
// Spec patterns are relative to the configuration file location passed
// to protractor (in this example conf.js).
// They may include glob patterns.
specs: ['e2etest/*.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true // Use colors in the command line report.
},
plugins: [{
inline: istanbulPlugin,
outputPath: 'e2eReport/'
}],
defaultTimeoutInterval: 30000,
onPrepare: function() {
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: 'e2eReport/e2e',
screenshotsFolder: 'images',
takeScreenshots: false
})
);
}
};
在根目录下创建gulpfile.js文件，如下：
clean task： 清空istanbulCode和e2eReport目录下的文件，为了后续注入和生成report腾出空间，
instrument task：拷贝非注入的必要文件，和注入拷贝被测试的js文件。注意这边注入要使用istanbul({coverageVariable: '__coverage__'}) 方法，为了设置覆盖率变量名以备后面report使用。
var istanbul = require('gulp-istanbul');
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('clean', function() {
gulp.src('istanbulCode/*', {
read: false
})
.pipe(clean());
gulp.src('e2eReport/*', {
read: false
})
.pipe(clean());
});
gulp.task('instrument', function() {
gulp.src('html/*')
.pipe(gulp.dest('istanbulCode/html'));
gulp.src('node_modules/angular/angular.min.js')
.pipe(gulp.dest('istanbulCode/node_modules/angular/'));
gulp.src('node_modules/angular-mocks/angular-mocks.js')
.pipe(gulp.dest('istanbulCode/node_modules/angular-mocks/'));
gulp.src('js/*.js')
.pipe(istanbul({
coverageVariable: '__coverage__'
}))
.pipe(gulp.dest('istanbulCode/js'))
});
gulp.task('test', function() {
console.log('test')
});
以上配置全部完成， 整体的目录结构如下：
e2eDemo
|- e2eReport
|- coverage //存放覆盖率报告
|- e2e //存放e2e测试报告
*.json //覆盖率信息的json文件
|- e2etest
|- index-e2eTest.js
|- html
|- index.html
|- istanbulCode //用来存放被注入之后的项目代码
|- js
|- index.js
|- node_modules
gulpfile.js
package.json
protractor.conf.js
执行：
打开一个cmd窗口，在根目录下执行npm start启动服务， 然后打开另外一个cmd窗口执行以下命令就可以获得结果报告了：
npm test
npm run report
最后的成果如图：
\e2eDemo\e2eReport\coverage\lcov-report 目录下有index.html报告： 可以修改index-e2eTest.js来查看是否覆盖率不足的情况是什么样的。
E2E本身的测试报告在\e2eDemo\e2eReport\e2e， 如下：这里故意在测试脚本中fail来看的测试报告
-----------------------------------------------分隔符
1. 可以用gulp-protractor 插件来代替protractor, 因为gulp-protractor内置依赖了protractor, 然后在gulp-protractor下的webdriver-manager更新jar和driver, 这样就能在package.json中不用protractor了， 更改如下：
gulpfile.js 添加一个task
gulp.task('e2etest', function() {
gulp.src('e2etest/*.js')
.pipe(protractor({
configFile: 'protractor.conf.js'
}))
});
package.json 文件更改scripts节点 test命令如下：
"test": "gulp clean && gulp instrument && gulp e2etest",
这样执行同样的命令就可以获得报告了。
------------------------------------------------------------分隔符
上面还是需要使用istanbul 本身来生成report, 还需要执行npm命令两次，既然有gulp-istanbul，这插件应该也具有生成报告功能，可是在尝试过程中发现生成的report总是覆盖率100%, 而且html报告中没有详细的内容
gulp.task('report', function() {
gulp.src('e2eReport/*.json') //覆盖率文件位置
.pipe(istanbul.writeReports({
dir:'e2eReport/coverage',
reporters: ['html']
}))
});
尝试过直接在protractor测试过后直接pipe，也是一样，尝试了下（https://www.npmjs.com/package/gulp-istanbul）提供的方式添加了istanbul.hookRequire()方式，得到的结果也是一样
gulp.task('e2etest', function() {
gulp.src('e2etest/*.js')
.pipe(protractor({
configFile: 'protractor.conf.js'
}))
.pipe(istanbul.writeReports({
dir:'e2eReport/coverage',
reporters: ['html']
}))
});
-----google搜索了一下， 没有发现类似的问题..... 所以换了个方式，发现有一个新的module叫gulp-istanbul-report, 用这个就能成功生成report了, 如下：
gulpfile.js：
var istanbul = require('gulp-istanbul');
var gulp = require('gulp');
var clean = require('gulp-clean');
var protractor = require("gulp-protractor").protractor;
var istanbulReport = require('gulp-istanbul-report');
gulp.task('clean', function() {
gulp.src('istanbulCode/*', {
read: false
})
.pipe(clean());
gulp.src('e2eReport/*', {
read: false
})
.pipe(clean());
});
gulp.task('copy', function() {
gulp.src('html/*')
.pipe(gulp.dest('istanbulCode/html'));
gulp.src('node_modules/angular/angular.min.js')
.pipe(gulp.dest('istanbulCode/node_modules/angular/'));
gulp.src('node_modules/angular-mocks/angular-mocks.js')
.pipe(gulp.dest('istanbulCode/node_modules/angular-mocks/'));
});
gulp.task('instrument', function() {
gulp.src('js/*.js')
.pipe(istanbul({
coverageVariable: '__coverage__'
}))
.pipe(gulp.dest('istanbulCode/js'))
});
gulp.task('e2etest', function() {
gulp.src('e2etest/*.js')
.pipe(protractor({
configFile: 'protractor.conf.js'
}))
});
gulp.task('report', function() {
gulp.src('e2eReport/*.json')
.pipe(istanbulReport({
dir:'e2eReport/coverage',
reporters: ['html']
}))
});
gulp.task('test', function() {
console.log('test')
});
package.json文件更改scripts节点， 删除report命令
"test": "gulp clean && gulp copy && gulp instrument && gulp e2etest && gulp report",
然后只需要执行npm test命令就可以做跑protractor测试，生成report了，跟istanbul原生的有点不太一样，如下：
Angularjs E2E test Report/CoverageReport - 使用Gulp的更多相关文章
- Angularjs E2E test Report/CoverageReport
前端Angularjs是一个很热门的框架,这篇是学习基于Angularjs的nodejs平台的E2E测试报告和E2E JS覆盖率报告.用到的都是现有的工具,只是一些配置的地方需要注意. 环境前提: 1 ...
- angularjs e2e测试初步学习（一）
e2e测试是从用户角度出发,认为整个系统都是一个黑盒,只有UI暴露出来. angularjs的测试框架是采用protractor. 1.创建文件 首先创建一个项目文件夹test,然后再创建两个文件,一 ...
- AngularJS unit test report / coverage report
参考来源: http://www.cnblogs.com/vipyoumay/p/5331787.html 这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告.用到的都是现有 ...
- 使用Protractor进行AngularJS e2e测试案例
环境: y@y:karma-t01$ protractor --version Version y@y:karma-t01$ node -v v4.2.2 y@y:karma-t01$ y@y:kar ...
- 【转】前端工程筹建NodeJs+gulp+bower
转自:http://www.myexception.cn/javascript/1781968.html npm nodejs 安装过程中会自动安装npm,nodejs安装程序会在环境变量中添加两个变 ...
- 前端工程筹建NodeJs+gulp+bower
1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2 ...
- 前端工程搭建NodeJs+gulp+bower
需要node.npm的事先安装!! 1.nodejs安装程序会在环境变量中添加两个变量: 系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.ex ...
- 做IT这几年，我整理了这些干货想要送给你!
没有一条路是容易的,特别是转行计算机这条路. 松哥接触过很多转行做开发的小伙伴,我了解到很多转行人的不容易,记得松哥大二时刚刚决定转行计算机,完全不知道这些东西到底应该怎么学,每天就是抱着书啃,书倒是 ...
- Angularjs1.x 项目结构
大部分的项目结构是以 directives , service, controller 为基础来搭建的项目架构的,但这里更偏向于以应用场景来进行项目架构,因此这里的文件夹结构可能与您之前遇到的结构不同 ...
随机推荐
- C++ 新特性 笔记
摘录 constexptr C++14尝鲜:constexpr函数(编译期函数) 总结来说,就是在c++11之前,要实现编译期数值计算需要繁琐的模板元编程.在c++11 中,可以是函数,在一句rutu ...
- python函数：匿名函数、函数递归与二分法、面向过程编程
今天主要讲三大部分内容: 一.匿名函数二.函数递归与二分法三.面向过程编程 一.匿名函数: """ 1. 什么时匿名函数 def定义的是有名函数:特点是可以通过名字重复调 ...
- 在STM32上如果不使用外部晶振，OSC_IN和OSC_OUT的接法
如果使用内部RC振荡器而不使用外部晶振,请按照下面方法处理: 1)对于100脚或144脚的产品,OSC_IN应接地,OSC_OUT应悬空.2)对于少于100脚的产品,有2种接法: 2.1)OSC_I ...
- Linux根文件系统和目录结构及bash特性1
Linux文件系统: 内核并不真正负责具体的工作,这些工作是应用程序来负责的 Linux glibc 程序的编译方式: 动态链接式编译: 静态链接式编译: ...
- Beta冲刺版本第二天
该作业所属课程:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 作业要求地址:https://edu.cnblogs.com ...
- okhttp同步请求流程和源码分析
在上一次[http://www.cnblogs.com/webor2006/p/8022808.html]中已经对okhttp的同步与异步请求的基本使用有了一了初步了解,这次来从源码的角度来分析一下同 ...
- 【XDOJ】坑爹的杜神
原题: 众所周知,杜神非常喜欢出大模拟,也非常喜欢设置一些细节坑人.例如,在某次大赛中,他出了一道这样的题 (以下省略3000字) 计算出答案a后,你应该将a除以1000,再保留到小数点后两位输出,四 ...
- 用Python调用Shell命令
Python经常被称作“胶水语言”,因为它能够轻易地操作其他程序,轻易地包装使用其他语言编写的库,也当然可以用Python调用Shell命令. 用Python调用Shell命令有如下几种方式: 第一种 ...
- Java-Base64工具类
/* * Base64 encoding and decoding. * Copyright (C) 2001-2004 Stephen Ostermiller * http://ostermille ...
- js上传超大文件解决方案
需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...