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;
        }
});

View Code