上一篇(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,

  1. npm install angular -D
  2. npm install angular-mocks -D
  3. npm install gulp -D
  4. npm install gulp-clean -D
  5. npm install gulp-istanbul -D
  6. npm install istanbul - D
  7. npm install http-server -D
    npm install protractor -D
  8. npm install protractor-istanbul-plugin -D
  9. npm install protractor-jasmine2-html-reporter -D

然后在package.json的scripts节点添加命令如下：

  1. "scripts": {
  2.     "start": "http-server -a localhost -p 8000 -c-1",
  3.     "test": "gulp clean && gulp instrument && protractor protractor.conf.js",
  4.     "report": "istanbul report --include e2eReport/*.json --dir e2eReport/coverage html"
  5.   },

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的错误， 如果无法下载，试试添加代理的方式，如下:

  1. 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

  1. var angular = window.angular
  2.  
  3. var app = angular.module('app', []);
  4. app.controller('indexCtrl', function($scope) {
  5.         $scope.add = function (a, b) {
  6.             if(a&&b) {
  7.                 return Number(a) + Number(b)
  8.             }
  9.             return 0;
  10.         },
  11.         $scope.minus = function(c, d) {
  12.             if(c&&d) {
  13.                 return Number(c) - Number(d)
  14.             }
  15.             return 0;
  16.         }
  17. });

新建html/index.html

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.  
  7. </head>
  8. <body>
  9. <div ng-controller="indexCtrl">
  10.     <div>
  11.         <input type="text" ng-model="a" value="0">
  12.     +
  13.     <input type="text" ng-model="b" value="0">
  14.     =<span id='result'>{{add(a,b)}}</span>
  15.     </div>
  16.     <div>
  17.         <input type="text" ng-model="c" value="0">
  18.     -
  19.     <input type="text" ng-model="d" value="0">
  20.     =<span id='result1'>{{minus(c,d)}}</span>
  21.     </div>
  22. </div>
  23. </body>
  24. </html>
  25. <script src="../node_modules/angular/angular.min.js"></script>
  26. <script src="../node_modules/angular-mocks/angular-mocks.js"></script>
  27. <script src="../js/index.js"></script>

新建E2E测试代码 e2etest/index-e2eTest.js. 注意，测试所填写的网站路径必须是使用被注入的JS的项目路径，否则获取的覆盖率报告就是空。

  1. describe('index.html', function() {
  2.  
  3.     beforeEach(function() {
  4.         browser.get('http://localhost:8000/istanbulCode/html/index.html');
  5.     });
  6.     it('test minus', function() {
  7.  
  8.         var a = element(by.model('c'));
  9.         var b = element(by.model('d'));
  10.         a.sendKeys(4);
  11.         b.sendKeys(2);
  12.         var result = element(by.id('result1'));
  13.         expect(result.getText()).toEqual('2');
  14.     });
  15.     it('test add', function() {
  16.  
  17.         var a = element(by.model('a'));
  18.         var b = element(by.model('b'));
  19.         a.sendKeys(1);
  20.         b.sendKeys(2);
  21.         var result = element(by.id('result'));
  22.         expect(result.getText()).toEqual('3');
  23.     });
  24.  
  25. });

4. 配置protractor配置文件和gulp配置文件，如下：

根目录下新建protractor.conf.js,  添加protractor-jasmine2-html-reporter 是为了E2E测试产生一个HTML的报告，添加plugins节点，使用protractor-istanbul-plugin 插件将e2e测试的覆盖率信息生成json文件到e2eReport目录下：

  1. var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
  2. var istanbulPlugin = require('protractor-istanbul-plugin');
  3.  
  4. exports.config = {
  5.  
  6.   allScriptsTimeout: 11000,
  7.  
  8.   baseUrl: 'http://localhost:8000/html/',
  9.  
  10.   // Capabilities to be passed to the webdriver instance.
  11.   capabilities: {
  12.     'browserName': 'chrome'
  13.   },
  14.  
  15.   framework: 'jasmine',
  16.   // Spec patterns are relative to the configuration file location passed
  17.   // to protractor (in this example conf.js).
  18.   // They may include glob patterns.
  19.   specs: ['e2etest/*.js'],
  20.  
  21.   // Options to be passed to Jasmine-node.
  22.   jasmineNodeOpts: {
  23.     showColors: true // Use colors in the command line report.
  24.   },
  25.  
  26.   plugins: [{
  27.     inline: istanbulPlugin,
  28.     outputPath: 'e2eReport/'
  29.   }],
  30.  
  31.   defaultTimeoutInterval: 30000,
  32.  
  33.   onPrepare: function() {
  34.     jasmine.getEnv().addReporter(
  35.       new Jasmine2HtmlReporter({
  36.         savePath: 'e2eReport/e2e',
  37.         screenshotsFolder: 'images',
  38.         takeScreenshots: false
  39.       })
  40.     );
  41.   }
  42. };

在根目录下创建gulpfile.js文件，如下：

clean task： 清空istanbulCode和e2eReport目录下的文件，为了后续注入和生成report腾出空间，

instrument task：拷贝非注入的必要文件，和注入拷贝被测试的js文件。注意这边注入要使用istanbul({coverageVariable: '__coverage__'})  方法，为了设置覆盖率变量名以备后面report使用。

  1. var istanbul = require('gulp-istanbul');
  2. var gulp = require('gulp');
  3. var clean = require('gulp-clean');
  4.  
  5. gulp.task('clean', function() {
  6.   gulp.src('istanbulCode/*', {
  7.       read: false
  8.     })
  9.     .pipe(clean());
  10.   gulp.src('e2eReport/*', {
  11.       read: false
  12.     })
  13.     .pipe(clean());
  14. });
  15.  
  16. gulp.task('instrument', function() {
  17.   gulp.src('html/*')
  18.     .pipe(gulp.dest('istanbulCode/html'));
  19.   gulp.src('node_modules/angular/angular.min.js')
  20.     .pipe(gulp.dest('istanbulCode/node_modules/angular/'));
  21.   gulp.src('node_modules/angular-mocks/angular-mocks.js')
  22.     .pipe(gulp.dest('istanbulCode/node_modules/angular-mocks/'));
  23.   gulp.src('js/*.js')
  24.     .pipe(istanbul({
  25.       coverageVariable: '__coverage__'
  26.     }))
  27.     .pipe(gulp.dest('istanbulCode/js'))
  28. });
  29.  
  30. gulp.task('test', function() {
  31.   console.log('test')
  32. });

以上配置全部完成， 整体的目录结构如下：

  1. e2eDemo
  2. |- e2eReport
  3. 	|- coverage //存放覆盖率报告
  4. 	|- e2e	//存放e2e测试报告
  5. 	*.json //覆盖率信息的json文件
  6. |- e2etest
  7.     |- index-e2eTest.js
  8. |- html
  9.     |- index.html
  10. |- istanbulCode //用来存放被注入之后的项目代码
  11. |- js
  12.     |- index.js
  13. |- node_modules
  14. gulpfile.js
  15. package.json
  16. protractor.conf.js

执行：

打开一个cmd窗口，在根目录下执行npm start启动服务， 然后打开另外一个cmd窗口执行以下命令就可以获得结果报告了：

  1. npm test
  2. 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

  1. gulp.task('e2etest', function() {
  2.   gulp.src('e2etest/*.js')
  3.     .pipe(protractor({
  4.       configFile: 'protractor.conf.js'
  5.     }))
  6. });

package.json 文件更改scripts节点 test命令如下：

  1. "test": "gulp clean && gulp instrument && gulp e2etest",

这样执行同样的命令就可以获得报告了。

------------------------------------------------------------分隔符

上面还是需要使用istanbul 本身来生成report, 还需要执行npm命令两次，既然有gulp-istanbul，这插件应该也具有生成报告功能，可是在尝试过程中发现生成的report总是覆盖率100%, 而且html报告中没有详细的内容

  1. gulp.task('report', function() {
  2.   gulp.src('e2eReport/*.json')  //覆盖率文件位置
  3.     .pipe(istanbul.writeReports({
  4.       dir:'e2eReport/coverage',
  5.       reporters: ['html']
  6.     }))
  7. });

尝试过直接在protractor测试过后直接pipe，也是一样，尝试了下（https://www.npmjs.com/package/gulp-istanbul）提供的方式添加了istanbul.hookRequire()方式，得到的结果也是一样

  1. gulp.task('e2etest', function() {
  2.   gulp.src('e2etest/*.js')
  3.     .pipe(protractor({
  4.       configFile: 'protractor.conf.js'
  5.     }))
  6.     .pipe(istanbul.writeReports({
  7.       dir:'e2eReport/coverage',
  8.       reporters: ['html']
  9.     }))
  10. });

-----google搜索了一下， 没有发现类似的问题..... 所以换了个方式，发现有一个新的module叫gulp-istanbul-report, 用这个就能成功生成report了, 如下：

gulpfile.js：

  1. var istanbul = require('gulp-istanbul');
  2. var gulp = require('gulp');
  3. var clean = require('gulp-clean');
  4. var protractor = require("gulp-protractor").protractor;
  5. var istanbulReport = require('gulp-istanbul-report');
  6.  
  7. gulp.task('clean', function() {
  8.   gulp.src('istanbulCode/*', {
  9.       read: false
  10.     })
  11.     .pipe(clean());
  12.   gulp.src('e2eReport/*', {
  13.       read: false
  14.     })
  15.     .pipe(clean());
  16. });
  17.  
  18. gulp.task('copy', function() {
  19.   gulp.src('html/*')
  20.     .pipe(gulp.dest('istanbulCode/html'));
  21.   gulp.src('node_modules/angular/angular.min.js')
  22.     .pipe(gulp.dest('istanbulCode/node_modules/angular/'));
  23.   gulp.src('node_modules/angular-mocks/angular-mocks.js')
  24.     .pipe(gulp.dest('istanbulCode/node_modules/angular-mocks/'));
  25. });
  26.  
  27. gulp.task('instrument', function() {
  28.   gulp.src('js/*.js')
  29.     .pipe(istanbul({
  30.       coverageVariable: '__coverage__'
  31.     }))
  32.     .pipe(gulp.dest('istanbulCode/js'))
  33. });
  34.  
  35. gulp.task('e2etest', function() {
  36.   gulp.src('e2etest/*.js')
  37.     .pipe(protractor({
  38.       configFile: 'protractor.conf.js'
  39.     }))
  40. });
  41.  
  42. gulp.task('report', function() {
  43.   gulp.src('e2eReport/*.json')
  44.     .pipe(istanbulReport({
  45.       dir:'e2eReport/coverage',
  46.       reporters: ['html']
  47.     }))
  48. });
  49.  
  50. gulp.task('test', function() {
  51.   console.log('test')
  52. });

package.json文件更改scripts节点， 删除report命令

  1. "test": "gulp clean && gulp copy && gulp instrument && gulp e2etest && gulp report",

然后只需要执行npm test命令就可以做跑protractor测试，生成report了，跟istanbul原生的有点不太一样，如下：

Angularjs E2E test Report/CoverageReport - 使用Gulp的更多相关文章

  1. Angularjs E2E test Report/CoverageReport

    前端Angularjs是一个很热门的框架,这篇是学习基于Angularjs的nodejs平台的E2E测试报告和E2E JS覆盖率报告.用到的都是现有的工具,只是一些配置的地方需要注意. 环境前提: 1 ...

  2. angularjs e2e测试初步学习（一）

    e2e测试是从用户角度出发,认为整个系统都是一个黑盒,只有UI暴露出来. angularjs的测试框架是采用protractor. 1.创建文件 首先创建一个项目文件夹test,然后再创建两个文件,一 ...

  3. AngularJS unit test report / coverage report

    参考来源: http://www.cnblogs.com/vipyoumay/p/5331787.html 这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告.用到的都是现有 ...

  4. 使用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 ...

  5. 【转】前端工程筹建NodeJs+gulp+bower

    转自:http://www.myexception.cn/javascript/1781968.html npm nodejs 安装过程中会自动安装npm,nodejs安装程序会在环境变量中添加两个变 ...

  6. 前端工程筹建NodeJs+gulp+bower

    1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2 ...

  7. 前端工程搭建NodeJs+gulp+bower

    需要node.npm的事先安装!! 1.nodejs安装程序会在环境变量中添加两个变量: 系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.ex ...

  8. 做IT这几年，我整理了这些干货想要送给你!

    没有一条路是容易的,特别是转行计算机这条路. 松哥接触过很多转行做开发的小伙伴,我了解到很多转行人的不容易,记得松哥大二时刚刚决定转行计算机,完全不知道这些东西到底应该怎么学,每天就是抱着书啃,书倒是 ...

  9. Angularjs1.x 项目结构

    大部分的项目结构是以 directives , service, controller 为基础来搭建的项目架构的,但这里更偏向于以应用场景来进行项目架构,因此这里的文件夹结构可能与您之前遇到的结构不同 ...

随机推荐

  1. 检测udp端口

    linux 检测端口是否打开:nc -zuv ip 端口 服务器监听端口:nc -l -u ip 端口(可以发送和接受信息) 客户端检测端口:nc -u ip 端口(可以发送和接受信息) 查看监听的t ...

  2. zencart设置产品始终免运费sql

    zencart网站后台-Tools(工具)-Install SQL Patches(安装SQL脚本): 运行以下相应sql语句,即可实现产品始终免运费. zencart设置所有产品始终免运费: '; ...

  3. vmware虚拟机新增磁盘及挂载详细步骤

    虚拟机新增磁盘及挂载步骤 1.新增磁盘 (1)  编辑虚拟机设置->添加 (2)  选择硬盘->下一步 (3)  选择SCSI格式,下一步 (4)  创建新虚拟磁盘,下一步 (5)  设置 ...

  4. PXE远程自动安装操作系统

    一.PXE的工作原理 PXE:基于Client/Server的网络模式,支持远程主机通过网络从远端服务器下载映像,并由此支持通过网络启动操作系统:PXE可以引导和安装Windows,linux等多种操 ...

  5. ios 打包 异常

    1. 问题:Xcode9升级到Xcode10后运行App报错: 2. 原因分析: Xcode10中libstdc++.6.0.9和libstdc++被移除,Frameworks中libstdc++.6 ...

  6. ESP8266常见问题汇总——转载自官网

    ESP8266 常见问题 本页面收集esp8266常见问题 概述 本文档主要介绍开发者在ESP8266开发中常见的一些问题. 这些问题主要包括以下几大类: 基本概念相关 ESP8266 相关 AiCl ...

  7. k8s知识2

    kubernetes到底有多难?看下面的白话: service 网络通信原理service 由k8s外面的服务作为访问端 内部里面其实是pod————————————————————————————— ...

  8. js 密码为空显示错误

    <script> var user = document.getElementById("user"); var pwd = document.getElementBy ...

  9. JavaScript相关知识点

    ㈠JavaScript编写位置 ⑴可以将js代码编写到外部js文件中,然后通过script标签引入    写到外部文件中可以在不同的页面中同时使用,也可以利用到浏览器的缓存机制    推荐使用的方式 ...

  10. eclipse简单构建maven工程

    1.普通java工程 1)File->New->maven project 新建一个maven工程: 勾选上 Create a simple project:如果不勾选是利用插件生成:这里 ...