上一篇(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的更多相关文章

  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. cubase 音频的淡入淡出

  2. CNN for NLP

    卷积神经网络在自然语言处理任务中的应用.参考链接:Understanding Convolutional Neural Networks for NLP(2015.11) Instead of ima ...

  3. Optimization Algorithms

    1. Stochastic Gradient Descent 2. SGD With Momentum Stochastic gradient descent with momentum rememb ...

  4. 2019.8.30 记录一个Swiper的使用

    导入     flutter_swiper: ^1.1.6 引入     import 'package:flutter_screenutil/flutter_screenutil.dart'; 已下 ...

  5. sql关联查询更新速度慢的问题

    原语句 update B b set b.fid = (select f.id from F f where f.bid = b.id) ; 可以考虑用 begin for f in (select ...

  6. JavaScript16进制颜色值和rgb的转换

    //十六进制颜色值域RGB格式颜色值之间的相互转换//十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为1 ...

  7. django 之csrf、auth模块及settings源码、插拔式设计

    目录 基于django中间件拷贝思想 跨站请求伪造简介 跨站请求伪造解决思路 方式1:form表单发post请求解决方法 方式2:ajax发post请求解决方法 csrf相关的两个装饰器 csrf装饰 ...

  8. Spark配置详解

    Spark提供三个位置用来配置系统: Spark属性:控制大部分的应用程序参数,可以用SparkConf对象或者Java系统属性设置 环境变量:可以通过每个节点的 conf/spark-env.sh脚 ...

  9. mysql 导出导入数据库（Mysqldump）备份

    使用mysql不熟练啊!!! mysqldump导出数据库,必须以cmd命令行的形式,在Navicat中以新建查询形式使用Mysqldump不好使的.(本来使用Navicat转储SQL,再导入SQL, ...

  10. （编程语言+python+变量名+垃圾回收机制）*知识点

    编程语言 从低级到高级的发展的过程 1.机器语言 计算机是基于电工作的.(基于高.低电平 1010010101011) 如果用机器语言表现一个字符的意思需要多段代码的行.但是计算机读取的快. 所以机器 ...