最近,在为项目做端到端的自动化测试。由于项目使用的是angular1.5.8,所以我们采用protractor框架来做端到端的自动化测试。下面介绍一下在项目中如何使用protractor框架。
1、protractor介绍
官网地址:http://www.protractortest.org/
protractor是一个端到端的测试框架,主要用来测试angular和angularJs的应用。pratractor会模拟用户行为并且在真实的浏览器中运行测试用例。它主要有下面三个特点:
a、像一个真正的用户一样去测试
protractor是建立在WebDriverJS之上的。WebDriverJS主要采用本地事件和特定浏览器的驱动程序,就像真正的用户一样,来和应用程序进行交互。
b、用于angualr app测试
protractor支持特定的angular定位策略,这可以让我们来选中任何的angular元素并且进行测试。
c、自动等待
我们不再需要添加等待和休眠。protractor可以在目前页面完成待处理的人物后,自动执行下一个测试用例,所以你不用担心你的测试和web页面同步。
2、protractor工程化配置
为了完成项目自动化测试,我们引入了gulp-protractor包,这个包用来通过gulp执行protractor的各个任务;另外还引入了protractor-jasmine2-html-reporter,用于生成测试报告
a、在conf目录中新增protractor.config.js,用来配置protractor,内容如下:(specs属性中的先不用关注)
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
// seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar',
specs: ['./test/login/login_spec.js'],
jasmineNodeOpts : {
defaultTimeoutInterval : 60000,
showColors : true,
includeStackTrace : true,
isVerbose : true
},
onPrepare: function() {
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: './test/reports/',
screenshotsFolder: 'images',
takeScreenshotsOnlyOnFailures: true
})
);
}
};
b、在gulp_tasks目录中新增protractor.js,用于配置gulp自动化测试任务,内容如下:主要任务包括更新selinum服务器,启动selinum服务器,启动proractor自动化用例
const gulp = require('gulp');
const protractor = require("gulp-protractor").protractor;
const webdriverStandalone = require("gulp-protractor").webdriver_standalone;
// Download and update the selenium driver
const webdriverUpdate = require('gulp-protractor').webdriver_update;
// start the selenium webdriver
gulp.task('webdriver:update', webdriverUpdate);
// Downloads the selenium webdriver
gulp.task('webdriver:start', webdriverStandalone); gulp.task('protractor:auto-run', protractorAutoRun); function protractorAutoRun() { gulp.src(["./test/*/*.js","./test/*/*/*.js"]) .pipe(protractor({ configFile: "./conf/protractor.config.js", args: ['--baseUrl', 'http://localhost:4444/wd/hub'] })) .on('error', function(e) { throw e }) }
c、在gulpfile.js中新增test:auto任务,用于封装自动化测试,内容如下:
gulp.task('test:auto', gulp.series('protractor:auto-run'));
d、在package.js的scripts字段中新增启动任务命令:
"scripts": {
"build": "gulp",
"serve": "gulp serve",
"serve:dist": "gulp serve:dist",
"test": "gulp test",
"webdriver:update": "gulp webdriver:update",
"webdriver:start": "gulp webdriver:start",
"test:auto": "gulp test:auto"
},
3、protractor测试代码样例
以登陆模块为例子,举个例子:
const TESTPATH = require('./../path-conf');
describe('CloudOs Demo App', function() {
it('shuld open login page', function() {
browser.get(`${TESTPATH}/login`);
browser.setLocation('login');
expect(browser.getCurrentUrl()).toBe(`${TESTPATH}/login`);
});
it('should login sucess and open dashboard page', function() {
var loginBtn = element(by.buttonText('登 录'));
var name = element(by.model('$ctrl.name'));
var password = element(by.model('$ctrl.password'));
name.sendKeys('307409359@qq.com');
password.sendKeys('Huawei@2015');
loginBtn.click();
expect(browser.getCurrentUrl()).toBe(`${TESTPATH}/dashboard`);
})
});
4、运行protractor自动化用例步骤:
![](https://i-blog.csdnimg.cn/blog_migrate/9bfc16f7ff546e732c7b7fd6e97cb14b.png)