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設定變數值為 .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
環境驗證：
安裝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檔案，如下：
