AngularJs学习笔记

expectation告诉runner去判断一些关于状态的东西(例如某个域的值或者当前的URL),command告诉Runner在应用中做某些事情(例如转到某个页面或者单击某个按钮),  我们可以在javascript中写情景测试(scenario,expectation告诉runner去判断一些关于状态的东西(例如某个域的值或者当前的URL),command告诉Runner在应用中做某些事情(例如转到某个页面或者单击某个按钮),  我们可以在javascript中写情景测试(scenario

图片 2

       
当二个利用的复杂度、大小在扩充时,使得依据人工去测量试验新特色的可信性、抓Bug和回归测量试验是不符合实际的。

原版地址:

  为了消除这几个题目,大家树立了Angular Scenario
Runner,模仿客户的操作,援救大家去验证angular应用的健壮性。

 

一、   总括

  当贰个接纳的复杂度、大小在大增时,使得依赖人工去测验新特色的可信性、抓Bug和回归测量试验是不切实际的。

  大家得以在javascript中写情景测量试验(scenario
test),描述大家的选取产生的表现,在有个别状态下予以有个别互动。一个光景包蕴二个可能三个”it”块(大家得以将那一个作为对大家采纳的渴求),依次由命令(command)和梦想(expectation)组成。command告诉Runner在使用中做一点事情(比方转到有个别页面可能单击有些开关),expectation告诉runner去看清一些关于状态的东西(举例有个别域的值或许当前的ULANDL)。假使任何expectation失败了,那么runner标识这几个”it”为”false”,然后继续下叁个”it”。Scenario也得以具有”
beforeEach”和”
afterEach”block,那几个block会在每二个”it”block在此之前依旧未来运营,不管它是否通过。

  为了消除那么些标题,大家创造了Angular Scenario
Runner,模仿客户的操作,帮忙大家去验证angular应用的健壮性。

图片 1

 

  除了上述要素外,scenario也得以分包helper
function,制止在”it”block中有再度的代码。

一、   总括

  这里是一个简约的scenario例子: 

  大家能够在javascript中写情景测量试验(scenario
test),描述我们的利用产生的一举一动,在有个别状态下予以有些互动。八个现象富含一个依旧三个”it”块(大家能够将那个作为对大家运用的供给),依次由命令(command)和期望(expectation)组成。command告诉Runner在选择中做一些事情(比方转到有些页面恐怕单击有些开关),expectation告诉runner去决断一些有关状态的事物(比如某些域的值或许当前的U奥迪Q5L)。若是任何expectation战败了,那么runner标记那几个”it”为”false”,然后继续下三个”it”。Scenario也能够具有”
beforeEach”和”
afterEach”block,这一个block会在各类”it”block在此之前依旧未来运维,不管它是还是不是经过。

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

图片 2

  那么些scenario描述了网络顾客端的渴求,彰着地,它应有有过滤user的手艺。它初步的时候,输入了一个值到”user”输入框中,单击页面上独一无二的开关,然后它注解是或不是有十一个档期的顺体系表。然后,它输入”Bees”到”filterText”的输入框中,然后验证那些列表是否会削减到唯有七个项。

  除了上述要素外,scenario也得以饱含helper
function,防止在”it”block中有重新的代码。

上边包车型地铁API章节,列出了在Runner中可用的command和expectation。

  这里是叁个简练的scenario例子:  

二、   API

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”输入框中,单击页面上独一无二的按键,然后它注脚是不是有十三个连串列表。然后,它输入”Bees”到”filterText”的输入框中,然后验证那些列表是还是不是会压缩到独有一个项。

  pause()

上边包车型地铁API章节,列出了在Runner中可用的command和expectation。

  暂停执行测验,直到我们在console中调用resume()(也足以在Runner分界面中式点心击resume链接)  

二、   API

  sleep(seconds)

  源代码:

  暂停测验试行N秒。

  pause()

  browser().navigateTo(url)

  暂停实践测验,直到大家在console中调用resume()(也得以在Runner分界面中点击resume链接)

  在tset frame中加载钦定url。

  

  browser().navigateTo(url,fn)

  sleep(seconds)

  在test
frame中加载fn再次来到的url地址。这里的url参数只是当作测量试验输出。当指标url是动态的时候能够动用那些API(写测验的时候,地址依然不解的)。

  暂停测量试验推行N秒。

  browser().reload()

 

  在test frame中刷新当前加载的页面。 

  browser().navigateTo(url)

  browser().window().href()

  在tset frame中加载指定url。

  重返test frame当前页面包车型大巴window.location.href。 

 

  browser().window().path()

  browser().navigateTo(url,fn)

  再次来到test frame当前页面包车型大巴window.location.pathname。 

  在test
frame中加载fn再次来到的url地址。这里的url参数只是当作测试输出。当目标url是动态的时候能够利用这几个API(写测量试验的时候,地址如故不解的)。

  browser().window().search()

 

  重返test frame当前页面的window.location.search。  

  browser().reload()

  browser().window().hash()

  在test frame中刷新当前加载的页面。

  重返test frame当前页面包车型大巴window.location.hash(不分包#)。 

 

  browser().location().url()

  browser().window().href()

  重回test frame
当前页面包车型客车$location.url()的回到结果(

  重回test frame当前页面包车型大巴window.location.href。

  browser().location().path()

 

  再次回到test frame 当前页面包车型客车$location. path
()的归来结果( 

  browser().window().path()

  browser().location().search()

  再次回到test frame当前页面包车型客车window.location.pathname。

  再次来到test frame 当前页面的$location. search
()的回来结果(

 

  browser().location().hash()

  browser().window().search()

  再次来到test frame 当前页面包车型大巴$location. hash
()的回来结果(

  重返test frame当前页面包车型大巴window.location.search。

  expect(future).{matcher}

  

  推断给定的企盼(future)值是不是满意matcher。全体API的宣示都回去二个在它们施行完结之后收获到的四个钦点值的future对象。matcher是选用angular.scenario.matcher定义的,他们运用futures的值去试行expectation。比如:  

  browser().window().hash()

           
expect(browser().location().href()).toEqual(‘’);

  重临test frame当前页面的window.location.hash(不饱含#)。

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

 

  剖断给定future的值是或不是与钦定的matcher的料想相反。 

  browser().location().url()

  using(selector,label)

  重返test frame
当前页面包车型大巴$location.url()的回到结果(

  Scopes the next DSL element
selection.(大概是限制接纳器的功用域,label猜想是用以测量试验输出)

 

  例子:

  browser().location().path()

          using(‘#foo’, “‘Foo’ text
field”).input(‘bar’) 

  重返test frame 当前页面包车型的士$location. path
()的回到结果(

  binding(name)

 

  重返第三个与钦定的name相配的绑定(大概是跟ng-bind相关)。 

  browser().location().search()

  input(name).enter(value)

  再次来到test frame 当前页面的$location. search
()的回到结果(

  输入钦定的value到name钦赐的表单域。  

 

  input(name).check()

  browser().location().hash()

  选中大概排除选中钦点name的checkbox。

  再次来到test frame 当前页面的$location. hash
()的回到结果(

  input(name).select(value)

 

  选中钦命name的radio中值为value的input[type=” radio”]。 

  expect(future).{matcher}

  input(name).val()

  推断给定的梦想(future)值是不是满意matcher。全数API的扬言都回到二个在它们实行实现之后获得到的叁个钦点值的future对象。matcher是采纳angular.scenario.matcher定义的,他们使用futures的值去实践expectation。比如:

  重回钦定name的input的脚下值。

  

  repeater(selector,label).count()

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

  重临与钦命selector(jQuery
selector)相称的repeater的行数。label只用作测量检验输出。  

 

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

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

  repeater(selector,label).row(index)

  判别给定future的值是还是不是与钦命的matcher的意料相反。

  重临三个数组,绑定内定selector(jQuery
selector)相称的repeater中内定index的行。label仅仅用于测量试验输出。

 

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

  using(selector,label)

  repeater(selector,label).column(binding)

  Scopes the next DSL element
selection.(大约是限量选取器的作用域,label估量是用以测量检验输出)

  再次回到四个数组,值为内定selector(jQuery
selector)匹配的repeater中符合钦定binding的列。label仅仅用于测量试验输出。

  例子:

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

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

  select(name).option(value)

 

  接纳钦点name的select中钦赐value的option。 

  binding(name)

  select(name).option(value1,value2)

  再次来到第多个与钦命的name相称的绑定(可能是跟ng-bind相关)。

  选取钦点name的select中钦赐value的option(多选)。 

 

  element(selector,label).count()

  input(name).enter(value)

  重回与钦点selector相配的要素的个数。label仅仅看做测量检验输出。 

  输入钦命的value到name钦点的表单域。

  element(selector,label).click()

  

  单击与内定selector匹配的因素。label仅仅作为测量检验输出。 

  input(name).check()

  element(selector,label).query(fn)

  选中也许排除选中钦命name的checkbox。

  实行内定的fn(selectedElements,done),selectedElement就是与钦点selector相配的成分集结;而done是二个function,会在fn推行完结后实践。label仅仅作为测验输出。

 

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

  input(name).select(value)

  再次回到在钦点selector相称的要素上实践method的重返值。method能够是以下的jQuery方法:val、text、html、height、innerHeight、outerHeight、width、innerWidth、outerWidth、position、scrollLelft、scrollTop、offset。label仅仅作为测量试验输出。

  选中钦命name的radio中值为value的input[type=” radio”]。

  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仅仅作为测量检验输出。

  input(name).val()

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

  重回钦命name的input的当下值。

  重返在内定selector相配的要素上试行钦点method的结果,这几个艺术能够是以下的jQuery方法:attr,prop,css。label仅仅作为测验输出。 

 

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

  repeater(selector,label).count()

在钦定的selector相称的因素上试行method并以key、value作为参数,这一个主意能够是以下的jQuery方法:attr,prop,css。label仅仅看做测验输出。  

  重回与钦定selector(jQuery
selector)相称的repeater的行数。label只用作测验输出。

  javascript是动态类型的言语,带来了强劲技术的表达式,但它同一时间让我们从编写翻译器中大约得不到任何赞助。由此,大家很显明地感受到,任何用javascript写的代码都亟待进行大气、周到的测验。angular有看不尽表征,能够让大家更为轻松地质衡量试大家的选取。所以大家从不借口不去写测量试验。(-_-!!)

  

        以上正是对 AngularJs E2E Testing
的资料整理,后续继续追加有关质地,多谢大家对本站的支撑!

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

您也许感兴趣的稿子:

  • AngularJS 面试题集锦
  • AngularJS
    $on、$emit和$broadcast的使用
  • AngularJS实现标签页的三种办法
  • angularjs完结文字上下无缝滚动特效代码
  • AngularJs
    unit-testing(单元测量检验)详解
  • AngularJs Managing Service
    Dependencies详解
  • AngularJs Creating
    Services详解及示范代码
  • AngularJs Using
    $location详解及示范代码
  • AngularJs Understanding Angular
    Templates
  • AngularJs Understanding the Controller
    Component
  • AngularJs Understanding the Model
    Component
  • AngularJs Dependency
    Injection(DI,重视注入)
  • AngularGauge 属性分析详解

 

  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有多数特征,能够让大家特别便于地质衡量试大家的行使。所以大家从不借口不去写测量试验。(-_-!!)