快捷導(dǎo)航

angularjs中的e2e測(cè)試實(shí)例

更新時(shí)間：2014年12月06日 10:57:41 投稿：junjie

這篇文章主要介紹了angularjs中的e2e測(cè)試實(shí)例,本文使用Protractor來(lái)完成e2e測(cè)試,需要的朋友可以參考下

在上一篇文章里有講到ng的單元測(cè)試,今天來(lái)說(shuō)說(shuō)e2e(端對(duì)端)測(cè)試.

當(dāng)我們測(cè)試某個(gè)模塊的單個(gè)功能點(diǎn)時(shí),單元測(cè)試最適合,不過(guò)當(dāng)面臨用戶進(jìn)行多個(gè)頁(yè)面交互的時(shí)候產(chǎn)生bug了,單元測(cè)試就不行了,這時(shí)候就得用e2e來(lái)模擬用戶操作還原問題現(xiàn)場(chǎng).當(dāng)然利用e2e測(cè)試也能夠測(cè)試程序的健壯性,很多單元測(cè)試辦不到的事情,e2e測(cè)試都能夠辦到.

之前,ng是利用Angular Scenario Runner來(lái)運(yùn)行e2e測(cè)試,現(xiàn)在已經(jīng)換成Protractor來(lái)跑e2e了.

Protractor

Protractor是Angularjs里用來(lái)測(cè)試e2e的框架,它本身是一個(gè)npm模塊,內(nèi)部是構(gòu)建在WebDriverJS之上的,Protractor能夠真正讓你的測(cè)試用例運(yùn)行在瀏覽器上,完全模擬用戶的真實(shí)行為.

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

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

Protractor運(yùn)行原理

Protractor運(yùn)行e2e測(cè)試所依賴的主要有以下幾個(gè)東西:

1.WebDriver APIs,就是上面提到的WebDriverJs,是由Selenium提供給前端測(cè)試用的相關(guān)js api
2.Selenium Server,一個(gè)后端jar包,用來(lái)負(fù)責(zé)跟瀏覽器驅(qū)動(dòng)進(jìn)行通訊用的
3.WebDriver browser drivers,用來(lái)顯示真實(shí)網(wǎng)站內(nèi)容并與Selenium Server通訊用,這里才是傳遞真實(shí)瀏覽器操作的地方

整個(gè)運(yùn)行過(guò)程如下圖

想了解更多關(guān)于這幾個(gè)組件之前交互的可以點(diǎn)擊這里

利用ng種子項(xiàng)目來(lái)講解e2e

我們利用ng官方提供的種子項(xiàng)目來(lái)講解一個(gè)真實(shí)的e2e例子,首先利用下面命令獲取種子項(xiàng)目

復(fù)制代碼代碼如下:

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

然后運(yùn)行

復(fù)制代碼代碼如下:

npm install

安裝相關(guān)的所有依賴文件

這里先說(shuō)下運(yùn)行e2e測(cè)試需要的配置文件,可以看到test/protractor-conf.js這個(gè)文件就是用來(lái)配置相關(guān)功能的,重點(diǎn)說(shuō)下幾個(gè)屬性

1.specs 代表要運(yùn)行的測(cè)試文件路徑,這里寫的是e2e/*.js
2.baseUrl 代表測(cè)試文件中瀏覽器間跳轉(zhuǎn)頁(yè)面的根地址
3.capabilities 代表使用哪個(gè)瀏覽器來(lái)運(yùn)行測(cè)試用例,比如使用chrome,可以這樣設(shè)置

復(fù)制代碼代碼如下:

capabilities: {

    'browserName': 'chrome'

  }

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

想了解更多關(guān)于這個(gè)配置文件的可以點(diǎn)擊這里查看

說(shuō)完了配置文件,我們?cè)賮?lái)看看測(cè)試用例的寫法,先貼上一個(gè)官網(wǎng)上的例子

復(fù)制代碼代碼如下:

'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/);
    });

});
});

首先上面的語(yǔ)法是jasmine框架支持的寫法,不了解它的用法的可以點(diǎn)擊這里

這里只說(shuō)下上面例子里關(guān)于protractor提供的一些常用方法與屬性

1.browser,全局對(duì)象,代表當(dāng)前瀏覽器的一個(gè)實(shí)例,常用的get方法用來(lái)實(shí)現(xiàn)瀏覽器改變地址
2.element,全局對(duì)象,提供像jquery里負(fù)責(zé)查找文檔元素的功能,常于by對(duì)象聯(lián)合使用
3.by, 全局對(duì)象,提供一個(gè)選擇器類型,比如可以通過(guò)css,model,bind等特性來(lái)查找一個(gè)元素

關(guān)于element與by的方法可以參考上面的protractor api文檔

說(shuō)了這么多,該跑一跑上面的測(cè)試用例了,命令比較簡(jiǎn)單

復(fù)制代碼代碼如下:

npm run update-webdriver

這個(gè)負(fù)責(zé)下載相關(guān)的瀏覽器驅(qū)動(dòng)與selenium-server 本地jar包,一般情況下這個(gè)都是會(huì)失敗的,因?yàn)檫@兩個(gè)資源都在google服務(wù)器那,所以可以利用瀏覽器翻墻單獨(dú)下載,地址如下:

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

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

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

最后運(yùn)行下面的命令可以看到測(cè)試結(jié)果了

復(fù)制代碼代碼如下:

npm run protractor

想了解更多關(guān)于ng種子項(xiàng)目里的命令行,可以點(diǎn)擊這里查看