標籤：for 也會 install 報告 是什麼 proxy www amp script
上一篇(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 -Dnpm install angular-mocks -Dnpm install gulp -Dnpm install gulp-clean -Dnpm install gulp-istanbul -Dnpm install istanbul - Dnpm install http-server -Dnpm install protractor-istanbul-plugin -Dnpm 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:[email protected]: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.angularvar 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
建立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>View Code
建立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‘); });});View Code
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_modulesgulpfile.jspackage.jsonprotractor.conf.js
執行以下命令就可以獲得結果報告了：
npm testnpm run report
最後的成果
\e2eDemo\e2eReport\coverage\lcov-report 目錄下有index.html報告： 可以修改index-e2eTest.js來查看是否覆蓋率不足的情況是什麼樣的。
E2E本身的測試報告在\e2eDemo\e2eReport\e2e， 如下：這裡故意在測試指令碼中fail來看的測試報告
Angularjs E2E test Report/CoverageReport - 使用Gulp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
