angular自动化测试--protractor

lsekfe

为什么要自动化测试？

1，提高产出质量。

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

3，便于新人接手。

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

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

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

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

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

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

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

1. //没有protractor
   
2. driver.getTitle().then(function(title){
   
3.     expect(title).toBe('Baidu');
   
4. });
   
5. 
   
6. //使用protractor
   
7. expect(browser.getTitle()).toEqual('Baidu');

复制代码

替代品:capybara-angular等。

正事

前戏做完了，开始办正事吧。

第一步当然是配置Protractor，别人写好了，我就不累赘了，送上传送门：

[url=http://www.cnblogs.com/sallyzhang/p/4980729.htmlhttp://sentsin.com/web/658.html]配置[/url]

第二步，掌握最简单的测试（高手可以绕过）

1. describe('hello world', function() {
   
2.     it('标题是hello world', function() {
   
3.         browser.get('测试地址自己搞一个咯');
   
4.         expect(browser.getTitle()).toEqual('hello world');
   
5.     });
   
6. });

复制代码

说白了就是希望指定的链接的标题是"hello world"
第三步，了解下大体编写流程。

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

1，browser.get，跳转到指定的页面，还会重新刷新整个页面。

2，browser.setLocation，更确切的说，是跳转路由,修改#后面部分。

“等待某个元素出现”而不是“等待页面加载完毕”，如果页面加载完毕之后，马上去获取某个元素，很可能改元素不存在，然后直接报错退出。

点击某个按钮之后，弹窗，弹窗有渐进动画，具体弹窗内的元素什么时候出现不确定，那么必须“等待某个元素出现”。怎么实现？

1. /等待ng-model="password"的出现，最多等待20秒
   
2. browser.wait(function(){
   
3.     return browser.isElementPresent(by.model("password"));
   
4. },20000);

复制代码

封装页面对象，英文叫PageObject,我也不知道怎么翻译，说白了就是封装组件或者页面的选择器。

为什么要有这一步？

先看一段代码：

1. describe('angularjs homepage', function() {
   
2.   it('should greet the named user', function() {
   
3.   browser.get('http://www.angularjs.org');
   
4.   element(by.model('yourName')).sendKeys('Julie');
   
5.   var greeting = element(by.binding('yourName'));
   
6.   expect(greeting.getText()).toEqual('Hello Julie!');
   
7. });
   
8. 
   
9. describe('todo list', function() {
   
10.   var todoList;
    
11.   beforeEach(function() {
    
12.   browser.get('http://www.angularjs.org');
    
13.   todoList = element.all(by.repeater('todo in todos'));
    
14. });
    
15. 
    
16. it('should list todos', function() {
    
17.   expect(todoList.count()).toEqual(2);
    
18.   expect(todoList.get(1).getText()).toEqual('build an angular app');
    
19. });
    
20. 
    
21. it('should add a todo', function() {
    
22.   var addTodo = element(by.model('todoText'));
    
23.   var addButton = element(by.css('[value="add"]'));
    
24. 
    
25.   addTodo.sendKeys('write a protractor test');
    
26.   addButton.click();
    
27. 
    
28.   expect(todoList.count()).toEqual(3);
    
29.   expect(todoList.get(2).getText()).toEqual('write a protractor test');
    
30. });

复制代码

这是没封装的情况。

1，语义化很差，根本很难看明白在做神马。

2，重复代码多。browser.get('http://www.angularjs.org');就不止出现了一次。

3，耦合严重。如果标签结构改动，代码很多地方都要改。

4，难以维护，随着项目的增长和时间的推移，没有人会乐意在这上面添加其它测试功能。

问题已经暴露出来了，怎么封装？

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

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

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

1. function ScrollBarSelector(model){
   
2.     Object.defineProperty(this,"target",{
   
3.         get:function(){
   
4.             return typeof model == "string" ? element(by.model(model)) : model;
   
5.         }
   
6.     })
   
7.     Object.defineProperty(this,"pre",{
   
8.         get:function(){
   
9.             return this.target.$(".pre");
   
10.         }
    
11.     })
    
12. 
    
13.     Object.defineProperty(this,"next",{
    
14.         get:function(){
    
15.             return this.target.$(".next");
    
16.         }
    
17.     })
    
18. 
    
19.     Object.defineProperty(this,"scrollButton",{
    
20.         get:function(){
    
21.             return this.target.$(".scrollButton");
    
22.         }
    
23.     })
    
24.     Object.defineProperty(this,"value",{
    
25.         get:function(){
    
26.             return this.target.$("input").getAttribute("value");
    
27. } })
    
28. }

复制代码

测试逻辑，基本上就是，

点击某个按钮：scrollBar.next.click()

希望某个输入框的内容为：expect(scrollBar.value).toBe("xx");

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

spec.js

1. !function(){
   
2.     require(".LoginAction.js");
   
3.     require(".LogoutAction.js");
   
4.     require(".ScrollbarAction.js");
   
5.    
   
6.     describe("自动登录",function(){
   
7.         new LoginAction().execute("GetLiShu","123456");
   
8.     })
   
9. 
   
10. 
    
11.     describe('testScrollbar', function () {
    
12.         new ScrollbarAction().execute();
    
13.     });
    
14. 
    
15.     describe("退出登录",function(){
    
16.         new LogoutAction().execute();
    
17.     });
    
18. }();

复制代码

LoginAction.js

1. !function(){
   
2. 
   
3.     function LoginAction(){
   
4. 
   
5.     }
   
6.     var prop = LoginAction.prototype;
   
7.     prop.execute = function(userName,password){
   
8.         beforeEach(function () {
   
9.             //先跳转到登录页面
   
10.             browser.get("登录页面");
    
11.             //等待输入框出来
    
12.             browser.wait(function(){
    
13.                 return browser.isElementPresent(by.model("username"));
    
14.             },20000);
    
15.         })
    
16.         
    
17.         //输入账号密码然后点击登录
    
18.         it('自动登录', function () {
    
19.             element(by.model("username")).sendKeys(userName);
    
20.             element(by.model("password")).sendKeys(password);
    
21.             element(by.css(".login-input-btn")).click();
    
22.         });
    
23.     }
    
24.     module.exports = LoginAction;
    
25. }();

复制代码

ScrollbarAction.js

1. !function(){
   
2.     beforeEach(function () {
   
3.         browser.setLocation("/app/common/stepper");
   
4.     })
   
5.     it('测试滚动条', function () {
   
6.         var scrollbar = new ScrollbarSelector("vm.scroll");
   
7.         
   
8.         //等待滚动条出来，最多等待20秒，滚动条出来了，马上处理测试代码
   
9.         browser.wait(function(){
   
10.             return browser.isElementPresent(numberDefault.mius);
    
11.         },20000);
    
12. 
    
13.         //这里省略很多行测试代码
    
14.     });
    
15. }();

复制代码

努力把自己打造成一本WEB百科全书

文章出自：博客园

痴迷海军

楼主，页面跳转好像要使用窗口句柄，请问怎么写呀？

Miss_love

支持分享