angularjs中的e2e測試實例

2019-11-20 13:48:24

字體：大中小

來源：轉載

供稿：網友

在上一篇文章里有講到ng的單元測試,今天來說說e2e(端對端)測試.

當我們測試某個模塊的單個功能點時,單元測試最適合,不過當面臨用戶進行多個頁面交互的時候產生bug了,單元測試就不行了,這時候就得用e2e來模擬用戶操作還原問題現場.當然利用e2e測試也能夠測試程序的健壯性,很多單元測試辦不到的事情,e2e測試都能夠辦到.

之前,ng是利用Angular Scenario Runner來運行e2e測試,現在已經換成Protractor來跑e2e了.

Protractor

Protractor是Angularjs里用來測試e2e的框架,它本身是一個npm模塊,內部是構建在WebDriverJS之上的,Protractor能夠真正讓你的測試用例運行在瀏覽器上,完全模擬用戶的真實行為.

下面貼上它的一些資源地址:

1.Protractor提供的測試api
2.Protractor簡單使用例子
3.WebDriverJs指南,這是Protractor依賴的核心,npm模塊名為selenium-webdriver

Protractor運行原理

Protractor運行e2e測試所依賴的主要有以下幾個東西:

1.WebDriver APIs,就是上面提到的WebDriverJs,是由Selenium提供給前端測試用的相關js api
2.Selenium Server,一個后端jar包,用來負責跟瀏覽器驅動進行通訊用的
3.WebDriver browser drivers,用來顯示真實網站內容并與Selenium Server通訊用,這里才是傳遞真實瀏覽器操作的地方

整個運行過程如下圖

想了解更多關于這幾個組件之前交互的可以點擊這里

利用ng種子項目來講解e2e

我們利用ng官方提供的種子項目來講解一個真實的e2e例子,首先利用下面命令獲取種子項目

復制代碼代碼如下:

git clone https://github.com/angular/angular-seed.git

然后運行

復制代碼代碼如下:

npm install

安裝相關的所有依賴文件

這里先說下運行e2e測試需要的配置文件,可以看到test/protractor-conf.js這個文件就是用來配置相關功能的,重點說下幾個屬性

1.specs 代表要運行的測試文件路徑,這里寫的是e2e/*.js
2.baseUrl 代表測試文件中瀏覽器間跳轉頁面的根地址
3.capabilities 代表使用哪個瀏覽器來運行測試用例,比如使用chrome,可以這樣設置

復制代碼代碼如下:

capabilities: {
    'browserName': 'chrome'
  }

framework 代表使用的哪種測試框架,這里使用的是jasmine

想了解更多關于這個配置文件的可以點擊這里查看

說完了配置文件,我們再來看看測試用例的寫法,先貼上一個官網上的例子

復制代碼代碼如下:

'use strict';

/* https://github.com/angular/protractor/blob/master/docs/getting-started.md */

describe('my app', function() {

browser.get('index.html');
it('should automatically redirect to /view1 when location hash/fragment is empty', function() {
expect(browser.getLocationAbsUrl()).toMatch("/view1");
});

describe('view1', function() {

    beforeEach(function() {
      browser.get('index.html#/view1');
    });

    it('should render view1 when user navigates to /view1', function() {
      expect(element.all(by.css('[ng-view] p')).first().getText()).
        toMatch(/partial for view 1/);
    });

});

describe('view2', function() {

    beforeEach(function() {
      browser.get('index.html#/view2');
    });

    it('should render view2 when user navigates to /view2', function() {
      expect(element.all(by.css('[ng-view] p')).first().getText()).
        toMatch(/partial for view 2/);
    });

});
});

首先上面的語法是jasmine框架支持的寫法,不了解它的用法的可以點擊這里

這里只說下上面例子里關于protractor提供的一些常用方法與屬性

1.browser,全局對象,代表當前瀏覽器的一個實例,常用的get方法用來實現瀏覽器改變地址
2.element,全局對象,提供像jquery里負責查找文檔元素的功能,常于by對象聯合使用
3.by, 全局對象,提供一個選擇器類型,比如可以通過css,model,bind等特性來查找一個元素

關于element與by的方法可以參考上面的protractor api文檔

說了這么多,該跑一跑上面的測試用例了,命令比較簡單

復制代碼代碼如下:

npm run update-webdriver

這個負責下載相關的瀏覽器驅動與selenium-server 本地jar包,一般情況下這個都是會失敗的,因為這兩個資源都在google服務器那,所以可以利用瀏覽器翻墻單獨下載,地址如下:

1.Chrome Driver地址,一般下載chromedriver_2.9.zip這個文件.

2.selenium-server 本地jar包下載,一般下載selenium-server-standalone-2.40.0.jar這個文件.

然后把selenium-server拷到protractor包里的selenium文件夾里去,假如上面的命令超時之后,這里也會出現文件不過是空的,直接替換就可以;還要把chromedriver_2.9.zip解壓之后的文件拷到這里