【转帖】WebDriver拾级而上(15) – 拖曳动作模拟

悠悠小仙仙

如何把一个元素拖放到另一个元素里面
下面这个页面是一个演示拖放元素的页面，你可以把左右页面中的条目拖放到右边的div框中。
http://koyoz.com/demo/html/drag-drop/drag-drop.htm
CODE:

1. <font size="4"><div id="drop">
   
2.     拖过来试试
   
3.     <p>11111拖入</p>
   
4. </div>
   
5. <div id="items">
   
6.     <div id="item1" class="item" style="position: absolute; left: 411px; top: 154px; display: none;">11111</div>
   
7.     <div id="item2" class="item">22222</div>
   
8.     <div id="item3" class="item">33333</div>
   
9.     <div id="item4" class="item">44444</div>
   
10.     <div id="item5" class="item">55555</div>
    
11.     <div id="item6" class="item">66666</div>
    
12. </div></font>

复制代码

Java代码
CODE:

1. <font size="4">
   
2. package com.test;
   
3. 
   
4. import org.openqa.selenium.By;
   
5. import org.openqa.selenium.WebDriver;
   
6. import org.openqa.selenium.WebElement;
   
7. import org.openqa.selenium.chrome.ChromeDriver;
   
8. import org.openqa.selenium.interactions.Actions;
   
9. 
   
10. public class Test_DragAndDrop {
    
11.     public static void main(String[] args) {
    
12.         WebDriver dr = new ChromeDriver();  
    
13.         dr.get("http://koyoz.com/demo/html/drag-drop/drag-drop.html");
    
14.          
    
15.         //首先new出要拖入的页面元素对象element和目标对象target，然后进行拖入。  
    
16.         WebElement element = dr.findElement(By.id("item1"));  
    
17.         WebElement target = dr.findElement(By.id("drop"));  
    
18.         (new Actions(dr)).dragAndDrop(element, target).perform();   
    
19.          
    
20.         //利用循环把其它item也拖入  
    
21.         String id="item" ;  
    
22.         for(int i=2;i<=6;i++){
    
23.             String item = id+i;  
    
24.             (new Actions(dr)).dragAndDrop(dr.findElement(By.id(item)), target).perform();  
    
25.         }
    
26.         //dr.quit();         
    
27.     }
    
28. }</font>

复制代码

=================================================
附：如何利用Actions类模拟鼠标和键盘的操作
actions类，主要定义了一些模拟用户的鼠标mouse，键盘keyboard操作。对于这些操作，使用perform()方法进行执行。
actions类可以完成单一的操作，也可以完成几个操作的组合。
单一的操作
单一的操作是指鼠标和键盘的一个操作。如鼠标左键按下、弹起或输入一个字符串等。
前面涉及到鼠标键盘操作的一些方法，都可以使用actions类中的方法实现，比如：click，sendkeys。
CODE:

1. <font size="4">WebElement  element = dr.findElement(By.id("test"));  
   
2. WebElement  element1 = dr.findElement(By.id("test1"));  
   
3. element.sendKeys("test");
   
4. element1.click;</font>

复制代码

用Actions类就可以这样实现：
CODE:

1. <font size="4">//新建一个action
   
2. Actions action=new Actions(driver);
   
3. //操作
   
4. WebElement element=dr.findElement(By.id("test"));
   
5. WebElement element1=dr.findElement(By.id("su"));
   
6. action.sendKeys(element,"test").perform();
   
7. action.moveToElement(element1);
   
8. action.click().perform();</font>

复制代码

看起来用Actions类实现click和sendKeys有点烦索
组合操作
组合操作就是几个动作连在一起进行操作。如对一个元素的拖放。
CODE:

1. <font size="4">(new Actions(dr)).dragAndDrop(dr.findElement(By.id(item)), target).perform();</font>

复制代码

可以直接调用dragAndDrip()方法，也可以像下面濱示的一样把几个操作放一起实现
CODE:

1. <font size="4">Action dragAndDrop = builder.clickAndHold(someElement)
   
2.        .moveToElement(otherElement)
   
3.        .release(otherElement)
   
4.        .build().perform();</font>

复制代码

其他鼠标或键盘操作方法可以具体看一下API里面的org.openqa.selenium.interactions.Actions类

巴黎的灯光下

笔芯