利用Sahi脚本自动生成代码加速Web自动化测试开发

 本文是《使用Sahi测试Dojo应用》的延续。在《使用Sahi测试Dojo应用》中，我们谈到了ITCL架构（应用对象层，任务层以及测试用例层）。本文向大家介绍如何编写一个Sahi的脚本以自动生成应用对象层的代码从而简化和加速Web自动化测试用例的开发。

一.概述

之所以有可能开发一个Sahi脚本来生成应用对象层的代码，主要得益于以下几个方面：

1）面向对象设计模式的应用

Dojo本身将页面中的控件用面向对象的模式封装成不同的widget,而本测试框架用不同的Javascript的函数映射到不同的Dojo的widget。这样的一种设计模式，使我们有可能通过搜索页面中的Dojo widget以自动生成用来实例化页面控件的代码。

2）强大的Dojo query以及Sahi的基于上下文的API

在后面的代码详解中，大家可以看到我们是如何借助Dojo query以及Sahi的基于上下文的API来搜索页面中的Dojo widget的。并且，由于Sahi本身支持browser端的Javascript的脚本，因此在我们的代码中可以方便地将Dojo API和Sahi API混用。

3）Sahi的基础-Rhino

因为有了Rhino的支持，Sahi可以进行本地文件的读写，因此使我们能够将生成的结果以文件的形式保存下来。甚至，如果需要的话，我们可以实现基于文件的代码生成模版管理。（关于代码生成模版管理，本文所附带的示例代码没有包含该功能，如果读者感兴趣可以自行尝试）。

简单来说，代码生成Sahi脚本的工作过程如下：

1. 为每种Dojo widget定义一个Javascript函数。该函数的功能是为特定widget代码生成提供元数据。
2. 使用者在调用代码生成函数时，可以传入一个数组以指定要生成的widget的名称，比如按钮、输入域等。默认，代码将生成所有支持的widget类型。
3. 当代码生成函数被调用时，它使用Dojo query遍历DOM tree以搜索Dojo widget的最外层元素（通常是DIV并包含widgetid属性）。之后，将该元素交予具体的处理widget的函数生成声明代码。
4. 如何知道通过何种方式可以实例化找到的Dojo widget呢？在Dojo widget函数的公共“父类”中，定义了若干“猜测”函数，例如guessByName、guessById以及guessByLabel。如果需要的话，具体的widget函数可以定义自己的“猜测”函数，例如DojoButton函数就定义了自己的guessByText函数（因为这个函数不具备通用性）。“猜测”的入口是一个叫guess的函数，具体的widget函数可以传递给guess一个数组以指定“猜测”的优先顺序，例如，[this.guessById,this.guessByLabel]就表明先检查widget有没有id属性，如果有就生成通过id实例化widget的代码，如果没有的话，就继续尝试“猜测”label的方式。如果所有的“猜测”函数都失败，就在Sahi的log中打印出一条信息，告诉调用者，无法生成这个widget的实例化代码。
5. 最终，把所有生成好的代码语句拼接成一个字符串，保存到generated目录下的appobjscode.sah文件中。同时，这段代码也会打印在Sahi的log文件中。

二.如何运行代码

用来生成应用对象层代码的脚本位于压缩包的sahidojodemo/codegen目录中，有codegen.sah和main.sah两个Sahi脚本文件。codegen.sah定义了代码生成的核心逻辑而main.sah只是对其进行调用。我们使用的示例页面依旧是http://demos.dojotoolkit.org/demos/form/demo.html。读者只需在该页面上弹出Sahi控制器并运行main.sah脚本即可。下面是该脚本的运行效果图。

 

若要测试生成的代码是否工作，只需要把上图生成的代码粘贴到appobjs/ JobAppFormPage.sah中并运行run.sh。具体的操作步骤请参考《使用Sahi测试Dojo应用》的“如何运行示例代码”部分。

三.代码详解

下面对代码进行详细地解释。

1.函数概览

在codegen.sah中有如下一些函数（或者称做“类”）。

• WidgetMetaData:定义全局widget“元数据”的结构。它包含widget名称、搜索模式以及处理“类”的名称三个属性。
• AppObjsCodeGen：负责遍历页面搜索widget、调用相应的处理“类”生成代码并格式化代码。
• DojoWidget：负责代码生成的核心逻辑。定义公共的“猜测”函数。
• DojoTextbox：“继承”自DojoWidget。提供输入域widget的元数据。
• DojoSlider：“继承”自DojoWidget。提供滑块widget的元数据。
• DojoCombobox：“继承”自DojoWidget。提供下拉框widget的元数据。
• DojoButton：“继承”自DojoWidget。提供按钮widget的元数据。

2.元数据的定义

