前戏

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

为什么要自动化测试？

1，提高产出质量。

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

3，便于新人接手。

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

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

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

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

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

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

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

//没有protractordriver.getTitle().then(function(title){ expect(title).toBe('Baidu');});//使用protractorexpect(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://mon/stepper"); }) it('测试滚动条', function () { var scrollbar = new ScrollbarSelector("vm.scroll"); //等待滚动条出来，最多等待20秒，滚动条出来了，马上处理测试代码 browser.wait(function(){ return browser.isElementPresent(numberDefault.mius); },20000); //这里省略很多行测试代码 });}();

总结

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