當(dāng)一個(gè)應(yīng)用的復(fù)雜度、大小在增加時(shí)，使得依靠人工去測試新特性的可靠性、抓Bug和回歸測試是不切實(shí)際的。

　　為了解決這個(gè)問題，我們建立了Angular Scenario Runner，模仿用戶的操作，幫助我們?nèi)ヲ?yàn)證angular應(yīng)用的健壯性。

一、   總括

　　我們可以在javascript中寫情景測試（scenario test），描述我們的應(yīng)用發(fā)生的行為，在某個(gè)狀態(tài)下給與某些互動(dòng)。一個(gè)情景包含一個(gè)或者多個(gè)”it”塊（我們可以將這些當(dāng)作對(duì)我們應(yīng)用的要求），依次由命令（command）和期望（expectation）組成。command告訴Runner在應(yīng)用中做某些事情（例如轉(zhuǎn)到某個(gè)頁面或者單擊某個(gè)按鈕），expectation告訴runner去判斷一些關(guān)于狀態(tài)的東西（例如某個(gè)域的值或者當(dāng)前的URL）。如果任何expectation失敗了，那么runner標(biāo)記這個(gè)”it”為”false”，然后繼續(xù)下一個(gè)”it”。Scenario也可以擁有” beforeEach”和” afterEach”block，這些block會(huì)在每一個(gè)”it”block之前或者之后運(yùn)行，不管它是否通過。

　　除了上述元素外，scenario也可以包含helper function，避免在”it”block中有重復(fù)的代碼。

　　這里是一個(gè)簡單的scenario例子： 

describe('Buzz Client', function() {
 it('should filter results', function() {
  input('user').enter('jacksparrow');
  element(':button').click();
  expect(repeater('ul li').count()).toEqual(10);
  Input('filterText').enter('Bees');
  expect(repeater('ul li').count()).toEqual(1);
 });
});

　　這個(gè)scenario描述了網(wǎng)絡(luò)客戶端的要求，明確地，它應(yīng)該有過濾user的能力。它開始的時(shí)候，輸入了一個(gè)值到”user”輸入框中，單擊頁面上唯一的按鈕，然后它驗(yàn)證是否有10個(gè)項(xiàng)目列表。然后，它輸入”Bees”到”filterText”的輸入框中，然后驗(yàn)證那個(gè)列表是不是會(huì)減少到只有一個(gè)項(xiàng)。

下面的API章節(jié)，列出了在Runner中可用的command和expectation。

二、   API

　　源代碼：https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js

　　pause()

　　暫停執(zhí)行測試，直到我們?cè)赾onsole中調(diào)用resume()（也可以在Runner界面中點(diǎn)擊resume鏈接）　　

　　sleep(seconds)

　　暫停測試執(zhí)行N秒。

　　browser().navigateTo(url)

　　在tset frame中加載指定url。

　　browser().navigateTo(url,fn)

　　在test frame中加載fn返回的url地址。這里的url參數(shù)只是用作測試輸出。當(dāng)目的url是動(dòng)態(tài)的時(shí)候可以使用這個(gè)API（寫測試的時(shí)候，地址還是未知的）。

　　browser().reload()

　　在test frame中刷新當(dāng)前加載的頁面。 

　　browser().window().href()

　　返回test frame當(dāng)前頁面的window.location.href。 

　　browser().window().path()

　　返回test frame當(dāng)前頁面的window.location.pathname。 

　　browser().window().search()

　　返回test frame當(dāng)前頁面的window.location.search。　　

　　browser().window().hash()

　　返回test frame當(dāng)前頁面的window.location.hash（不包含#）。 

　　browser().location().url()

　　返回test frame 當(dāng)前頁面的$location.url()的返回結(jié)果（http://docs.angularjs.org/api/ng.$location）

　　browser().location().path()

　　返回test frame 當(dāng)前頁面的$location. path ()的返回結(jié)果（http://docs.angularjs.org/api/ng.$location） 

　　browser().location().search()

　　返回test frame 當(dāng)前頁面的$location. search ()的返回結(jié)果（http://docs.angularjs.org/api/ng.$location）

　　browser().location().hash()

　　返回test frame 當(dāng)前頁面的$location. hash ()的返回結(jié)果（http://docs.angularjs.org/api/ng.$location）

　　expect(future).{matcher}

