使用QTP录制使用extjs框架的web

近来使用QTP录制使用extjs框架编写的web软件，遇到诸多问题，而google上资料甚少，所以把一些心得总结于此。

    extjs的页面对象会用很多WebElement替代link，button等传统html对象。这样虽然让整个web页面做的仿windows操作系统，但给qtp自动化测试的介入带来了不少问题。闲话不多说，直入主题。

    假设页面有两个图标，名称分别为图标1和图标2，点击分别可以打开列表1和列表2

    点击页面两个图标的录制结果

    Browser("mike").Page("mike").WebElement("WebElement").FireEvent"onmouseover"

    Browser("mike").Page("mike").WebElement("WebElement").Click

    Browser("mike").Page("mike").WebElement("WebElement_2").FireEvent"onmouseover"

    Browser("mike").Page("mike").WebElement("WebElement_2").Click

    上面4行vbs代码，用qtp回放，qtp是很难找到目标图标的，因为WebElement参数值始终随着页面的变化而动态变化。希望qtp能够按希望找到2个图标解决办法如下。

    1.使用关键字驱动

    进入resources->Object Repository，将WebElement重命名为图标1，WebElement_2重命名为图标2，发现代码变为

    Browser("mike").Page("mike").WebElement("图标1").FireEvent"onmouseover"

    Browser("mike").Page("mike").WebElement("图标1").Click

    Browser("mike").Page("mike").WebElement("图标2").FireEvent"onmouseover"

    Browser("mike").Page("mike").WebElement("图标2").Click

    回放脚本，发现qtp可以找到图标并且点击成功。

    如果图标1和图标2的名称为空，那这两个图标成为无依无靠的webelement。那必须使用第二种办法

    2.描述性编程

    使用object spy将两个图标加入对象库，会发现这两个webelement的父节点为page("mike")并且图标有很多属性值，其中的大部分属性值会因为extjs或者web页面的变化而变化。找到其中不变的属性，使用描述性编程关联到该两个图标。代码如下

    Set MyDescription =Description.Create() '创建对象描述，包括属性名和属性值

    MyDescription("micclass").Value="WebElement" '属性名为micclass，属性值为WebElement

    MyDescription("@属性名").Value="@属性值" '不变的属性值和属性名来区分其他的WebElement

    Set MyChildObject = Browser("mike").Page("mike").ChildObjects(MyDescription) '将WebElement作为Page("mike")的子节点

    msgBox MyChildObject.Count '弹出窗显示子节点个数

    ChildObjectsCount = MyChildObject.Count '循环点击每个WebElement

    For Counter=ChildObjectsCount-1 to 0 step -1

    MyChildObject(Counter).Click

    Next

    extjs的WebElement对象有它的类属性是micclass，使用该语句可以找到页面所有的WebElement。

    使用方法2，可以减少使用object spy的繁琐步骤，并且代码的可移植性和重用性较强。该方法一般适用于页面上没有name的对象，比如关闭按钮，翻页按钮等等。