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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 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
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
Python while 循环使用的简单实例
2016/06/08 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Python文件操作基础流程解析
2020/03/19 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
软件售后服务承诺书
2014/05/21 职场文书
工作检讨书500字
2014/10/19 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
2019年亲子运动会口号
2019/10/11 职场文书