鼠标悬停，出现另一个元素，点击这个元素的解决方法_悬浮元素出现一个按钮

历经千辛万苦，终于解决了 UI TA（test automation） 中的这个难题，必须记录一下。

前提是：需要测试的这个页面是用 google 的 angularjs 写的。许多页面效果是用 angularjs 自带的一些事件结合 css hover实现的。测试的 UI TA 框架用的是 selenium webdriver + junit 。

问题是：页面上有一个效果：点击一个按钮 A，出现一个 project 的列表 B，将鼠标悬停在任意一个 project 上，会出现这个 project 的 所有 datasource 的列表。点击任意一个 datasource，可以搜索这个 datasource 里面的数据。我现在就是要模拟这个操作，做了以下尝试：

尝试一：利用 selenium 的 Actions 类的 moveToElement(webElement) 方法模拟鼠标悬停。大概 10 次中有 1 次可以成功点击到指定的 datasource。不成功的时候的效果是，好像鼠标在 project 上晃来晃去一样，datasource 列表就一闪一闪的出现多次，但就是没法点击。我们怀疑可能是鼠标悬浮到了选中的 webElement 的边界上，所以导致效果不稳定，所以试过将鼠标 move to 指定的 offset，以确保到元素的中间地带，但是没有用。在网上查到有人说 action 的 moveToElement 是鼠标一闪而过的，这一句代码执行完了，鼠标就不在元素上面了。建议用 jquery 的 mouseover()，鼠标会一直在元素上面。代码：

[java]  view plain copy

1. actions action = new Actions(driver);  
2. action.moveToElement(projectElement).moveByOffset(10, 3).build().perform();  

尝试二：利用 jquery 的 mouseover() 模拟鼠标悬停。尝试了很久，悬停的效果就是没有出现，后来才知道是因为测试页面的这个元素上没有用 js 绑定 mouseover() 的事件，所以测试代码中的 mouseover() 也不会起作用。

[java]  view plain copy

1. JavascriptExecutor js = (JavascriptExecutor) driver;  
2. String jsStr = "$('projectListDiv>ul>li>a:eq(" + i+ ")').mouseover()";  
3. js.executeScript(jsStr);  

尝试四：WebDriver 的 click() 对隐藏的元素是否生效。试过，结论是：不可以。

尝试五：Javascript 的 click() 对隐藏的元素是否生效。试过，结论是：可以。这样，问题就迎刃而解了，可以跳过鼠标悬停 project 这个步骤，直接点击 datasource 就行了。附代码：

[java]  view plain copy

1. public static void searchInDatasourceOnSearchLogPage(WebDriver driver, String projectName, String datasourceName) {  
2.     SearchWebElement.getWebElementByXPath(driver, projectListXpath).click();  
3.     //得到project 的 list  
4.     List<WebElement> projects = SearchWebElement.getWebElementListByXPath(  
5.             driver, projectsXpath);  
6.     List<WebElement> datasources = new ArrayList<WebElement>();  
7.     JavascriptExecutor js = (JavascriptExecutor) driver;  
8.     try {  
9.         for (WebElement projectElement : projects) {  
10.             System.out.println(projectElement.getText());  
11.             if (projectName.equals(projectElement.getText())) {  
12.                 Actions action = new Actions(driver);  
13.                 //之所以还需要moveToElement，是因为我需要判断是否是指定的datasource，需要拿到datasource 的label元素的 text  
14.                 //而只有鼠标悬停在 project 上，出现 datasource 的list 之后，才能拿到这个 text  
15.                 action.moveToElement(projectElement).moveByOffset(10, 3)  
16.                     .build().perform();  
17.                 //得到datasource 的 list  
18.                 datasources = SearchWebElement.getWebElementListByXPath(driver, rawdataXpath);  
19.                 for (int i=1;i<=datasources.size();i++) {  
20.                     WebElement datasourceElement = datasources.get(i-1);  
21.                     System.out.println(datasourceElement.getText());  
22.                     if (datasourceName.equals(datasourceElement.getText())) {  
23.                         // 利用 js 的 click事件 去点击隐藏的元素   
24.                         String jsStr = "$('#projectListDiv>ul>li>ul>li>div:eq("+ i + ")').click();";  
25.                         js.executeScript(jsStr);  
26.                     }  
27.                 }  
28.             }  
29.         }  
30.     } catch (Exception e) {  
31.         e.printStackTrace();  
32.     }  
33. }  

总结一下，这个问题之所以花了很多时间才解决，一个很大的问题就是我对 javascript， jquery，angularjs 不熟，所以眼界比较窄，不知道能用什么方法去解决，所以只能在开发的提点下不断进行尝试。