前戏

面向模型的程序设计；测试驱动开发；先保证交互逻辑，再调整细节。雪狼。为什么要自动化测试？

1、提高产出质量。

2.减少重建过程中的痛苦。反正我最近重建的比较多，经历的痛苦也比较多。

3、便于新人接手。

角度自动化测试主要分为端到端测试和单元测试。显然，两者都要熟练掌握。

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

单元测试认为整个系统是一个白盒，可以用来测试服务、控制器、过滤器和基本功能。

端到端测试使用量角器，所以我们今天就来讲讲。

为什么要用质子，也就是说质子有什么优点，有替代品吗？

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

2.避免打回地狱。对比以下代码就知道了。

//没有protracterdriver.gettitle()。然后(函数(标题){expect(标题))。tobe('百度')；});//使用prototype expect(browser . gettitle())。toequal('百度')；替代：水豚-角等。

主体

前戏结束后，让我们言归正传。

当然，第一步是配置质子。别人写的时候，我也不会累赘，送到传送门：

部署

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

description(' hello world '，function(){ it(' title is hello world '，function () {browser.get('为测试地址制作一个')；expect(browser.getTitle())。toeqal(' hello world ')；});});说白了，你要指定的链接标题是‘hello world’

第三步是了解一般的写作过程。

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

1、browser.get，跳转到指定页面，再次刷新整个页面。

2、browser.setLocation，更准确的说是跳转路线，并修改#后的部分。

“等待元素出现”，而不是“等待页面加载”。如果您在页面加载后立即获得一个元素，很可能该元素不存在，然后报告错误并直接退出。

点按按钮后，弹出窗口会有渐进式动画。当特定弹出窗口中的元素出现不确定时，您必须“等待一个元素出现”。如何实现？

//等待ng-model='password '出现，最多等待browser . wait(function(){ return browser . iselementpresent(by . model(' password ')))20秒；},20000);封装PageObject，英文称为PageObject。我不知道怎么翻译。说白了，就是封装组件或者页面选择器。

为什么会有这样一个步骤？

先看一段代码：

description(' angular js home page '，function() { it('应该问候被命名的用户'，function(){ browser . get(' http://www . angular js . org ')；元素(by.model('yourName ')。发送密钥(“朱莉”)；var问候语=元素(by . binding(' your name '))；expect(hello . gettext())。(你好，朱莉);});description(' todo list '，function(){ var todoList；before EACH(function(){ browser . get(' http://www . anglarjs . org ')；todoList=element . all(by . repeater(' todos中的todo '))；});它('应该列出todos '，function(){ expect(todolit . count())。toeqal(2)；expect(todoList.get(1))。getText())。toEqual('构建一个有角度的应用')；});it('应该添加一个todo '，function(){ var addTodo=element(by . model(' todoText ')))；var addButton=element(by . CSS('[value=' add ']'))；addTodo.sendKeys('编写量角器测试')；addbutton . click()；expect(todoList.count())。toeqal(3)；expect(todoList.get(2))。getText())。toEqual('写一个量角器测试')；});这是没有封装的情况。

1、语意很差，很难理解自己在做什么。

2.有许多重复的代码。browser . get(' http://www . anglarjs . org ')；它出现了不止一次。

3.耦合严重。如果标签结构改变，代码在很多地方都会改变。

4.很难维持。随着项目的增长和时间的推移，没有人愿意在其中添加其他测试功能。

问题已经暴露，如何包装？

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

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

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

函数ScrollBarSelector(模型){对象。definepreproperty(这个，‘target’，{ get: function(){返回的模型类型==' string '？元素(by.model(model)) :模型；} })对象。define property(this，' ' pre '，{ get: function(){ return this。目标。$(')。pre’)；} })对象。define property(this，' next '，{ get: function(){ return this。目标。$()。下一个');} })对象。definepreproperty(this，' scrollButton '，{ get: function(){ return this。目标。$(')。滚动按钮’)；} })对象。define property(this，' value '，{ get: function(){ return this。目标。$(“输入”).getAttribute(' value ')；} })}测试逻辑，基本上就是，

点击某个按钮：滚动条。下一步。单击()

希望某个输入框的内容为：期望(滚动条。值).toBe(' xx ')；

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

spec.js

！function(){ require('。逻辑。js’)；要求('。logoutaction。js’)；需要(' .scrollbaraction。js’)；描述('自动登录，function(){ new LoginAction().执行('格力书'，' 123456 ')；})描述(“testScrollbar”，函数(){ new ScrollbarAction().execute()；});描述('退出登录，function(){ new LogoutAction().execute()；});}();LoginAction.js

！function(){ function LoginAction(){ } var prop=LoginAction。原型；prop.execute=function(userName，password){在每个(function(){//先跳转到登录页面browser.get('登录页面');//等待输入框出来浏览器。wait(function(){返回浏览器。iselementpresent(by。型号('用户名'))；},20000);}) //输入账号密码然后点击登录它('自动登录，function(){ element(by。型号(“用户名”).发送密钥（用户名);元素(by.model('密码').发送密钥（密码);元素(by.css(' .登录-输入-BTN ' .单击();});} module . exports=LoginAction }()；ScrollbarAction.js

！function(){在每个(function(){ browser }之前。setlocation('/app/common/stepper ')；})它('测试滚动条，function(){ var滚动条=新滚动条选择器(' VM。卷轴’)；//等待滚动条出来，最多等待20秒，滚动条出来了，马上处理测试代码浏览器。wait(function(){返回浏览器。iselementpresent(数字默认值。mius)；},20000);//这里省略很多行测试代码});}();总结

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