AngularJS自動化測試之Protractor端到端測試
阿新 • • 發佈:2019-01-08
端到端測試
- 也可稱之為黑盒測試。
- 測試的視角是:作為終端使用者,對系統的底層實現一無所知。
- 適合測試頁面上的使用者互動,無需手動重新整理頁面,適合測試大型應用的功能。
測試框架
- Protractoris an end-to-end test framework for Angular andAngularJS applications.
-
Protractor runs tests against your application running in a real browser, interacting withit as a user would.
Protractor
- It will start up a Selenium Server and will output a bunch of info logs.
- Your Protractor test will send requeststo this server to control a local browser.
- Protractor tests are written using the syntax of your test framework, for example , and the .
環境搭建
- 安裝NodeJS(JavaScript執行環境)
- 安裝npm(JavaScript包管理工具)
- 安裝Java JDK (>= SE8)
- 安裝Protractor(Anend to end test runner)
官網參考:
安裝NodeJS,安裝npm見此處。
安裝Java JDK:
- 官網下載安裝JDK(>=SE8)
- 環境變數設定,分別配置如下三個系統變數(如果變數已存在,直接編輯;否則,新建該變數)
- JAVA_HOME設定變數值為 C:\Program Files\Java\jdk1.8.0(以實際安裝目錄為準)
- PATH新增變數值 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
- CLASSPATH設定變數值為
環境驗證:
安裝Protractor:
- Usenpm toinstall Protractor globally with: (npm install –g protractor)
更新Protractor外掛:
執行命令:webdriver-manager update
可能需要翻牆代理: webdriver-manager update --proxy=http://127.0.0.1:64678
Now start up a server with: webdriver-manager start
開始Protractor測試
-
安裝依賴包,在專案目錄:npm install
-
啟動測試server: node app/expressserver.js
-
執行protractor測試:protractor test/conf.js
至此,Protractor 測試完成。
Protractor-jasmine2-screenshot-reporter
修改test/conf.js檔案:
// Tests for the calculator.
var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');
var reporter = new HtmlScreenshotReporter({
dest: 'test/screenshots',
filename: 'my-report.html'
});
exports.config = {
directConnect: true,
framework: 'jasmine2',
specs: [
'spec.js'
],
capabilities: {
'browserName': 'chrome'
},
// Setup the report before any tests start
beforeLaunch: function() {
return new Promise(function(resolve){
reporter.beforeLaunch(resolve);
});
},
// Assign the test reporter to each running instance
onPrepare: function() {
jasmine.getEnv().addReporter(reporter);
},
// Close the report after all tests finish
afterLaunch: function(exitCode) {
return new Promise(function(resolve){
reporter.afterLaunch(resolve.bind(this, exitCode));
});
}
};
再次執行protractor: protractor test/conf.js
執行完畢,會在上面配置檔案中配置的路徑test/screentshots下生成my-report.html檔案,如下: