用Selenium IDE点击Google地图 [英] Clicking on Google Maps with Selenium IDE

问题描述

我无法创建Selenium测试用例来自动点击Google地图（特别是通过单击地图创建标记）。

$ b

记录函数记录我的鼠标点击

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

执行该命令时，不仅将标记方式置于可见地图视图外，而且在页面刷新中也不可靠，因为GMap嵌套div结构每次都会发生变化。




1. clickAt

   
   
   

   这里有人建议使用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的各种变体，但似乎没有注册。

我知道Google已经发布了 Selenium测试套件

一个>，但我无法弄清楚如何使用它对我有利。任何帮助，将不胜感激！

编辑：这似乎是谷歌的方法（和我找到的所有其他方法）不起作用的原因是因为我正在使用Google Maps API的v3版本。 Google自己的Selenium测试似乎在使用v2。

解决方案

经过多次讨论后，我想我找到了一个适度优雅的解决方案首先，我认为，由于我可以使用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; 
休息; 
} 
} 
 str; 
  

以上代码会搜索包含GetMapImage的图片来源的所有图片，这对于Google图像检索。然后，我将它存储在一个Selenium变量中，并使用确切的src来单击。不幸的是，这是一个未知数，因为相同的图像在三个独立的div中重复使用，并且不知道哪一个实际上处于顶端。

然后我发现这篇文章：如何模拟一个点击使用JavaScript中的x，y坐标？

因为我可以使用Selenium函数计算我的地图的X和Y偏移量，所以我可以简单地运行document.elementFromPoint（）得到（我假设）只要你点击那个x和y位置，你自然会点击的任何元素。现在我的步骤是：

1. 获取地图div的左侧和顶部位置。
   
2. 获取在这些坐标处点击的元素。


3. 将此元素的id设置为唯一。
   
4. 使用此id的clickAt函数。

我成功的硒代码看起来像：

 < TR> 
< td> storeElementPositionLeft< / td> 
< td> id = map< / td> 
< td>离开< / 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>虚拟< / td> 
< / tr> 
< tr> 
< td> clickAt< / td> 
< td> id = selenium-gmap< / td> 
< td> 200,100< / td> 
< / tr> 
  

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

I am not able to create a Selenium test case to automate clicking on Google Maps (specifically, creating markers by single-clicking on the map).

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.

I do know that Google has released their Selenium test suites, but I cannot figure out how to use it to my advantage. Any help would be appreciated!

Edit: It seems to be that the reason Google's approach (and all the other approaches that I've found) don't work is because I am using v3 of Google's Maps API. Google's own Selenium tests seem to be using v2.

解决方案

After much fussing around, I think I found a solution that is moderately elegant and robust enough to at least handle page refreshes.

First, I figured that since I can run arbitrary JS with the storeEval command, perhaps I could leverage the power of JS to find what element needed clicking on. My first thought was searching for the actual image and clicking on it:

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;

The above code searches all images for an image source that contains "GetMapImage", which is special to Google's image retrieval. I would then store this in a Selenium variable and use the exact src to clickAt. Unfortunately, this was hit-or-miss, because the same image gets repeated in three separate divs, and there is no telling which one will actually be on top.

Then I found this post: How to simulate a click by using x,y coordinates in JavaScript?

Since I can figure out the X and Y offset of my map using Selenium functions, I could simply run document.elementFromPoint() to get (I assume) whatever element you would have naturally clicked on had you clicked on that x and y location. My steps now are:

1. Get the left and top positions of my map div.
2. Get the element that would be clicked on at these coordinates.
3. Set the id of this element to something unique.
4. Use the clickAt function with this id.

My successful selenium code looks like:

<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>

This, at the very least, works in Firefox 9.0.1, which is good enough for me. Note that this solution hinges upon availability of the document.elementFromPoint function.

这篇关于用Selenium IDE点击Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！