angular-protractor端到端自動化測試實戰

最近，在爲項目作端到端的自動化測試。因爲項目使用的是angular1.5.8，因此咱們採用protractor框架來作端到端的自動化測試。下面介紹一下在項目中如何使用protractor框架。

一、protractor介紹

官網地址：http://www.protractortest.org/

protractor是一個端到端的測試框架，主要用來測試angular和angularJs的應用。pratractor會模擬用戶行爲而且在真實的瀏覽器中運行測試用例。它主要有下面三個特色：

a、像一個真正的用戶同樣去測試

protractor是創建在WebDriverJS之上的。WebDriverJS主要採用本地事件和特定瀏覽器的驅動程序，就像真正的用戶同樣，來和應用程序進行交互。

b、用於angualr app測試

protractor支持特定的angular定位策略，這可讓咱們來選中任何的angular元素而且進行測試。

c、自動等待

咱們再也不須要添加等待和休眠。protractor能夠在目前頁面完成待處理的人物後,自動執行下一個測試用例，因此你不用擔憂你的測試和web頁面同步。

二、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"
  },

 

三、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`);
    })
});

四、運行protractor自動化用例步驟：

a、執行npm run webdriver:update，更新selinum server版本

b、執行npm run webdriver:start, 啓動selinum server

c、打開新窗口，進入項目根目錄，執行npm run test:auto

 

五、查看測試報告

在test/reports/下，打開htmlReport.html文件，查看執行結果