Angularjs E2E test Report/CoverageReport
前端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 -D
npm install angular-mocks -D
npm install grunt-contrib-clean -D
npm install grunt-contrib-copy -D
npm install grunt-protractor-coverage -D
npm install http-server -D
npm 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:pwd@xxxx.xxx: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.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/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_modules
Gurntfile.js
package.json
protractor.conf.js
执行：
打开cmd窗口， 在项目根目录下执行npm start 来启动服务器
npm start
打开另外一个cmd窗口在项目根目录下执行grunt e2eCoverage来执行测试
grunt e2eCoverage
最后的成果如图：
\e2eDemo\instrumented\coverage\lcov-report 目录下有index.html报告： 可以修改index-e2eTest.js来查看是否覆盖率不足的情况是什么样的。
E2E本身的测试报告在\e2eDemo\e2eReport\e2e， 如下：这里故意在测试脚本中fail来看的测试报告
注： 如何坚持Js文件是否被注入成功，查看js文件源代码会发现多了很多奇怪的字符如__cov_Kbve4U4Ylx8FHTZHdgWwXA就表示被注入成功了。
Angularjs E2E test Report/CoverageReport的更多相关文章
- Angularjs E2E test Report/CoverageReport - 使用Gulp
上一篇(http://www.cnblogs.com/xiaoningz/p/7122633.html)使用grunt-protractor-coverage 做为覆盖率测试插件,如果项目的管理工具刚 ...
- angularjs e2e测试初步学习（一）
e2e测试是从用户角度出发,认为整个系统都是一个黑盒,只有UI暴露出来. angularjs的测试框架是采用protractor. 1.创建文件 首先创建一个项目文件夹test,然后再创建两个文件,一 ...
- AngularJS unit test report / coverage report
参考来源: http://www.cnblogs.com/vipyoumay/p/5331787.html 这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告.用到的都是现有 ...
- 使用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 ...
- AngularJs学习笔记--E2E Testing
原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...
- AngularJS介绍
AngularJS介绍–AngularJS的前世今生 AngularJS是什么 在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScr ...
- angular 调试 js (分 karms protractor / test e2e unit )
首页订阅 Protractor端到端的AngularJS测试框架教程 2014年01月18日 分类:教程, JavaScript, AngularJS Protractor是一个建立在WebDrive ...
随机推荐
- Linux系统的grub和BIOS加密
启动流程: BIOS ——> MBR(主引导记录,找到系统在哪个分区) ——> boot loader(grub) ——>kernel(内核)——>进入启动级别init 硬盘的 ...
- angular流程引擎集成
工作流在oa和erp中十分常见,现有成熟的工作流通常是在客户端实现的,web实现工作流的案例十分稀少.要实现web工作流必须要有强大的流程设计器,这里为大家介绍一款基于angular的流程控件,其功能 ...
- 牛客小白月赛12 H 华华和月月种树 （离线dfs序+线段树）
链接:https://ac.nowcoder.com/acm/contest/392/H 来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言2621 ...
- mybatis总体分析
Mybatis是一个半orp框架,说是半,也就是不完全是,还有很多地方是需要开发人员完成的.发现很多互联网公司使用Mybatis,而不是hibernate.应该是因为Mybatis不但有orp的优势, ...
- top命令经常用来监控linux的系统状况，比如cpu、内存的使用，程序员基本都知道这个命令。 按 q 退出
top命令经常用来监控linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令. 按 q 退出
- Object-C（自学1）
----- 需求索要 自学了下 OBJECt-C ----- 就基础部分一些 和操作 command + R 运行command +B 只编译.m文件 NSlog() = printfNSLog 是 ...
- nginx缓冲区，跳转，超时
缓冲区 nginx服务器向后台转发请求的时候, 往往只收到一下部分请求头的信息,缓冲区的意义在于尽可能多的保存请求信息. 语法配置 proxy _buffering打开后---设置为on,浏览器里面将 ...
- 详解 @MapperScan 注解和 @Mapper 注解
实际上,这是一个非常简单的问题.我并没有一口回绝他,让他去百度.因为,新人都会经历这个过程.好不容易,问你一次,你直接让他百度,会打击到他的.而且,别人会觉得你摆架子. @Mapper 这个注解的定义 ...
- Linux系统启动顺序
Linux启动顺序 加电—加电自检(BIOS)—硬件检查 —MBR(找到需要启动的系统,由于实际计算机上可能会装有多个系统) —bootloader系统初始化,装载kenel到内存 —内核执行,决定哪 ...
- Mockito 2 关于打标（stubbing）
请参考下面有关于打标的代码. //You can mock concrete classes, not just interfaces LinkedList mockedList = mock(Lin ...