angular自动化测试--protractor
前戏
面向模型编程;
测试驱动开发;
先保障交互逻辑,再调整细节。---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"
第三步,了解下大体编写流程。
首先我们必须跳转到指定的页面,跳转页面有两种方法。
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接口,常用的不多,难度不大。传送门。
举个栗子,很简单的。现在有个滚动条。示意图有点丑,别笑。
封装出来应该如下,这样即使滚动条的代码结构改了什么的,只要改下面的代码,而具体测试逻辑不用动。
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); //这里省略很多行测试代码
});
}();
angular自动化测试--protractor的更多相关文章
- 自动化测试--protractor
前戏 面向模型编程: 测试驱动开发: 先保障交互逻辑,再调整细节.---by 雪狼. 为什么要自动化测试? 1,提高产出质量. 2,减少重构时的痛.反正我最近重构多了,痛苦经历多了. 3,便于新人接手 ...
- 如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor
要想快速完成一个项目, 自动化是很关键很有用的一块. 自动化测试比人工测试快很多. 特别是在回归测试中. 实践证明, 虽然投入了时间在写自动化测试代码上, 但是在回归测试中节省了大量的时间,同时及时发 ...
- 如何用ABP框架快速完成项目(8) - 用ABP一个人快速完成项目(4) - 能自动化就不要手动 - 使用自动化测试(BDD/TDD)
做为一个程序员, 深深知道计算机自动化的速度是比人手动的速度快的, 所以”快速”完成项目的一个重要武器就是: 能自动化就不要手动. BDD/TDD有很多优势, 其中之一就是自动化, 我们这节文章先 ...
- Protrator 官网和下载工具稍慢 , 但能使用. Angular CLI 内置 官方推荐 TS的 demo 不明显 , 而且依赖无法安装
npm uninstall -g protractor && cnpm install -g protractor && protractor --version 复 ...
- angular复习笔记3-组件
组件Component 组件是构成angular应用的核心,angular的有序运行依赖于组件的协同工作,组件之于angular应用就像是汽车和汽车零部件的意思. 概述 近几年的前端发展迅速,各种工程 ...
- 如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇)(1) - 目录
昨天发表了<如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor>后,大家十分热情,几个小时内就收到了不少问题,包括: 对于ui自动化测试这方 ...
- ESLint——从零学起
介绍 ESLint最初是由Nicholas C. Zakas于2013年6月创建的开源项目.它的目标是提供一个插件化的javascript代码检测工具.因此,ESLint就是一个语法规则和代码风格的检 ...
- 工欲善其事,必先利其器 软件工具开发关键词 protractor自动化测试工具 RegexBuddy正则 CodeSmith,LightSwitch:代码生成 CheatEngine:玩游戏修改内存值必备神器 ApkIDE:Android反编译工具 Reflector:反编译dll动态链接库
工欲善其事,必先利其器 本文版权归翟士丹(Stan Zhai)和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利. 原文地址:http ...
- Angular+Grunt+Bower+Karma+Protractor (Atom)
1. 配置bower 1.安装bower npm install -g bower 2.创建.bowerrc文件 { "directory": "src/bower&qu ...
随机推荐
- 远程登录Linux服务器修改ssh端口
公司有部分服务器root密码被禁用,有部分没有禁用,禁用root的服务器需要通过tomcat用户登陆系统,切换至root修改端口,没有禁用的直接修改root密码: #-*- coding:utf-8 ...
- Java泛型的应用——T extends Comparable<? super T>
在观察Java源码的时候,发现了这么一个写法T extends Comparable<? super T>.不禁纳闷为什么要这么写呢?有什么好处吗,extends和super在这里的作用着 ...
- java虚拟机学习-JVM调优总结-新一代的垃圾回收算法(11)
垃圾回收的瓶颈 传统分代垃圾回收方式,已经在一定程度上把垃圾回收给应用带来的负担降到了最小,把应用的吞吐量推到了一个极限.但是他无法解决的一个问题,就是Full GC所带来的应用暂停.在一些对实时性要 ...
- 客户端存储 API
介绍两个在客户端存储数据的 API localStorage与sessionStorage 两个都是window对象的属性,利用这两个属性,可以在客户端存储一些数据 相比cookie,这种存储方式的优 ...
- JSP/Servlet Web 学习笔记 DayTwo
JSP指令 a)page指令 定义JSP文件中的全局属性.一个JSP页面可以包含多个page指令.除了Import以外,其他page指令定义的属性/值只能出现一次. 其详细语法为: <%page ...
- 如何编写Spring-Boot自动配置
摘要 本文主要介绍如何把一个spring的项目(特别是一些公共工具类项目),基于spring boot的自动配置的思想封装起来,使其他Spring-Boot项目引入后能够进行快速配置. AutoCon ...
- HTML----网页基础和基本标签
网页分类: 1.静态网页:所有内容全写死,都写在源代码中,若修改必须修改源代码,后缀为.html或htm 2.动态网页:内容大部分来自于数据库,可以修改,后缀为.aspx(c#).jsp(java). ...
- mysql too many connections 问题
我的处理步骤: 第一步:首次确定你的服务可不可以重启,如果可以重启转第二步,如果不可以重启转第三步,这个主要考虑已经部署到客户现场或者正在使用中的数据库不能重启. 第二步:查找mysql的安装路径,这 ...
- 弹性盒模型 flex box
弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...
- JS之DOM那些事
DOM 是 Document Object Model(文档对象模型)的缩写.DOM分为核心DOM.XML DOM.HTML DOM,我们接触的主要是HTML DOM,HTML DOM 定义了所有 H ...