用Selenium IDE在Google Maps上点击

Question

我无法创建一个Selenium测试用例来自动点击Google Maps（具体来说，是通过在地图上单击来创建标记）。

1. Record function in IDE

   The "Record" function records my mouse click as

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

   When executing the command, this not only places the marker way outside the visible map view, but it is also not reliable on page refresh because the GMap nested div structure changes every time.

2. clickAt

   Here it was suggested to use clickAt with the outside div's div, like so:

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

   This does not work at all. I have tried every variation of click, clickAt, and mouseDown/mouseUp that I can think of, but nothing seems to register.

我知道Google已经发布了他们的Selenium测试套件，但我不知道如何利用它来帮助我。任何帮助都将不胜感激！

编辑：看起来Google的方法（以及我找到的所有其他方法）不起作用的原因是我正在使用Google Maps API v3。Google自己的Selenium测试似乎在使用v2。

- elynnaie

Answer 1

经过一番研究，我想我找到了一个比较优雅和足够健壮的解决方案，至少可以处理页面刷新。

首先，我认为由于我可以使用 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”的图像源，这是谷歌图像检索中的特殊内容。然后，我将其存储在Selenium变量中，并使用确切的src进行clickAt。不幸的是，这种方法有时会成功，有时会失败，因为同一张图片会在三个单独的div中重复出现，无法确定哪一个实际上位于顶部。 接着我发现了这篇文章：如何使用JavaScript模拟点击x,y坐标？ 由于我可以使用Selenium函数计算出我的地图的X和Y偏移量，所以我可以简单地运行document.elementFromPoint()来获取（我认为）如果您点击该x和y位置，您自然会单击的任何元素。我的步骤如下：

1. 获取我的地图div的左侧和顶部位置。
2. 获取将在这些坐标处单击的元素。
3. 将此元素的ID设置为唯一值。
4. 使用此ID的clickAt函数。

我的成功的Selenium代码如下：

<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函数的可用性。

- elynnaie

Answer 2

“使用 elementFromPoint 在 id=map 上的建议对我不起作用（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>

- Will Budreau

Answer 3

对于您的测试环境（或少量标记），您可以将标记选项优化设置为“false”。然后您可以使用Xpath选择器。这会带来性能成本。

请参阅此问题的答案： Google地图的Selenium测试

- Aaron Kreider