和我一起学 Selenium WebDriver（7）——基础篇

 昨天我们已经可以轻松移动鼠标了，距离拖拽只有一步之遥。 其实这就是一层窗户纸，捅破它就搞定了，之前做的操作可以说都是单步操作：移动鼠标、点击页面元素、弹出窗口等等；而拖拽操作就不行了，他需要一连串连贯的动作配合起来：mousedown、mousemove、mouseup，缺了哪个都不行，顺序不对也不行。

 

【1、如何进行拖拽】

    这时候我们就需要用到 org.openqa.selenium.interactions.Actions 这个类了，它专门用来做动作组合的。 Actions 中有若干方法，可以让你很容易的生成 鼠标、按键的操作集合。

    例如： clickAndHold + moveToElement + release 就可以组合成一套拖拽的操作；

    详细内容还请查看 Selenium 的 javadoc：http://selenium.googlecode.com/svn/trunk/docs/api/java/index.html

    生成操作组合后，利用 build 方法可以得到一个有效的 Action 对象；最后使用 perform 方法执行就可以了。

    和昨天测试鼠标移动的情况类似，还是 FireFox 问题最大， IE8有小问题， Chrome 测试最正常。

FireFox：使用 moveToElement 方法时，效果同昨天使用 MoveToOffsetAction 情况类似，xOffset、yOffset值无论如何设置，在页面上得到的都是 指定的 页面元素；

    另外，如果在不使用 moveToElement的时候就使用moveByOffset 很容易报错：org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: Element cannot be scrolled into view: (WARNING: The server did not provide any stacktrace information)

IE8: 使用 moveToElement 方法时，如果用到了 xOffset、yOffset 参数，你会发现在 IE8中 计算的情况 和 Chrome 上不太一样，貌似范围会更大一些，因此导致如果设置为0, 0 时，就不是你预期的结果了

测试代码我分成了3个部分：

• 观察反复拖拽测试 1

   可以专门用来观察 moveToElement 在不同浏览器下的情况

• 观察反复拖拽测试 2

   可以专门用来观察 moveByOffset 在不同浏览器下的情况，FireFox 会报错

• 观察系列操作测试

   可以专门用来观察 多种组合操作 在 不同浏览器下的情况

    总之，对于鼠标移动和拖拽的测试还是直接在 Chrome 下进行就可以了吧；ie的只能略微参考；剩下的还是自己手动来吧。。。。

    如果想在 IE 上正常测试，建议采用moveToElement(WebElement)+ moveByOffset(xOffset, yOffset); 避免直接使用 moveToElement(WebElement, xOffset, yOffset)，同时还是要严格注意 xOffset 和 yOffset 的设置；这个需要根据自己的实际情况来调试了。

    学习了这些内容以后，对于 测试 zTree 这类前端 js 插件来说就足够了，剩下的就努力干活儿吧。 貌似我是真用不上 Selenium 的 webdriver 了。。。

以下是测试代码：

Java代码  

