使用Selenium IDE点击Google地图

时间:2011-12-30 18:47:20

标签: google-maps selenium

我无法创建Selenium测试用例来自动点击Google地图(具体来说,只需点击地图即可创建标记)。

  1. IDE中的记录功能

    “记录”功能将鼠标单击记录为

    <tr>
        <td>click</td>
        <td>//div[@id='map_canvas']/div[3]/div/div/div[4]/div/div/div[5]</td>
        <td></td>
    </tr>
    

    执行命令时,这不仅会将标记方式放在可见的地图视图之外,而且在页面刷新时也不可靠,因为GMap嵌套的div结构每次都会更改。

  2. clickAt

    Here建议将clickAt与外部div的div一起使用,如下所示:

    <tr>
        <td>clickAt</td>
        <td>//div[@id='map_canvas']/div/div[1]</td>
        <td>(400,300)</td>
    </tr>
    

    这根本不起作用。我已经尝试了我能想到的click,clickAt和mouseDown / mouseUp的每个变体,但似乎没有注册。

  3. 我知道谷歌已经发布了他们的Selenium test suites,但我无法弄清楚如何利用它对我有利。任何帮助将不胜感激!

    编辑:似乎Google的方法(以及我发现的所有其他方法)不起作用的原因是因为我使用的是谷歌地图API的v3。谷歌自己的Selenium测试似乎正在使用v2。

3 个答案:

答案 0 :(得分:4)

经过大量的讨论之后,我想我找到了一个中等优雅且足够强大至少能够处理页面刷新的解决方案。

首先,我认为既然我可以使用storeEval命令运行任意JS,也许我可以利用JS的强大功能找到需要点击的元素。我的第一个想法是搜索实际图像并点击它:

var imgs = window.document.getElementsByTagName("img");
str = "";
for (var i = 0; i<imgs.length; i++) {
    if (imgs[i].src.match("GetMapImage")) {
        str = imgs[i].src;
        break;
    }
}
str;

上面的代码在所有图像中搜索包含“GetMapImage”的图像源,这对Google的图像检索来说是特殊的。然后我将它存储在Selenium变量中并使用确切的src来clickAt。不幸的是,这是偶然的,因为同一个图像在三个不同的div中重复出现,并且没有人知道哪一个实际上会在顶部。

然后我发现了这篇文章:How to simulate a click by using x,y coordinates in JavaScript?

因为我可以使用Selenium函数找出我的地图的X和Y偏移量,所以我可以简单地运行document.elementFromPoint()来得到(我假设)你点击那个x时自然会点击的元素y位置。我现在的步骤是:

  1. 获取我的地图div的左侧和顶部位置。
  2. 获取将在这些坐标处单击的元素。
  3. 将此元素的ID设置为唯一的。
  4. 使用带有此ID的clickAt函数。
  5. 我成功的硒代码如下:

    <tr>
        <td>storeElementPositionLeft</td>
        <td>id=map</td>
        <td>left</td>
    </tr>
    <tr>
        <td>storeElementPositionTop</td>
        <td>id=map</td>
        <td>top</td>
    </tr>
    <tr>
        <td>storeEval</td>
        <td>window.document.elementFromPoint(${left}, ${top}).id = &quot;selenium-gmap&quot;</td>
        <td>dummy</td>
    </tr>
    <tr>
        <td>clickAt</td>
        <td>id=selenium-gmap</td>
        <td>200,100</td>
    </tr>
    

    这至少适用于Firefox 9.0.1,这对我来说已经足够了。请注意,此解决方案取决于document.elementFromPoint函数的availability

答案 1 :(得分:2)

在id = map上使用elementFromPoint的建议对我不起作用(Maps API 3和FireFox 15),因为返回的map_canvas元素不响应点击事件。

我发现最好的近似是使用IDE点击录制来获取非常特定的画布元素,然后在其中定位。使用clickAt extension简化了获取位置。

已清理的xpath,其中包含对已平铺的div / canvas的硬编码引用,它成功触发了我要查找的单击操作:

<tr>
 <td>clickAt</td>
 <td>//div[@id='map_canvas']//div[8]/canvas</td>
 <td>150,131</td>
   </tr>
<tr>
  <td>clickAt</td>
  <td>//div[@id='map_canvas']//div[4]/canvas</td>
  <td>90,42</td>
</tr>
<tr>
  <td>clickAt</td>
  <td>//div[@id='map_canvas']//div[16]/canvas</td>
  <td>108,53</td>
</tr>

答案 2 :(得分:1)

对于您的测试环境(或少量标记),您可以将标记选项设置为“false”。然后,您可以使用Xpath选择器。有性能成本。

查看此问题的答案: Selenium tests for Google maps