最近，在為項目做端到端的自動化測試。由於項目使用的是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自動化用例步驟：