1. package lesson07;  
2.   
3. import org.junit.AfterClass;  
4. import org.junit.BeforeClass;  
5. import org.junit.Test;  
6. import org.openqa.selenium.HasInputDevices;  
7. import org.openqa.selenium.JavascriptExecutor;  
8. import org.openqa.selenium.WebDriver;  
9. import org.openqa.selenium.WebElement;  
10. import org.openqa.selenium.chrome.ChromeDriver;  
11. import org.openqa.selenium.firefox.FirefoxDriver;  
12. import org.openqa.selenium.ie.InternetExplorerDriver;  
13. import org.openqa.selenium.interactions.Action;  
14. import org.openqa.selenium.interactions.Actions;  
15. import org.openqa.selenium.interactions.MoveMouseAction;  
16. import org.openqa.selenium.interactions.MoveToOffsetAction;  
17. import org.openqa.selenium.internal.Locatable;  
18. import org.openqa.selenium.support.ui.ExpectedCondition;  
19. import org.openqa.selenium.support.ui.WebDriverWait;  
20.   
21. import util.Common;  
22.   
23. public class ExampleForDrag  {  
24.       
25.     static WebDriver driver;  
26.       
27.     @BeforeClass  
28.     public static void init() {  
29.         System.out.println("init...");  
30.         //用 Chrome  
31. //      System.setProperty(  
32. //              "webdriver.chrome.driver",  
33. //              "E:\\BaiduWangPan\\百度网盘\\javascript\\Selenium WebDriver\\chromedriver_win_23.0.1240.0\\chromedriver.exe");  
34. //      driver = new ChromeDriver();  
35.           
36.         //用 IE  
37. //      driver = new InternetExplorerDriver();  
38.           
39.         //用 FireFox  
40.         System.setProperty("webdriver.firefox.bin", "D:\\Program Files\\Mozilla Firefox\\firefox.exe");  
41.         // 创建一个 FireFox 的浏览器实例  
42.         driver = new FirefoxDriver();  
43.     }  
44.       
45.     @Test  
46.     public void test() {  
47.         // 让浏览器访问 zTree Demo  
48.         driver.get("http://www.ztree.me/v3/demo/cn/exedit/drag.html");  
49.           
50.         // 等待 zTree 初始化完毕，Timeout 设置10秒  
51.         try {  
52.             (new WebDriverWait(driver, 10, 500)).until(new ExpectedCondition<Boolean>() {  
53.                 public Boolean apply(WebDriver d) {  
54.                     WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("return $('#treeDemo li').get(0);");  
55.                     return element != null;  
56.                 }  
57.             });  
58.               
59.         } catch(Exception e) {  
60.             e.printStackTrace();  
61.         }  
62.           
63.         //找到第一个根节点的子节点  
64.         ((JavascriptExecutor)driver).executeScript("window.zTreeObj = $.fn.zTree.getZTreeObj('treeDemo');"  
65.                 + "window.zTreeNodeSrc = window.zTreeObj.getNodes()[0].children[0];");  
66.           
67.         //获取 需要拖拽的节点对象   
68.         WebElement elementSrc = (WebElement) ((JavascriptExecutor)driver).executeScript("return $('#' + window.zTreeNodeSrc.tId + '_a').get(0)");  
69.         //获取 目标节点对象   
70.         WebElement elementTarget = (WebElement) ((JavascriptExecutor)driver).executeScript("window.zTreeNodeTarget = window.zTreeNodeSrc.getNextNode().children[0]; return $('#' + window.zTreeNodeTarget.tId + '_a').get(0)");  
71.         Actions actions = new Actions(driver);  
72.         Action action;  
73.   
74.         //观察反复拖拽测试 1  
75. //      actions.clickAndHold(elementSrc);  
76. //      for (int i=0; i<500; i++) {  
77. //          actions.moveToElement(elementTarget, i%100-50, i%50-20);  
78. //      }  
79. //      actions.release();  
80. //      action = actions.build();  
81. //      action.perform();  
82. //        
83. //      Common.waitFor(10, driver);  
84.   
85.         //观察反复拖拽测试 2  
86. //      actions.clickAndHold(elementSrc).moveToElement(elementTarget);  
87. //      int x = 0, y = 0, dx=2, dy=2;  
88. //      for (int i=0; i<500; i++) {  
89. //          x+=2; y+=2;  
90. //          if (x > 50) {  
91. //              dx = -x;  
92. //              x = 0;  
93. //          } else {  
94. //              dx = 2;  
95. //          }  
96. //          if (y > 150) {  
97. //              dy = -y;  
98. //              y = 0;  
99. //          } else {  
100. //              dy = 2;  
101. //          }  
102. //          actions.moveByOffset(dx, dy);  
103. //      }  
104. //      actions.release();  
105. //      action = actions.build();  
106. //      action.perform();  
107. //      Common.waitFor(10, driver);  
108.           
109.         //观察系列操作测试  
110.         System.out.println("移动成为目标节点的 前一个节点");  
111.         actions.clickAndHold(elementSrc).moveToElement(elementTarget, 60, 1).release();  
112.         action = actions.build();  
113.         action.perform();  
114.           
115.         // 等待 10 秒  
116.         Common.waitFor(10, driver);  
117.           
118.         System.out.println("移动成为目标节点的后一个节点");  
119.         actions.clickAndHold(elementSrc).moveToElement(elementTarget, 60, 38).release();  
120.         action = actions.build();  
121.         action.perform();  
122.           
123.         // 等待 10秒  
124.         Common.waitFor(10, driver);  
125.           
126.         System.out.println("移动成为目标节点的子节点");  
127.         actions.clickAndHold(elementSrc).moveToElement(elementTarget).release();  
128.         action = actions.build();  
129.         action.perform();  
130.           
131.         // 等待 10秒  
132.         Common.waitFor(10, driver);  
133.   
134.         System.out.println("移动成为目标节点下一个节点的子节点");  
135.         actions.clickAndHold(elementSrc).moveToElement(elementTarget).moveByOffset(0, 20).release();  
136.         action = actions.build();  
137.         action.perform();  
138.           
139.         // 等待 10秒  
140.         Common.waitFor(10, driver);  
141.           
142.     }  
143.       
144.     @AfterClass  
145.     public static void destory() {  
146.         System.out.println("destory...");  
147.         //关闭浏览器  
148.         driver.quit();  
149.     }  
150. }