　　判斷給定的期望(future)值是否滿足matcher。所有API的聲明都返回一個(gè)在它們執(zhí)行完畢之后獲取到的一個(gè)指定值的future對(duì)象。matcher是使用angular.scenario.matcher定義的，他們使用futures的值去執(zhí)行expectation。例如：　　

            expect(browser().location().href()).toEqual(‘http://www.google.com');

　　expect(future).not().{matcher}

　　判斷給定future的值是否與指定的matcher的預(yù)期相反。 

　　using(selector,label)

　　Scopes the next DSL element selection.（大概是限定選擇器的作用域，label估計(jì)是用于測試輸出）

　　例子：

          using('#foo', "'Foo' text field").input('bar') 

　　binding(name)

　　返回第一個(gè)與指定的name匹配的綁定(也許是跟ng-bind相關(guān))。 

　　input(name).enter(value)

　　輸入指定的value到name指定的表單域?！　?/p>

　　input(name).check()

　　選中或者解除選中指定name的checkbox。

　　input(name).select(value)

　　選中指定name的radio中值為value的input[type=” radio”]。 

　　input(name).val()

　　返回指定name的input的當(dāng)前值。

　　repeater(selector,label).count()

　　返回與指定selector（jQuery selector）匹配的repeater的行數(shù)。label只用作測試輸出?！　?/p>

              repeater('#products table', 'Product List').count() //number of rows

　　repeater(selector,label).row(index)

　　返回一個(gè)數(shù)組，綁定指定selector（jQuery selector）匹配的repeater中指定index的行。label僅僅用于測試輸出。

              repeater('#products table', 'Product List').row(1) //all bindings in row as an array 

　　repeater(selector,label).column(binding)

　　返回一個(gè)數(shù)組，值為指定selector（jQuery selector）匹配的repeater中符合指定binding的列。label僅僅用于測試輸出。

             repeater('#products table', 'Product List').column('product.name') //all values across all rows in an array　　

　　select(name).option(value)

　　選擇指定name的select中指定value的option。 

　　select(name).option(value1,value2)

　　選擇指定name的select中指定value的option（多選）。 

　　element(selector,label).count()

　　返回與指定selector匹配的元素的個(gè)數(shù)。label僅僅用作測試輸出。 

　　element(selector,label).click()

　　單擊與指定selector匹配的元素。label僅僅用作測試輸出。 

　　element(selector,label).query(fn)

　　執(zhí)行指定的fn（selectedElements,done），selectedElement就是與指定selector匹配的元素集合；而done是一個(gè)function，會(huì)在fn執(zhí)行完畢后執(zhí)行。label僅僅用作測試輸出。

　　element(selector,label).{method}()

　　返回在指定selector匹配的元素上執(zhí)行method的返回值。method可以是以下的jQuery方法：val、text、html、height、innerHeight、outerHeight、width、innerWidth、outerWidth、position、scrollLelft、scrollTop、offset。label僅僅用作測試輸出。

　　element(selector,label).{method}(value)

　　在指定selector匹配的元素上執(zhí)行指定method，并以key、value作為參數(shù)。method可以是以下的jQuery方法：val、text、html、height、innerHeight、outerHeight、width、innerWidth、outerWidth、position、scrollLelft、scrollTop、offset。label僅僅用作測試輸出。

　　element(selector,label).{method}(key)

　　返回在指定selector匹配的元素上執(zhí)行指定method的結(jié)果，這些方法可以是以下的jQuery方法：attr，prop，css。label僅僅用作測試輸出?！?/p>

　　element(selector,label).{method}(key,value)

在指定的selector匹配的元素上執(zhí)行method并以key、value作為參數(shù)，這些方法可以是以下的jQuery方法：attr，prop，css。label僅僅用作測試輸出?！　?/p>

　　javascript是動(dòng)態(tài)類型的語言，帶來了強(qiáng)大力量的表達(dá)式，但它同時(shí)讓我們從編譯器中幾乎得不到任何幫助。因此，我們很強(qiáng)烈地感受到，任何用javascript寫的代碼都需要進(jìn)行大量、全面的測試。angular有很多特性，可以讓我們更加容易地測試我們的應(yīng)用。所以我們沒有借口不去寫測試。(-_-!!)

        以上就是對(duì) AngularJs E2E Testing 的資料整理，后續(xù)繼續(xù)增加相關(guān)資料，謝謝大家對(duì)本站的支持！

最新評(píng)論