木的树 阅读(173) 评论(0)

  一、robot简介

  robot是dojo框架中用来进行前端自动化测试的工具,doh主要目的在于单元测试,而robot可以用来模仿用户操作来测试UI。总所周知,Selenium也是一款比较流行的前端自动化测试工具,与Selenium相比robot的优点在于robot触发的浏览器事件是真正的用户操作事件,而Selenium中的事件属于“合成事件”。打个比方,用户在一个textbox元素上触发了mousedown事件,但是在触发mousedown事件之前,肯定会触发mouseover等事件。如果使用Selenium的工具的“合成事件”则不会触发mouseover等事件。对于使用dojo框架的开发者来说,robot更有利于同dijit交互,包括自定义dijit;当然最重要的一点是,在研究selenium的过程中,我发现Selenium有严重的浏览器兼容性问题!于是果断放弃。

  言归正传,下面来具体介绍robot。robot主要有三部分组成:

  doh/robot,这里面包含的是robot的核心内容,与dojo框架没有耦合关系,可以单独拿出去作为一个自动化测试工具。

1 require(["doh/robot"], function(doh){
2     ...
3 });

  dojo/robot,该模块使用dojo核心技术,支持doh/robot的全部方法,主要在doh/robot的基础上增加了两个方法:mouseMoveAt和scrollIntoView。

1 require(["dojo/robot"], function(doh){
2     ...
3 });

  dojox/robot,该模块在dojo/robot的基础上增加了两个重要方法:initRobot和waitForPageLoad。为什么说他们重要,因为他们可以再一个测试案例文件中控制其他的测试文件,后文将详细。

1 require(["dojox/robot"], function(doh){
2     ...
3 });

  

  二、基本步骤

  doh/robot测试主要分为以下四步:

  1、实例化一个doh.Deferred对象

  2、执行交互命令

  3、设置一个超时函数来验证交互结果

  4、在runTest中返回deferred对象

  这个事例中页面上一个文本输入框,包含hi两个字符,然后模仿用户输入“ again”动作。示例,robot实际上是一个applet第一次访问的话会提示安装。

 1 require(["doh/runner", "doh/robot"], function(doh, robot){
 2     doh.register("doh/robot",
 3     {
 4         name: "dojorobot1",
 5         timeout: 6900,
 6         setUp: function(){
 7             document.getElementById('textbox').value="hi";
 8         },
 9         runTest: function(){
10             var d = new doh.Deferred();
11             robot.mouseMove(30, 30, 500);
12             robot.mouseClick({left:true}, 500);
13             robot.typeKeys(" again", 500, 2500);
14             robot.sequence(d.getTestCallback(function(){
15                 doh.is("hi again", document.getElementById('textbox').value);
16             }), 900);
17             return d;
18         }
19     });
20     doh.run();
21 });
    <form>
    <input type="text" value="hi" id="textbox" style="position:absolute; left:0px; top:20px; font-family:system;"></input>
    </form>

  这里要说以下robot.sequence和d.getTestCallback这两个函数,sequence是robot中的一种同步方式书写的setTimeout,下文delay中会讲到这类方法的优势。doh.Deferred是doh中对dojo/Deferred的扩展,加入了许多方法,getTestCallback就是其中之一,该函数作用就在于交互命令执行完成后验证交互结果,并将结果告知测试框架从而决定显示绿条还是红条,通常一个测试案例中只有一处调用该方法。一下是该函数的源码:

 1 getTestCallback: function(cb, scope){
 2         var _this = this;
 3         return function(){// 该函数返回一个闭包给sequence函数,从而在一定时间后调用该闭包
 4             try{// 执行验证函数,监控结果,并将结果通知测试框架
 5                 cb.apply(scope||doh.global||_this, arguments);
 6             }catch(e){
 7                 _this.reject(e);// 红条
 8                 return;
 9             }
10             _this.resolve(true);// 绿条
11         };
12     },

  

  三、API介绍

  1、基本参数

  下面以doh/Robot中typeKeys为例介绍一下robot API的基本参数,具体提供了哪些API可以在这里查看:API

 1 typeKeys: function(/*String||Number*/ chars, /*Integer, optional*/ delay, /*Integer, optional*/ duration){
 2       // summary:
 3       //            Types a string of characters in order, or types a dojo.keys.* constant.
 4       //
 5       // description:
 6       //           Types a string of characters in order, or types a dojo.keys.* constant.
 7       //           Example: robot.typeKeys("dijit.ed", 500);
 8       //
 9       // chars:
10       //            String of characters to type, or a dojo.keys.* constant
11       //
12       // delay:
13       //            Delay, in milliseconds, to wait before firing.
14       //            The delay is a delta with respect to the previous automation call.
15       //            For example, the following code ends after 600ms:
16       //                  robot.mouseClick({left:true}, 100) // first call; wait 100ms
17       //                  robot.typeKeys("dij", 500) // 500ms AFTER previous call; 600ms in all
18       //
19       // duration:
20       //            Time, in milliseconds, to spend pressing all of the keys.
21       //
22   }

  delay,顾名思义目的在于延迟,在webAPP中经常会有动画效果,等待动画结束后在执行click等事件,所以每一个API中与UI交互的函数都会提供这个方法。该方法内部使用setTimeout方法实现,既然这样,为什么不让用户直接使用setTimeout方法?原因在于dojo可以为我们自动调整一系列动作的执行顺序及间隔。举个例子,如果使用setTimeout,动作f1需要在300ms后执行,动作f2需要在f1之后100ms执行那就需要设置f2的timeout时间为400ms,这时候f1之前要加一个动作f3在f1之前200ms执行,

