AngularJs E2E Testing 详解_AngularJS

        当一个应用的复杂度、大小在增加时,使得依靠人工去测试新特性的可靠性、抓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有很多特性,可以让我们更加容易地测试我们的应用。所以我们没有借口不去写测试。(-_-!!)

        以上就是对 AngularJs E2E Testing 的资料整理,后续继续增加相关资料,谢谢大家对本站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs
, testing
, 详解
E2E
e2e testing、angularjs e2e、angularjs 指令详解、angularjs q详解、angularjs mvc 详解,以便于您获取更多的相关知识。

时间: 2024-10-28 07:57:16

AngularJs E2E Testing 详解_AngularJS的相关文章

AngularJS 日期格式化详解_AngularJS

AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. AngularJS的日期格式化有两种形式,一种是在HTML页面,一种是在JS代码里,都是用到AngularJS的过滤器$filter. HTML: date_expression 即 你在$scope中设的date类型变量(注意,一定是date object才正确), 也是要显

AngularJS自定义控件实例详解_AngularJS

本文实例讲述了AngularJS自定义控件.分享给大家供大家参考,具体如下: 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染.比如说,内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令. 当然你也可以实现自己的.这就是 AngularJS 所谓的"教会 HTML 玩新姿势".本文将告诉你如何做到. 指令类型 可以自定义的指令类型如下: 元素 属性 CSS class Comment directives 这里面

AngularJS 工作原理详解_AngularJS

 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析.      首先上一小段代码(index.html),结合代码我们来看看,angular一步一步都做了些什么. <!doctype html> <html ng-app> <head> <script src="angular.js">&

AngularJS Module方法详解_AngularJS

AngularJS是什么? AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强. 何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive).后面会详细介绍.那么,什么又是动态web应用呢?

Angularjs过滤器使用详解_AngularJS

给大家介绍下什么是 AngularJS? AngularJS是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用?数据绑定?和?依赖注入,它使你不用再写大量的代码了.这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的

AngularJS ng-bind-template 指令详解_AngularJS

AngularJS ng-bind-template 指令 AngularJS 实例 <p> 元素上绑定两个表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS入门教程之Select(选择框)详解_AngularJS

AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://a

AngularJs html compiler详解及示例代码_AngularJS

原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自定义新的HTML语法.compiler允许我们对任意HTML元素或属性,甚至是新的HTML标签.属性(如<beautiful girl="cf"></beautiful >)附加行为.Angular将这些附加行为称为directives. HTML有很多专门格式化静

AngularJS入门教程之控制器详解_AngularJS

AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据.  AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建. AngularJS 实例 <!DOCTYPE html> <html> <head>