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文件，查看执行结果