元数据的定义分为两部分。第一部分是一个metaData的数组，它用来声明所有支持的widget类型，数组元素是WidgetMetaData。第二部分就是映射到每种Dojo widget的Javascript函数，如DojoTextbox等，它们提供了特定widget的元数据。

以下是metaData数组的声明。

var metaData=[]
metaData.push(new WidgetMetaData("textbox","dijitValidationTextBox","DojoTextbox"))
metaData.push(new WidgetMetaData("slider","dijitSlider","DojoSlider"))
metaData.push(new WidgetMetaData("combobox","dijitComboBox","DojoCombobox"))
metaData.push(new WidgetMetaData("button","dijitButton","DojoButton"))

本示例代码中之定义四种widget。

DojoTextbox的定义如下。

function DojoTextbox(domNode){
    DojoWidget.call(this,domNode)

    this._getIdentifier=function(){
        var elem=_textbox("dijitReset dijitInputInner",_in(this.domNode));
        return this.guess(elem);
    }

    this._getClassName=function(){
        return "$DojoTextbox"
    }

    this._getSahiFuncName=function(){
        return "_textbox" 
    }
}

_getIdentifier函数返回对guess函数的调用。之所以要传入一个elem参数，是因为name属性有时不在Dojo widget的最外层元素上，而是在其内部某个元素上。例如对输入域widget来说，name属性就是在其内部的input(type="textbox")元素上。 这里，我们用了Sahi的_in函数以保证只在该widget内部进行元素搜索。_getIdentifier函数返回三种类型的值:“label=...”,“ =...”或者undefined。如果返回"label=..."，说明该widget可以用label的方式实例化，于是就会生成形如var $name=findByLabel("Name *",$DojoTextbox)的代码。如果返回值是“ =...”（这里的 由“猜测”函数指定。例如，guessById会返回“id=...”而guessByName返回“name=...”）,将生成形如var $name=new $DojoTextbox(_textbox("name"))的代码。其实，只要 不等于“label”,都将以这样的方式生成代码。最后，如果任何一种“猜测”函数都失败了，就会返回undefined。那么，就会在log里看到红色error信息“Failed to guess the method for...”。对于_getClassName和_getSahiFuncName两个函数，大家不难看出，它们分别返回对应的widget的“类”函数名称以及相应的用来生成非label方式代码的Sahi函数名称。

代码行DojoWidget.call(this,domNode)用来实现Javascript中的“继承”。

3.如何搜索/识别页面中的Dojo widget

因为每种Dojo widget的class属性包含的值不同，因此我们可以通过这一点来搜索并识别页面中的Dojo widget。例如，如果其class属性包含“dijitValidationTextBox”，认为它是一个Dojo输入域widget；如果其class属性包含“dijitComboBox”，认为它是一个Dojo 下拉框widget。

输入域widget（通过“dijitValidationTextBox”识别）

下拉框widget（通过“dijitComboBox”识别）

下面我们一起来看看_formContent函数。

    this._formContent=function(widgetNames){
        var statements=[];

        for(var i=0;i < widgetNames.length;i++){
            var widgetName=widgetNames[i]
            var widgetMetaData=this._findWidgetMetaData(widgetName)
            var searchPattern=widgetMetaData.searchPattern
            var handleClassName=widgetMetaData.handleClassName
            
            var nodes=dojo.query("[class~='"+searchPattern+"']")

            for(var j=0;j < nodes.length;j++){
                var node=nodes[j]
                if(!node.getAttribute("widgetid")){
                    continue
                }
                var handle=eval("new "+handleClassName+"(node)")
                var statement=handle.getStatement()
                if(statement){
                    statements.push(statement)
                }
            }
        }
        return statements
    }

首先，该函数根据widget名称在metaData数组中找到对应的元数据。之后，通过Dojo query搜索所有class属性中包含有searchPattern值的元素。当然，这当中有可能会有“假”的，所以，进而判断该元素是否有widgetid属性。如果有widgetid属性，表明是真的Dojo widget元素。接着，实例化对应的处理“类”并调用getStatement函数返回针对该widget生成的声明代码行。最后，把所有的代码行放入statements数组中并返回。

4.两种形式的声明代码行

在讲解_getIdentifier函数时，我们已经提到生成的代码有两种形式：通过label或者是通过元素属性值（如id，name等）。这个逻辑是定义在getStatement函数中的。

        this.getStatement=function(){
            var stmt=""
            this.identifier=this._getIdentifier() 
            if(!this.identifier || this.identifier.substr(-1)=="="){
                 _log("Failed to guess the method for "+this._escape(this._outerHTML(domNode)),"error");
                return;
            }

            var idKey=this._idKeyValue()[0]
            var idValue=this._idKeyValue()[1]
            var varName=this._formVarName(idValue)
            if(idKey=="label"){
                stmt=this.byLabelTemplate.replace('{className}',this._getClassName()).replace('{label}',idValue).replace('{varName}',varName)
            }else{
                var innerElemSahi=this._getSahiFuncName()+'("'+idValue+'")'
                stmt=this.byAttrTemplate.replace('{className}',this._getClassName()).replace('{innerElem}',innerElemSahi).replace('{varName}',varName) 
                return stmt
            }
            return stmt
        }

