1, e2e测试: e2e或者端到端(end-to-end)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。
2, Protractor: protractor是angular团队出品的一个端到端的测试框架,它可以将你的程序运行在真正的浏览器,就像一个真实的用户和它交互。
protractor支持四种BDD测试框架: Jasmine 1.3, Jasmine 2.x, Mocha, and Cucumber. 默认安装的是Jasmine 2.x。API文档地址
protractor测试主要依赖三个方面:
以上一篇文章《测试笔记 (三) angular测试(karma + jasmine)》的文件结构为基础。
npm i protractor --save-dev //安装在项目里
touch protractor.conf.js //同时在根目录下新建一个配置文件
目前protractor的最新版本是2.2.0,由于它没有将其核心依赖selenium-webdriver升级到2.47.0或以上.所以暂时不支持node.js V4.0, node.js V4.0环境安装会报错. 但是其正在为升级做准备,只是时间问题. 临时解决办法: 进入到node_modules/protractor下,手动修改package.json里的selenium-webdriver版本为2.47.0, 然后在node_modules/protractor 下运行npm install, 亲测可用.
安装完protractor会有两个命令行工具,protractor 和 webdriver-manager。webdriver-manager 是一个辅助工具,他可以让Selenium Server 的实例跑起来,使用它下载必要的文件。
为了方便使用配置一下package.json文件,增加以下内容:
"scripts":{
"test": "mocha test",
"test-e2e":"protractor protractor.conf.js",
"update-webdriver":"webdriver-manager update"
}
运行命令npm run update-webdriver 下载浏览器驱动文件.
此处需要翻墙,或者手动下载相关文件到node_modules/selenium 文件夹下.文件结构如下:
配置文件内容及说明如下:
// protractor 配置
exports.config = {
//每个运行在浏览器的脚本文件超时时间,单位毫秒.
allScriptsTimeout: 11000,
//使用的测试框架
framework: 'jasmine2',
//测试的文件路径
specs: ['test_e2e/**/*.spec.js'],
//程序的基本URL,protractor.get()将以它作为相为路径
baseUrl: 'http://localhost:3000',
//浏览器配置
capabilities: {
browserName: 'chrome'
},
//多浏览器配置
// multiCapabilities: [{
// browserName: 'firefox'
// }, {
// browserName: 'chrome'
// }]
// jasmine配置
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000
},
//selenium及浏览器驱动文件路径
seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar',
chromeDriver: 'node_modules/protractor/selenium/chromedriver'
}
为了让效果更加明显,我们为angular小程序增加一个路由页面.
//client/app/index.js 增加
$stateProvider
.state('main', {
url: '/',
templateUrl: 'app/main.html',
controller: 'MainCtrl'
})
.state('article', {
url: '/article/:id',
templateUrl: 'app/article.html',
controller: 'ArticleCtrl'
});
.controller('ArticleCtrl',function ($scope,$http,$stateParams) {
$http.get('/article/'+ $stateParams.id).success(function (data, status) {
$scope.article = data;
}).error(function (err, status) {
$scope.err_msg = '文章不存在!';
});
});
//client/app/article.html
<h1>文章内容页</h1>
<hr>
<div ng-if="article">
<p class="title">{{article.title}}</p>
<p class="content">{{article.content}}</p>
</div>
<div ng-if="err_msg">
<h2 class="errmsg">{{err_msg}}</h2>
</div>
<hr>
//修改client/app/main.html
<h1>{{name}}的博客</h1>
<div ng-repeat="article in articleList">
<p>{{article.id}}</p>
<p>{{article.title}}</p>
<p>{{article.content}}</p>
<a ui-sref="article({id: article.id})">查看文章内容</a>
<hr>
</div>
在test_e2e下增加测试文件 main.spec.js 内容如下:
describe('test-example e2e test',function() {
beforeEach(function () {
browser.get('/');
});
it('should return index page title and my name', function() {
expect(browser.getTitle()).toBe("Angular 测试");
expect(element(by.exactBinding('name')).isPresent()).toBe(true);
expect(element(by.exactRepeater('article in articleList')).isPresent()).toBe(true);
var title = element(by.repeater('article in articleList').row(0).column('article.title'));
expect(title.getText()).toEqual('中国世界第一');
});
it('should return article detail page', function() {
element.all(by.linkText('查看文章内容')).first().click();
expect(element(by.tagName('h1')).getText()).toEqual('文章内容页');
expect(element(by.className('title')).getText()).toEqual('中国世界第一');
expect(element(by.className('errmsg')).isPresent()).toBe(false);
});
it('should return article 404 error page', function() {
element.all(by.linkText('查看文章内容')).last().click();
expect(element(by.tagName('h1')).getText()).toEqual('文章内容页');
expect(element(by.className('errmsg')).isPresent()).toBe(true);
});
});
输入命令运行: npm run test-e2e 看看是否有打开chrome浏览器,跳转页面,按照测试内容一步步测试.
共有三个测试用例,全部通过.
protractor API主要分为两大块:
element(by.tagName('h1')).getText()
by.tagName('h1')用来定位元素,作为参数提供给element,再用getText()可获得h1标签的内容.
//常用的by查找元素方法
//根据class名来查找元素
by.css(‘myclass')
//根据id来查找元素
by.id(‘myid')
//根据ng-model名来查找元素
by.model(’name')
//查找绑定了指定名的元素
by.binding(‘bindingname')
//查找指定repeater中的元素
by.repeater('article in articleList')
//准确的查找一个repeater,常用来判断是否存在
by.exactRepeater('article in articleList')
//常用的操作元素方法
//点击元素
el.click();
//给该元素输入内容
el.sendKeys(’text’);
//清空元素内内容
el.clear();
//获取指定属性的值
el.getAttribute(‘value’);
//获取元素的文本值
el.getText();
//判断元素是否存在.
el.isPresent()
注意这些方法返回的都是promise,如果进行期望判断,expect()可以获取相应值,如:
expect(element(by.tagName('h1')).getText()).toEqual('文章内容页');
否而如果是想取出它的值.则如下:
element(by.tagName('h1')).getText().then(function(value){
//获取value值
})
element.all 用来匹配多个元素. protractor提供一些辅助函数对其进一步的筛选匹配,如: filter,get,first,last,count,each,map,reduce
alert("sss")
alert("sss")
testest
aaaaaaaaaaaaaaaaaa
xiexie
hao
噢噢噢噢
不错
Published
这是一条新的评论测试
这是一条评论
这个还能评论?