本文介紹了使用Protractor對AngularJS開發的web應用進行自動化功能測試的方案和詳細操作指導。
名詞解釋
Protractor是AngularJS團隊發布的一款開源的端到端web測試運行工具。它可以模擬用戶的實際交互，幫助驗證Angular應用的實際運行狀況。Protractor使用Jasmine測試框架來定義測試用例。Protractor為不同的頁面交互提供一套健壯的API。相對于其他的端到端的工具，Protractor有著自己的優勢，它知道怎么和AngularJS的代碼一起運行，特別是應對$digest循環。
環境安裝
- 首先必須安裝執行環境nodejs
- 安裝瀏覽器，推薦chrome
- 安裝protractor+webdriver
npm install protractor -g
webdriver-manager update - 安裝完成后執行protractor --version，檢查安裝是否正常
- 在命令行控制臺啟動Selenium測試服務器。
webdriver-manager start
//默認情況下，Selenium測試服務器接入地址為：http://localhost:4444/wd/hub - 輸出測試報告需要安裝相關插件
//輸出html報告
npm install protractor-jasmine2-html-reporter -g
//輸出junit格式的xml報告
npm install jasmine-reporters -g
//由于需要在config文件中加載。一般把這兩個插件放在根目錄的node_modules 目錄下
工程配置
配置文件舉例如下：
var Jasmine2HtmlReporter = require('./node_modules/protractor-jasmine2-html-reporter');
var report = require('./node_modules/jasmine-reporters');
exports.config = {
// Selenium server 測試服務器接入地址
SeleniumAddress: 'http://localhost:4444/wd/hub',
// 測試服務器的配置信息
multiCapabilities: [{
browserName: 'firefox'
},{
browserName: 'chrome',
'chromeOptions': {
'args': ['incognito', 'disable-extensions', 'start-maximized']
}
}],
// 需要運行的測試程序代碼文件列表
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
},
//輸出測試報告
onPrepare: function(){
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: 'report/e2e/',
takeScreenshots: true, //是否截屏
takeScreenshotsOnlyOnFailures: true //測試用例執行失敗時才截屏
})
);
jasmine.getEnv().addReporter(
new report.JUnitXmlReporter({
savePath: 'report/tc/e2e/',
consolidateAll: false,
filePrefix:'',
package:'E2E'
})
);
}
};
測試用例怎么寫
測試用例是基于jasmine框架，關于用例描述和斷言比較，請參考上一篇帖子《基于karma+jasmine的web前端自動化測試》，這里不再贅述了
這里舉一個簡單的例子。
var DOMAIN = '127.0.0.1';
var TARGET_ROOT = 'http://'+DOMAIN;
describe('scan all app', function() {
beforeAll(function() {
// 設置cookie
var cookieObj = {
"real_name":"放松一下",
"dept_name":"開發部",
"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');
});
});
上述事例主要使用了如下接口：
- browser.get(url) 訪問url指定的web頁面
- browser.manage().deleteAllCookies() 刪除所有cookie
- browser.manage().addCookie(key,value) 添加cookie
- element.all(locator) 查找locator描述的所有元素
- element(locator) 查找locator描述的單個元素
瀏覽器的相關操作
這里舉例常用的幾個操作，詳細的請見參考資料。
browser.get(url) //訪問url指定的web頁面
browser.close() //關閉當前窗口
browser.sleep(ms) //等待，單位毫秒
browser.pause() //暫停執行，停止在當前頁面，主要用于調試
如何定位元素
上述示例中提到的by.binding，用于定位元素，被稱為定位器locator。Protractor中常用的定位器有如下幾種：
by.id('myElement') //id為myElement的元素
by.css('[class="element"]') //根據元素的屬性定位元素，此例為樣式class為element的元素。同時也支持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)來定位元素，前者是定位單個元素，后者是定位所有符合條件的元素。定位到元素后能做哪些操作？常用操作舉例如下：
element.all(by.binding('list.title')).count() //返回查找到的元素的個數
element.all(by.css('.element')).get(1) //返回定查找到的元素中的第二個元素
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(); //清空查找到的元素的內容
element(by.id('submit')).clear(); //點擊查找到的元素
參考資料
Protractor官網，不過被墻了，你懂的。
《Protractor入門》推薦！有可能被墻
示例比較多的指導書
《瀏覽器r相關接口文檔》
《元素操作的相關接口文檔》
