標籤：describe angular toe style files 依賴 基於 測試 .config
前端Angularjs是一個很熱門的架構，這篇是學習基於Angularjs的nodejs平台的E2E測試報告和E2E JS覆蓋率報告。用到的都是現有的工具，只是一些配置的地方需要注意。
環境前提：
1. nodejs 安裝(https://nodejs.org/en/download/)
步驟：
1. npm init 建立一個nodejs工程。
2. 使用以下npm install 命令 下載node modules, 然後在package.json的scripts節點添加start命令如下：
npm install angular -Dnpm install angular-mocks -Dnpm install grunt-contrib-clean -Dnpm install grunt-contrib-copy -Dnpm install grunt-protractor-coverage -Dnpm install http-server -Dnpm install protractor-jasmine2-html-reporter -D"scripts": { "start": "http-server -a localhost -p 8000 -c-1",}
在下載完grunt-protractor-coverage 之後，
2.1 在項目目錄node_modules\grunt-protractor-coverage下執行npm install 下載依賴的modules， 否則在執行測試時候會報找不到protractor modules的錯誤
2.2 在項目目錄node_modules\grunt-protractor-coverage\node_modules\.bin\ 下執行webdriver-manager update命令下載seleniu server jar和chrome driver， 否則在執行測試時候會報找不到server jar的錯誤， 如果無法下載，試試添加代理的方式，如下
webdriver-manager update --ignore_ssl --proxy http://username:[email protected]:port
2.3 由於grunt-protractor-coverage已經有好久沒更新了，目前內建支援的protractor是3.0.0版本，內建的chromedriver版本是2.21, 如果需要支援最新的chrome，需要更改下node_modules\grunt-protractor-coverage\node_modules\protractor 目錄下的config.json檔案，目前最新版的chromedriver為2.30, 更改完之後在執行webdriver-manager update 命令更新chromedriver.
--註：由於內建的selenium server jar為2.52.0 ，對新版的firefox支援有問題，但是更改server jar到最新又會引入新的問題，因為protractor 3.0.0版本內建的selenium-webdriver在支援新版的server server jar有問題，所以預想是能否直接更改grunt-protractor-coverage所依賴的protractor為最新版(待實驗)
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; }});
建立 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/instrumented/html/index.html‘); }); 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‘); }); 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(‘1‘); });});
4. 配置protractor設定檔和gurnt設定檔，如下：
根目錄下建立protractor.conf.js, 添加protractor-jasmine2-html-reporter 是為了E2E測試產生一個HTML的報告
var Jasmine2HtmlReporter = require(‘protractor-jasmine2-html-reporter‘);
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. }, defaultTimeoutInterval: 30000, onPrepare: function() { jasmine.getEnv().addReporter( new Jasmine2HtmlReporter({ savePath: ‘e2eReport/e2e‘, screenshotsFolder: ‘images‘, takeScreenshots: false }) ); }};
最重要的就是Gruntfile.js檔案了，在根目錄建立，如下：
注意點： copy節點只需要拷貝項目本身不需要被注入的檔案如：html/css/...檔案，依賴的JS庫檔案等，在這裡只需要拷貝html目錄檔案，依賴的angularjs和angularjs mock檔案。
instrument節點需要配置要注入的檔案，就是被測試js檔案，注入拷貝到basePath目錄。
protractor_coverage 節點配置覆蓋率資訊檔存放的位置coverageDir，以及執行E2E 的設定檔configFile。
makeReport 節點配置覆蓋率資訊檔的來源位置src，以及產生html 包括的存放位置dir
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), clean: { options: { force: true }, tests: [‘instrumented‘], }, copy: { instrument: { files: [{ src: [‘html/**/*‘,‘node_modules/angular/angular.min.js‘,‘node_modules/angular-mocks/angular-mocks.js‘], dest: ‘instrumented/‘ }] }, }, connect: { options: { port: 9000, hostname: ‘localhost‘ }, runtime: { options: { base: ‘instrumented‘ } } }, instrument: { files: [‘js/**/*.js‘], options: { lazy: true, basePath: "instrumented" } }, protractor_coverage: { options: { keepAlive: true, noColor: false, coverageDir: ‘instrumented/coverage‘, args: { baseUrl: ‘http://localhost:8000‘ } }, local: { options: { configFile: ‘protractor.conf.js‘ } } }, makeReport: { src: ‘instrumented/coverage/*.json‘, options: { type: ‘lcov‘, dir: ‘instrumented/coverage‘, print: ‘detail‘ } } }); grunt.loadNpmTasks(‘grunt-protractor-coverage‘); grunt.loadNpmTasks(‘grunt-contrib-connect‘); grunt.loadNpmTasks(‘grunt-contrib-clean‘); grunt.loadNpmTasks(‘grunt-contrib-copy‘); grunt.loadNpmTasks(‘grunt-istanbul‘); grunt.registerTask(‘e2eCoverage‘, ‘run e2e coverage report‘, [‘clean‘, ‘copy‘, ‘instrument‘, ‘connect:runtime‘, ‘protractor_coverage:local‘, ‘makeReport‘]);};
以上配置全部完成， 整體的目錄結構如下：
e2eDemo|- e2eReport //用來存放報告|- e2etest |- index-e2eTest.js|- html |- index.html|- instrumented //用來存放被注入之後的項目代碼|- js |- index.js|- node_modulesGurntfile.jspackage.jsonprotractor.conf.js
最後的成果
\e2eDemo\instrumented\coverage\lcov-report 目錄下有index.html報告： 可以修改index-e2eTest.js來查看是否覆蓋率不足的情況是什麼樣的。
E2E本身的測試報告在\e2eDemo\e2eReport\e2e， 如下：這裡故意在測試指令碼中fail來看的測試報告
註： 如何堅持Js檔案是否被注入成功，查看js檔案原始碼會發現多了很多奇怪的字元如__cov_Kbve4U4Ylx8FHTZHdgWwXA就表示被注入成功了。
Angularjs E2E test Report/CoverageReport
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
