angularjs e2e測試初步學習（一）

e2e測試是從用戶角度出發，認爲整個系統都是一個黑盒，只有UI暴露出來。

angularjs的測試框架是採用protractor。

一、建立文件

首先建立一個項目文件夾test，而後再建立兩個文件，一個是測試文件testbook.spec.js，另外一個是配置文件testbook.conf.js

能夠先在test文件夾下使用npm init，自動建立package.json文件，文件目錄以下：

二、安裝測試框架

直接使用npm下載protractor框架以及以下圖的全部依賴。

三、直接上代碼

配置文件testbook.conf.js

 1 const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
 2 
 3 exports.config = {
 4     // 測試框架
 5     framework: 'jasmine',
 6     // 測試服務器接入地址
 7     // seleniumAddress: 'http:127.0.0.1:3000',
 8     // 須要運行的測試程序代碼文件列表
 9     specs: ['testbook.spec.js'],
10     baseUrl: 'http://127.0.0.1:3000',
11     directConnect: true,
12     chromeDriver: './node_modules/.bin/chromedriver',
13 
14     jasmineNodeOpts: {
15         print: function () {} // 禁止默認的...輸出
16     },
17 
18     onPrepare: function () {
19         let specReporter = new SpecReporter({ // add jasmine-spec-reporter
20             spec: {
21                 displayPending: true,
22                 displayErrorMessages: true,
23                 displayStacktrace: true
24             },
25             summary: {
26                 displayErrorMessages: true
27             }
28 
29         });
30         // 初始化必須
31         // 一個是jasmine的運行環境,是單例模式jasmine.getEnv()
32         // 還有一個是將測試結果顯示出來的addReporter(specReporter)
33         jasmine.getEnv().addReporter(specReporter);
34     }
35 }

測試文件testbook.spec.js

 1 // spec.js
 2 
 3 // describe定義一個測試案例集，it爲單個測試案例
 4 describe('Protractor Demo App', function () {
 5     it('should have some text', function () {
 6         // browser是經過protractor建立expect的全局變量,用於瀏覽器範圍的命令控制,好比tonguebrowser.get進行導航
 7         // browser.get 跳轉到指定頁面,還會從新刷新整個頁面
 8         browser.get('/');
 9         // browser.pause(); // 讓瀏覽器停下來
10         // 測試二者值是否相等,相等則測試經過,不相等則測試失敗
11         expect(browser.getTitle()).toEqual('Book System');
12     });
13 });

上面代碼簡單測試了跳轉到的指定頁面的title是否和Book System相等。

運行命令爲：./node_modules/.bin/protractor testbook.conf.js

運行成功的截圖：