使用AutoIT自动化采集Javascript图表数据

在一些数据挖掘、报表统计的系统中，经常会用到一些Javascript图表来展示统计结果。针对这样的应用，也经常会被要求实现图表数据及展示情况的自动化验证。比如，下图中的这个系统，就提出这样的一个需求：收集当鼠标移到每个条形或者折线处页面产生的Tooltip中的数据。

分析页面之后，发现Tooltip所在的标签没有Id，并且它在页面的位置（我是指X、Y，而非DOM元素对象在DOM Tree中的位置）会根据选择的条形或折线发生变化。最关键的一点是整个图表中，无论是ToolTip还是条形或折线所在的Element，都没有Id和Name。这样一来，就不能通过Id和Name来找到这些页面元素对象了。而如果用QTP中的位置去定位ToolTip也因为位置变化，很难实现，那些矩形或者折线除了属性x、y、height、weight有区别外，其他完全一样，因此QTP识别起来也只能靠节点在Dom Tree中的位置了。这意味着，我们可能需要使用其他的一些定位方式，比如Xpath或者CSS。

继续分析页面。

在IE8中，使用开发人员工具可以看到每个条形或者折线所在的DOM Tree位置。

可以看到这些条形或者折线都位于一个标签为<shape>的节点中。

然而通过FireFox中的FireBug，看到的又是另外一番景象。

可以看到所有的条形和折线都位于<rect>标签中。看到这里，我们就应该有这样的一种意识，这个页面会因为Javascript在不同浏览器渲染出现差别，可能存在兼容性或者性能方面的问题。事实上，在做自动化测试的时候就已经发现了这个页面在IE系列浏览器中存在严重的前端性能问题。

在实现一个自动化测试需求或者一条自动化测试用例时（我是指实现），往往要经历分析需求或者用例，分析页面，然后设计方案，最后才实现脚本。下面设计方案，如何去收集Tooltip中的数据。

方案一：使用AutoIT的MouseMove方法在图表上移动鼠标光标，触发页面的MouseOver事件，当产生Tooltip时，就获取这个ToolTip对象及节点中的数据。步骤如下：

（1）首先获取到图表所在的Element对象

（2）然后遍历其子节点，获取所有的条形或折线的DOM元素

（3）计算条形或折线的DOM元素所在的位置（X、Y）

（4）使用AutoIT的MouseMove移动鼠标到条形或折线的DOM元素所在位置

（5）获取产生的Tooltip对象

（6）再获取tootip所在节点中的数据。

这个方案的难点在于：需要计算条形或者折线Dom元素对象所在的位置（相对屏幕），这样才能使用MouseMove来准确的移动。这个计算本身就是比较复杂的，可以使用类似以下方法来计算。

    var btn = document.getElementById("btnOK");

        var x = 0;

        var y = 0;

        do

        {

            x += btn.offsetLeft;

            y += btn.offsetTop;

        }

        while(btn = btn.offsetParent)

还得考虑偏移量。也就是说在计算出的位置上考虑偏移量，这样计算出一个范围，当鼠标移到这个范围中时，就能触发这个MouseOver事件。

方案二：使用fireEvent触发OnMouseOver事件。这是最简单的方法，也是我最终选用的方法。相比这个方案，方案一就显得太暴力了。

具体的步骤如下：

（1）首先获取到图表所在的Element对象

（2）然后遍历其子节点，获取所有的条形或折线的DOM元素

（3）使用fireEvent("onmouseover")触发MouseOver事件

（4）获取产生的Tooltip对象

（5）再获取tootip所在节点中的数据。

比较两个方案，第二个方案显然更合适。根据这个方案，最终使用AutoIT实现的脚本如下：

总共只有17行代码，很easy的完成了这个需求。当然这里是因为使用了一个轻量级的小框架，所以脚本会比较少，对象识别的东西都在框架底层完成了。比如下面这一句：

$Chart = $Sub_Page.Op("图表","获取这个对象","")

$Sub_Page是页面对象。Op是这个页面对象的所有子元素对象操作入口，它有三个参数，分别为“对象名称”，“操作描述”，“值”。

比如说打开百度后点击搜索按钮，可以这么写：

$Badu_Page.Op(‘搜索按钮’,’点击它’,’’)

有点关键字的味道。后面再慢慢介绍如何使用AutoIT设计一个轻量级的测试框架。