现在我们就需要挨个该f1跟f2的时间参数,如果f1之后有100个动作要执行。。。。God bless you。使用robot API提供的函数,我们只需要设置每个动作之间的时间间隔即可。

1     setTimeout(f1, 300);
2     setTimeout(f2, 400);
3     =>>
4     setTimeout(f3, 300);
5     setTimeout(f1, 500);
6     setTimeout(f2, 600);    
1     var mask = query("div.ovwHighlight")[0];
2     robot.mouseMoveAt(mask, 200, 200);
3     robot.mousePress({left: true}, 100);
4     robot.mouseMoveAt(mask, 200, 200, 10, 10);
5     robot.mouseRelease({left: true}, 100);        

  duration便是的是执行这个动作所需要的时间,以typeKeys为例,假设duration设置为1800ms,char为“abc”,则输入a、b、c这三个字符各占600ms。

  2、mouseMoveAt

  dojo/Robot中提供了一个mouseMoveAt函数,在上文的示例中,我们可以看到鼠标移动函数用的是mouseMove函数,该函数与mouseMoveto函数都是通过相对于当前浏览器document的x、y坐标来定位元素,而mouseMoveAt则是通过选择符或者node节点来定位元素。

 1 mouseMoveAt : function(/*String||DOMNode||Function*/ node, /*Integer, optional*/ delay, /*Integer, optional*/ duration, /*Number, optional*/ offsetX, /*Number, optional*/ offsetY){
 2     // summary:
 3     //            Moves the mouse over the specified node at the specified relative x,y offset.
 4     //
 5     // description:
 6     //           Moves the mouse over the specified node at the specified relative x,y offset.
 7     //           You should manually scroll off-screen nodes into view; use dijit.robot for automatic scrolling support.
 8     //           If you do not specify an offset, mouseMove will default to move to the middle of the node.
 9     //           Example: to move the mouse over a ComboBox's down arrow node, call doh.mouseMoveAt(dijit.byId('setvaluetest').downArrowNode);
10     //
11     // node:
12     //            The id of the node, or the node itself, to move the mouse to.
13     //            If you pass an id or a function that returns a node, the node will not be evaluated until the movement executes.
14     //            This is useful if you need to move the mouse to an node that is not yet present.
15     //
16     // delay:
17     //            Delay, in milliseconds, to wait before firing.
18     //            The delay is a delta with respect to the previous automation call.
19     //            For example, the following code ends after 600ms:
20     //                  doh.mouseClick({left:true}, 100) // first call; wait 100ms
21     //                  doh.typeKeys("dij", 500) // 500ms AFTER previous call; 600ms in all
22     //
23     // duration:
24     //            Approximate time Robot will spend moving the mouse.
25     //            The default is 100ms.
26     //
27     // offsetX:
28     //            x offset relative to the node, in pixels, to move the mouse. The default is half the node's width.
29     //
30     // offsetY:
31     //            y offset relative to the node, in pixels, to move the mouse. The default is half the node's height.
32     //

  所以上文中的实例可以这样写:

 1 require(["doh/runner", "dojo/robot"], function(doh, robot){
 2     doh.register("doh/robot",
 3     {
 4         name: "dojorobot1",
 5         timeout: 6900,
 6         setUp: function(){
 7             document.getElementById('textbox').value="hi";
 8         },
 9         runTest: function(){
10             var d = new doh.Deferred();
11             robot.mouseMoveAt(document.getElementById('textbox'), 500);
12             robot.mouseClick({left:true}, 500);
13             robot.typeKeys(" again", 500, 2500);
14             robot.sequence(d.getTestCallback(function(){
15                 doh.is("hi again", document.getElementById('textbox').value);
16             }), 900);
17             return d;
18         }
19     });
20     doh.run();
21 });

  3、initRobot

  对于WebAPP来说,都需要将测试代码与主程序代码分离。但测试文件执行时需要与主程序中的UI交互,这时轮到initRobot闪亮登场了。该函数位于dojox/Robot中,所以我们需要引入dojox/Robot。initRobot主要的作用就在于将当前测试文件的执行环境转变为主程序环境,这时robot.doc、robot.window代表的则是主程序中的document和window。比如说你想使用document.getElementById(‘login')来获取主程序中的login元素,那么你需要这样来写robot.doc.getElementById('login'),官方文档中提到使用dojo模块中的方法的执行环境都是主程序环境,遗憾的是我在实际使用中发现并非如此,有的模块方法的确是主程序环境比如query,而有的则并非主程序环境比如registry。

  具体示例可以访问这里,查看源码你会发现这里面并没有robot的测试代码,该文件位于dojo-release-1.9.1-src\dijit\tests目录下,robot测试代码位于dojo-release-1.9.1-src\dijit\tests\robot目录下。

 

参考文档:https://dojotoolkit.org/reference-guide/1.9/util/dohrobot.html#doh-robot

下一篇我们将具体看一个完整robot示例,以及将robot与selenium联合使用进而将他与CI工具集成。同时我们还会讨论robot异步函数的美中不足。