最近，在为项目做端到端的自动化测试。由于项目使用的是angular1.5.8，所以我们采用protractor框架来做端到端的自动化测试。下面介绍一下在项目中如何使用protractor框架。
1、protractor介绍
官网地址：/
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 driverconst webdriverUpdate = require('gulp-protractor').webdriver_update;// start the selenium webdrivergulp.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@');password.sendKeys('Huawei@');loginBtn.click();expect(browser.getCurrentUrl()).toBe(`${TESTPATH}/dashboard`);})});
4、运行protractor自动化用例步骤：
a、执行npm run webdriver:update，更新selinum server版本 b、执行npm run webdriver:start, 启动selinum server c、打开新窗口，进入项目根目录，执行npm run test:auto 5、查看测试报告 在test/reports/下，打开htmlReport.html文件，查看执行结果