函数的开始对_getIdentifier的返回值进行解析。之后，通过一系列的字符串replace操作生成最终代码行。

下面是两种不同的代码模版的定义。正如本文开头提到的，读者也可以将代码模版定义在文件中，使代码生成脚本从文件中加载模版定义。

this.byLabelTemplate='var {varName}=findByLabel("{label}",{className})'
this.byAttrTemplate='var {varName}=new {className}({innerElem})'

5.label的识别

guessById和guessByName比较容易理解。我们一起看看guessByLabel函数的实现。

        this.guessByLabel=function(elem){
            var idValue=elem.getAttribute("id")
            if(idValue){
                var label=dojo.query('label[for="'+idValue+'"]')[0]
            }
            
            if(!label){
                var label=this.domNode.previousSibling.previousSibling
            }

            if(label){
        	return "label="+_getText(label);
            }
	}

因为绝大多数label都有一个for属性，该属性的值对应其附属的元素的id属性值。所以，guessByLabel首先得到widget元素的id属性值（注意，这个elem有可能是widget的一个内部元素，而不是widget的最外层元素），然后，通过Dojo query查找for属性为此id值的label。如果没有找到，它会通过相对位置获取label元素(通常label元素和其附属的元素是紧邻的)。最后，调用Sahi的_getText函数返回该label元素的文本信息。

为了配合这两种识别label的方式，core.sah中的findByLabel函数需要修改如下。所不同的是，findByLabel通过相逆的操作由已知的label文本识别对应的Dojo widget。

function findByLabel($labelText,$className){
    var $label=_label($labelText)
    var $wid=getAttribute($label,"for")
    if($wid){
       _set($id,findIdByWID($wid))
    }
    
    if($id){
        var $dojoWidget=_byId($id)
    }else{
        var $dojoWidget=$label.nextSibling.nextSibling 
    }
    return new $className($dojoWidget)
}

6.增加新的“猜测”函数

如果需要增加新的“猜测”函数，并且它具备一定的通用性，可以将此函数添加到DojoWidget函数中。具体写法可参照guessById和guessByName函数。另外，需要修改guess函数中的如下代码，这样才能把它加入到默认的“猜测”函数列表中。当然，你也需要考虑它的“优先级”，从而把它放在数组中合适的位置。

	this.guess=function(elem,userGuessFuncs){
            var guessFuncs=userGuessFuncs
            if(!guessFuncs){
                guessFuncs=[this.guessById,this.guessByName,this.guessByLabel] 
            }
	    for(var i=0; i < guessFuncs.length; i++) {
                var guessFunc=guessFuncs[i];
		rt=guessFunc.call(this,elem)
		if(rt){
	            return rt;
		}
	    }
	}

具体的widget处理函数也可以通过userGuessFuncs参数指定自己的”猜测“函数以及定义自己的”猜测“顺序。比如DojoButton，因为它的识别方式比较特殊，我们就在DojoButton中定义了guessByText函数，并把它作为第二个参数传给guess函数。读者如果有类似情况，可以仿照这段代码定义特定的“猜测”函数。

function DojoButton(domNode){
    DojoWidget.call(this,domNode)

    this._getIdentifier=function(){
        var elem=this.domNode;
        return this.guess(elem,[this.guessByText]);
    }

    this.guessByText=function(elem){
        var widgetId=elem.getAttribute("widgetid")
        var labelId=widgetId+"_label"
        var label=_span(labelId,_in(elem))
        var buttonText=_getText(label)
        return "text="+buttonText 
    }   

    this._getClassName=function(){
        return "$DojoButton"
    }

    this._getSahiFuncName=function(){
        return "_span" 
    }
}

7. 生成文件

Sahi提供了_writeFile函数进行文件写操作。下面是main.sah的代码。$filePath定义了文件的保存路径。第三个参数是布尔型，表示是覆盖原文件还是进行追加操作 - True表示覆盖原文件。Sahi也可以读写CSV文件、重命名文件以及删除文件。具体请参见 http://sahi.co.in/w/miscellaneous-apis

var $filePath='generated/appobjscode.sah'
_set($fileContent,new AppObjsCodeGen().gen());
_writeFile($fileContent,$filePath,true);

四.结束语

本文向读者介绍了如何通过Sahi脚本生成应用对象层的代码来简化和加速Web自动化测试的开发。在实际应用中，由于不少读者会在Dojo widget的基础上再进行封装，因此，本文附带的代码未必可以直接使用。但是，读者可以借鉴这当中的思路。希望，本文对读者能有所帮助。

代码下载