AngularJs  E2E Testing 详解


Posted in Javascript onSeptember 02, 2016

        当一个应用的复杂度、大小在增加时,使得依靠人工去测试新特性的可靠性、抓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之前或者之后运行,不管它是否通过。

AngularJs  E2E Testing 详解

除了上述元素外,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 的资料整理,后续继续增加相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
解决node.js安装包失败的几种方法
Sep 02 #Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 #Javascript
AngularJs Understanding the Controller Component
Sep 02 #Javascript
JS 拼凑字符串的简单实例
Sep 02 #Javascript
AngularJs Understanding the Model Component
Sep 02 #Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 #Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 #Javascript
You might like
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python模块的加载讲解
2019/01/15 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Django如何实现上传图片功能
2019/08/16 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python 字符串格式化的示例
2020/09/21 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
技能比赛获奖感言
2014/02/14 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
高中教师考核方案
2014/05/18 职场文书
职业规划实施方案
2014/06/10 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
Java 数组的使用
2022/05/11 Java/Android