本文介紹了使用Protractor對(duì)AngularJS開發(fā)的web應(yīng)用進(jìn)行自動(dòng)化功能測試的方案和詳細(xì)操作指導(dǎo)。

名詞解釋

Protractor是AngularJS團(tuán)隊(duì)發(fā)布的一款開源的端到端web測試運(yùn)行工具。它可以模擬用戶的實(shí)際交互，幫助驗(yàn)證Angular應(yīng)用的實(shí)際運(yùn)行狀況。Protractor使用Jasmine測試框架來定義測試用例。Protractor為不同的頁面交互提供一套健壯的API。相對(duì)于其他的端到端的工具，Protractor有著自己的優(yōu)勢，它知道怎么和AngularJS的代碼一起運(yùn)行，特別是應(yīng)對(duì)$digest循環(huán)。

環(huán)境安裝

1. 首先必須安裝執(zhí)行環(huán)境nodejs
2. 安裝瀏覽器，推薦chrome
3. 安裝protractor+webdriver
   npm install protractor -g
   webdriver-manager update
4. 安裝完成后執(zhí)行protractor --version，檢查安裝是否正常
5. 在命令行控制臺(tái)啟動(dòng)Selenium測試服務(wù)器。
   webdriver-manager start
   //默認(rèn)情況下，Selenium測試服務(wù)器接入地址為：http://localhost:4444/wd/hub
6. 輸出測試報(bào)告需要安裝相關(guān)插件
   //輸出html報(bào)告
   npm install protractor-jasmine2-html-reporter -g
   //輸出junit格式的xml報(bào)告
   npm install jasmine-reporters -g
   //由于需要在config文件中加載。一般把這兩個(gè)插件放在根目錄的node_modules 目錄下

工程配置

配置文件舉例如下：

var Jasmine2HtmlReporter = require('./node_modules/protractor-jasmine2-html-reporter');
var report = require('./node_modules/jasmine-reporters');
exports.config = {
  // Selenium server 測試服務(wù)器接入地址
  SeleniumAddress: 'http://localhost:4444/wd/hub',
  // 測試服務(wù)器的配置信息
  multiCapabilities: [{
    browserName: 'firefox'
  },{
    browserName: 'chrome',
    'chromeOptions': {
            'args': ['incognito', 'disable-extensions', 'start-maximized']
        }
  }],
  // 需要運(yùn)行的測試程序代碼文件列表
  suites: {
    scan: 'tc/e2e/scan.js',
    app: 'tc/e2e/app.js',
    hppd: 'tc/e2e/hppd.js'
  },
  // 選擇使用 jasmine 作為JavaScript語言的測試框架
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    isVerbose: true,
    includeStackTrace: false
  },
  //輸出測試報(bào)告
  onPrepare: function(){
    jasmine.getEnv().addReporter(
        new Jasmine2HtmlReporter({
          savePath: 'report/e2e/',
          takeScreenshots: true,  //是否截屏
          takeScreenshotsOnlyOnFailures: true //測試用例執(zhí)行失敗時(shí)才截屏
        })
      );
    jasmine.getEnv().addReporter(
      new report.JUnitXmlReporter({
          savePath: 'report/tc/e2e/',
          consolidateAll: false,
          filePrefix:'',
          package:'E2E'
      })
    );
  }
};

測試用例怎么寫

測試用例是基于jasmine框架，關(guān)于用例描述和斷言比較，請參考上一篇帖子《基于karma+jasmine的web前端自動(dòng)化測試》，這里不再贅述了
這里舉一個(gè)簡單的例子。

var DOMAIN = '127.0.0.1';
var TARGET_ROOT = 'http://'+DOMAIN;
describe('scan all app', function() {
    beforeAll(function() {
        // 設(shè)置cookie
        var cookieObj = {
            "real_name":"放松一下",
            "dept_name":"開發(fā)部",
            "avatar":"/images/u15.png",
            "message":"22"
        };
        browser.get(TARGET_ROOT + '/index/about.html');
        browser.manage().deleteAllCookies().then(function () {
                browser.manage().addCookie("login_user",JSON.stringify(JSON.stringify(cookieObj)), '/', DOMAIN);
        });
    });
    
    it('app.code', function() {
        browser.get(TARGET_ROOT + '/app/code/');        
        expect(element.all(by.binding("project['name']")).count()).toBeGreaterThan(1);
    });
   
    it('app.ci', function() {
        browser.get(TARGET_ROOT + '/app/ci/');        
        expect(element(by.binding('userInfo.realName')).getText()).toEqual('李忠偉10183089');
    });
});

上述事例主要使用了如下接口：

1. browser.get(url) 訪問url指定的web頁面
2. browser.manage().deleteAllCookies() 刪除所有cookie
3. browser.manage().addCookie(key,value) 添加cookie
4. element.all(locator) 查找locator描述的所有元素
5. element(locator) 查找locator描述的單個(gè)元素

瀏覽器的相關(guān)操作

這里舉例常用的幾個(gè)操作，詳細(xì)的請見參考資料。

browser.get(url)   //訪問url指定的web頁面
browser.close()   //關(guān)閉當(dāng)前窗口
browser.sleep(ms)   //等待，單位毫秒
browser.pause()  //暫停執(zhí)行，停止在當(dāng)前頁面，主要用于調(diào)試

如何定位元素

上述示例中提到的by.binding，用于定位元素，被稱為定位器locator。Protractor中常用的定位器有如下幾種：

by.id('myElement')   //id為myElement的元素
by.css('[class="element"]')   //根據(jù)元素的屬性定位元素，此例為樣式class為element的元素。同時(shí)也支持jquery的selector語法來定位元素，例如（by.css('.element')）。
by.binding('list.title')    //綁定了ng-bind="list.title"的元素
by.repeater('modules.content')    //綁定了ng-repeat="module in modules.content"的元素
by.model('person.name')  //綁定了ng-model="person.nam"的元素

更多定位器請見參考資料。

定位的元素如何操作

Protractor中使用element(locator)和element.all(locator)來定位元素，前者是定位單個(gè)元素，后者是定位所有符合條件的元素。定位到元素后能做哪些操作？常用操作舉例如下：

element.all(by.binding('list.title')).count()   //返回查找到的元素的個(gè)數(shù)
element.all(by.css('.element')).get(1)  //返回定查找到的元素中的第二個(gè)元素
element(by.css('.myname')).getText()  //返回查找到的元素的text
element(by.id('user_name').sendKeys('user1')    //向查找到的元素輸入'user1'
element(by.id('user_desc').sendKeys(protractor.Key.ENTER);    //向查找到的元素輸入回車鍵
element(by.id('user_desc').sendKeys(protractor.Key.TAB);    //向查找到的元素輸入TAB鍵
element(by.id('user_name')).clear();   //清空查找到的元素的內(nèi)容
element(by.id('submit')).clear();   //點(diǎn)擊查找到的元素

參考資料

Protractor官網(wǎng)，不過被墻了，你懂的。
《Protractor入門》推薦！有可能被墻
示例比較多的指導(dǎo)書
《瀏覽器r相關(guān)接口文檔》
《元素操作的相關(guān)接口文檔》