前戏

面向模型编程;

测试驱动开发;

先保障交互逻辑,再调整细节。---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); //这里省略很多行测试代码
});
}();

http://www.cnblogs.com/geilishu/p/5801175.html

自动化测试--protractor的更多相关文章

  1. angular自动化测试--protractor

    前戏 面向模型编程: 测试驱动开发: 先保障交互逻辑,再调整细节.---by 雪狼. 为什么要自动化测试? 1,提高产出质量. 2,减少重构时的痛.反正我最近重构多了,痛苦经历多了. 3,便于新人接手 ...

  2. 如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor

    要想快速完成一个项目, 自动化是很关键很有用的一块. 自动化测试比人工测试快很多. 特别是在回归测试中. 实践证明, 虽然投入了时间在写自动化测试代码上, 但是在回归测试中节省了大量的时间,同时及时发 ...

  3. 工欲善其事,必先利其器 软件工具开发关键词 protractor自动化测试工具 RegexBuddy正则 CodeSmith,LightSwitch:代码生成 CheatEngine:玩游戏修改内存值必备神器 ApkIDE:Android反编译工具 Reflector:反编译dll动态链接库

    工欲善其事,必先利其器 本文版权归翟士丹(Stan Zhai)和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利. 原文地址:http ...

  4. 在Grunt task中集成Protractor

    Protractor是专为AngularJS应用程序编写的UI自动化测试框架.前端构建有很多构建工具,比如Grunt.Gulp等.一般我们会把这些构建工具作为集成集成的脚本执行工具.所以如果把Prot ...

  5. 使用Nodejs+Protractor搭建测试环境

    Protractor是一个end-to-end的测试框架,从网络上得到的答案是Protractor是作为Angular JS应用程序的测试框架.它的构建基于Selenium WebDriver之上,且 ...

  6. 如何用ABP框架快速完成项目(8) - 用ABP一个人快速完成项目(4) - 能自动化就不要手动 - 使用自动化测试(BDD/TDD)

    做为一个程序员, 深深知道计算机自动化的速度是比人手动的速度快的, 所以”快速”完成项目的一个重要武器就是: 能自动化就不要手动.   BDD/TDD有很多优势, 其中之一就是自动化, 我们这节文章先 ...

  7. E2E test protractor selenium

    E2E Test和传统的Unit Test不同的是:(1)不涉及代码层面,不会去测试某段代码是否正确或者某行代码是否被覆盖(2)它是从用户的角度出发,用来测试一个应用的流程是否符合预期. 一 Sele ...

  8. 端到端测试,protractor测试的教程

    之前我们介绍了如何测试某段js代码的逻辑是否正确,考虑的情况是否全面,但是在ui界面上我们每次做好的功能都要自己去填写内容,点击按钮等,那么是否存在自动化测试的工具呢,让这些事情可以自动完成,答案是肯 ...

  9. 2019最好用的自动化测试工具Top 10,果断收藏!

    经常有人在公众号留言或是后台问我,做自动化测试用哪个工具好,或是学哪门编程语言好呢? 这个时候总是无奈的说: 你应该学习Python 或是Java. 你应该掌握Selenium. 又或者你需要学会jm ...

随机推荐

  1. PS图层混合算法之一(不透明度,正片叠底,颜色加深,颜色减淡)

    下列公式中,A代表了上面图层像素的色彩值(A=像素值/255),B代表下面图层像素的色彩值(B=像素值/255),C代表了混合像素的色彩值(真实的结果像素值应该为255*C).该公式也应用于层蒙板. ...

  2. Linux - 延伸正则表达式

    RE 字符 意义与范例 + 意义:重复『一个或一个以上』的前一个 RE 字符 范例:搜寻 (god) (good) (goood)... 等等的字串. 那个 o+ 代表『一个以上的 o 』所以,底下的 ...

  3. Gathering Initial Troubleshooting Information for Analysis of ORA-4031 Errors on the Shared Pool

    In this Document   Purpose   Troubleshooting Steps   References APPLIES TO: Oracle Database - Enterp ...

  4. 【省带宽、压成本专题】深入解析 H.265 编码模式,带你了解 Apple 全面推进 H.265 的原因

    过去几年,又拍云一直在点播.直播等视频应用方面潜心钻研,取得了不俗的成果.我们结合点播.直播.短视频等业务中的用户场景,推出了"省带宽.压成本"系列文章,从编码技术.网络架构等角度 ...

  5. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  6. python snownlp情感分析简易demo

    SnowNLP是国人开发的python类库,可以方便的处理中文文本内容,是受到了TextBlob的启发而写的,由于现在大部分的自然语言处理库基本都是针对英文的,于是写了一个方便处理中文的类库,并且和T ...

  7. 初步认识thymeleaf:简单表达式和标签(二)

    1.th:each:循环,<tr th:each="user,userStat:${users}">,userStat是状态变量,有 index,count,size, ...

  8. Linux下DB2数据库安装教程

    最近因为工作需要在学习DB2数据库,本教程讲解DB2数据库在inux下的安装步骤. 安装前请查看 DB2版本和许可证 说明来增加了解,先弄明白改安装什么版本,这里我用的是最新的Express-C版本, ...

  9. java并发容器(Map、List、BlockingQueue)

    转发: 大海巨浪 Java库本身就有多种线程安全的容器和同步工具,其中同步容器包括两部分:一个是Vector和Hashtable.另外还有JDK1.2中加入的同步包装类,这些类都是由Collectio ...

  10. 8.2 Query 语句优化基本思路和原则

    在分析如何优化MySQL Query 之前,我们需要先了解一下Query 语句优化的基本思路和原则.一般来说,Query 语句的优化思路和原则主要提现在以下几个方面: 1. 优化更需要优化的Query ...