AngularJs學習筆記--E2E Testing


原版地址: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有很多特性,可以讓我們更加容易地測試我們的應用。所以我們沒有借口不去寫測試。(-_-!!)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM