Angular.js自动化测试之protractor详解


Posted in Javascript onJuly 07, 2017

前戏

  • 面向模型编程;
  • 测试驱动开发;
  • 先保障交互逻辑,再调整细节。---by 雪狼。

为什么要自动化测试?

     1,提高产出质量。

     2,减少重构时的痛。反正我最近重构多了,痛苦经历多了。

     3,便于新人接手。

angular自动化测试主要分:端到端测试和单元测试,很明显两者都要熟练掌握。

端到端测试是从用户的角度出发,认为整个系统是个黑盒,只会有UI暴露给用户,主要是模仿人工操作测试。

单元测试认为整个系统是白盒,可以用来测试服务,控制器,过滤器还有基础函数等。

端到端测试使用protractor,今天就扯这个。

为什么使用Protractor,也就是说Protractor有什么好处,有没有替代品?

     1,不需要基于id,css选择器,xpath等查询元素,你可以基于绑定,模型,迭代器等等进行测试。

     2,避免回调地狱。对比下面的代码就知道了。

//没有protractor
driver.getTitle().then(function(title){
 expect(title).toBe('Baidu');
});

//使用protractor
expect(browser.getTitle()).toEqual('Baidu');

替代品:capybara-angular等。

正文

前戏做完了,开始办正事吧。

第一步当然是配置Protractor,别人写好了,我就不累赘了,送上传送门:

第二步,掌握最简单的测试(高手可以绕过)

describe('hello world', function() {
 it('标题是hello world', function() {
  browser.get('测试地址自己搞一个咯');
  expect(browser.getTitle()).toEqual('hello world');
 });
});

说白了就是希望指定的链接的标题是"hello world" 

第三步,了解下大体编写流程。

Angular.js自动化测试之protractor详解

首先我们必须跳转到指定的页面,跳转页面有两种方法。

1,browser.get,跳转到指定的页面,还会重新刷新整个页面。

2,browser.setLocation,更确切的说,是跳转路由,修改#后面部分。

“等待某个元素出现”而不是“等待页面加载完毕”,如果页面加载完毕之后,马上去获取某个元素,很可能改元素不存在,然后直接报错退出。

点击某个按钮之后,弹窗,弹窗有渐进动画,具体弹窗内的元素什么时候出现不确定,那么必须“等待某个元素出现”。怎么实现?

//等待ng-model="password"的出现,最多等待20秒
browser.wait(function(){
 return browser.isElementPresent(by.model("password"));
},20000);

封装页面对象,英文叫PageObject,我也不知道怎么翻译,说白了就是封装组件或者页面的选择器。

为什么要有这一步?

先看一段代码:

describe('angularjs homepage', function() {
 it('should greet the named user', function() {
 browser.get('http://www.angularjs.org');
 element(by.model('yourName')).sendKeys('Julie');
 var greeting = element(by.binding('yourName'));
 expect(greeting.getText()).toEqual('Hello Julie!');
});

describe('todo list', function() {
 var todoList;
 beforeEach(function() {
 browser.get('http://www.angularjs.org');
 todoList = element.all(by.repeater('todo in todos'));
});

it('should list todos', function() {
 expect(todoList.count()).toEqual(2);
 expect(todoList.get(1).getText()).toEqual('build an angular app');
});

it('should add a todo', function() {
 var addTodo = element(by.model('todoText'));
 var addButton = element(by.css('[value="add"]'));

 addTodo.sendKeys('write a protractor test');
 addButton.click();

 expect(todoList.count()).toEqual(3);
 expect(todoList.get(2).getText()).toEqual('write a protractor test');
});

这是没封装的情况。

1,语义化很差,根本很难看明白在做神马。

2,重复代码多。browser.get('http://www.angularjs.org');就不止出现了一次。

3,耦合严重。如果标签结构改动,代码很多地方都要改。

4,难以维护,随着项目的增长和时间的推移,没有人会乐意在这上面添加其它测试功能。

问题已经暴露出来了,怎么封装?

封装之前,建议过一遍官方的教程和API接口,常用的不多,难度不大。传送门。

举个栗子,很简单的。现在有个滚动条。示意图有点丑,别笑。

Angular.js自动化测试之protractor详解

封装出来应该如下,这样即使滚动条的代码结构改了什么的,只要改下面的代码,而具体测试逻辑不用动。

function ScrollBarSelector(model){
 Object.defineProperty(this,"target",{
  get:function(){
   return typeof model == "string" ? element(by.model(model)) : model;
  }
 })
 Object.defineProperty(this,"pre",{
  get:function(){
   return this.target.$(".pre");
  }
 })

 Object.defineProperty(this,"next",{
  get:function(){
   return this.target.$(".next");
  }
 })

 Object.defineProperty(this,"scrollButton",{
  get:function(){
   return this.target.$(".scrollButton");
  }
 })
 Object.defineProperty(this,"value",{
  get:function(){
   return this.target.$("input").getAttribute("value");
 } })
}

测试逻辑,基本上就是,

点击某个按钮:scrollBar.next.click()

希望某个输入框的内容为:expect(scrollBar.value).toBe("xx");

最后,还是附上登录的测试和路由跳转,google上面很多人都在问。很多人问的问题是,登录完了,跳转页面,怎么知道页面跳转了。

spec.js

!function(){
 require(".LoginAction.js");
 require(".LogoutAction.js");
 require(".ScrollbarAction.js");
 
 describe("自动登录",function(){
  new LoginAction().execute("GetLiShu","123456");
 })


 describe('testScrollbar', function () {
  new ScrollbarAction().execute();
 });

 describe("退出登录",function(){
  new LogoutAction().execute();
 });
}();

LoginAction.js

!function(){

 function LoginAction(){

 }
 var prop = LoginAction.prototype;
 prop.execute = function(userName,password){
  beforeEach(function () {
   //先跳转到登录页面
   browser.get("登录页面");
   //等待输入框出来
   browser.wait(function(){
    return browser.isElementPresent(by.model("username"));
   },20000);
  })
  
  //输入账号密码然后点击登录
  it('自动登录', function () {
   element(by.model("username")).sendKeys(userName);
   element(by.model("password")).sendKeys(password);
   element(by.css(".login-input-btn")).click();
  });
 }
 module.exports = LoginAction;
}();

ScrollbarAction.js

!function(){
 beforeEach(function () {
  browser.setLocation("/app/common/stepper");
 })
 it('测试滚动条', function () {
  var scrollbar = new ScrollbarSelector("vm.scroll");
  
  //等待滚动条出来,最多等待20秒,滚动条出来了,马上处理测试代码
  browser.wait(function(){
   return browser.isElementPresent(numberDefault.mius);
  },20000);

  //这里省略很多行测试代码
 });
}();

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
vue.js全局API之nextTick全面解析
Jul 07 #Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 #Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 #Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 #Javascript
详谈js模块化规范
Jul 07 #Javascript
使用JavaScript实现alert的实例代码
Jul 06 #Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JavaScript 事件系统
2010/07/22 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python subprocess模块详细解读
2018/01/29 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Python 在局部变量域中执行代码
2020/08/07 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
九年级历史教学反思
2014/01/27 职场文书
校运会入场式解说词
2014/02/10 职场文书
端午节活动策划方案
2014/03/09 职场文书
机关单位动员会主持词
2014/03/20 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
小学教育见习报告
2014/10/31 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis