原版地址：http://docs.angularjs.org/guide/dev_guide.e2e-testing

?

　　當一個應用的復雜度、大小在增加時，使得依靠人工去測試新特性的可靠性、抓Bug和回歸測試是不切實際的。

　　為了解決這個問題，我們建立了Angular Scenario Runner，模仿用戶的操作，幫助我們去驗證angular應用的健壯性。

?

一、?? 總括

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

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

　　這里是一個簡單的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);}); });

　　這個scenario描述了網絡客戶端的要求，明確地，它應該有過濾user的能力。它開始的時候，輸入了一個值到”user”輸入框中，單擊頁面上唯一的按鈕，然后它驗證是否有10個項目列表。然后，它輸入”Bees”到”filterText”的輸入框中，然后驗證那個列表是不是會減少到只有一個項。

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

二、?? API

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

　　pause()

　　暫停執行測試，直到我們在console中調用resume()（也可以在Runner界面中點擊resume鏈接）

　　

　　sleep(seconds)

　　暫停測試執行N秒。

?

　　browser().navigateTo(url)

　　在tset frame中加載指定url。

?

　　browser().navigateTo(url,fn)

　　在test frame中加載fn返回的url地址。這里的url參數只是用作測試輸出。當目的url是動態的時候可以使用這個API（寫測試的時候，地址還是未知的）。

?

　　browser().reload()

　　在test frame中刷新當前加載的頁面。

?

　　browser().window().href()

　　返回test frame當前頁面的window.location.href。

?

　　browser().window().path()

　　返回test frame當前頁面的window.location.pathname。

?

　　browser().window().search()

　　返回test frame當前頁面的window.location.search。

　　

　　browser().window().hash()

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

?

　　browser().location().url()

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

?

　　browser().location().path()

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

?

　　browser().location().search()

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

?

　　browser().location().hash()

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

?

　　expect(future).{matcher}

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

　　

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

?

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

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

?

　　using(selector,label)

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

　　例子：

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

?

　　binding(name)

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

?

　　input(name).enter(value)

　　輸入指定的value到name指定的表單域。

　　

　　input(name).check()

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

?

　　input(name).select(value)

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

?

　　input(name).val()

　　返回指定name的input的當前值。

?

　　repeater(selector,label).count()

　　返回與指定selector（jQuery selector）匹配的repeater的行數。label只用作測試輸出。

　　

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

?

　　repeater(selector,label).row(index)

　　返回一個數組，綁定指定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)

　　返回一個數組，值為指定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匹配的元素的個數。label僅僅用作測試輸出。

?

　　element(selector,label).click()

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

?

　　element(selector,label).query(fn)

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

?

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

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

?

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

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

?

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

　　返回在指定selector匹配的元素上執行指定method的結果，這些方法可以是以下的jQuery方法：attr，prop，css。label僅僅用作測試輸出。

　

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

在指定的selector匹配的元素上執行method并以key、value作為參數，這些方法可以是以下的jQuery方法：attr，prop，css。label僅僅用作測試輸出。

　　

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

轉載于:https://www.cnblogs.com/lcllao/archive/2012/09/25/2701582.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的AngularJs学习笔记--E2E Testing的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。