[Java – Webdriver 07] – Drag and drop element (Kéo/ thả phần tử trên trang Web)

Yêu cầu:

Drag & drop đối tượng trên trang web là một hiệu ứng rất phổ biến, nhất là trong các chức năng cần sắp xếp các đối tượng, định vị vị trí tương đối giữa các đối tượng

• Kéo phần tử A lên phần tử B
  
• Kéo thư mục A lên thư mục B (thư mục A là thư mục con của thư mục B)

• Kéo phần tử A đến 1 phân vùng trống

Vậy làm sao để tự động hóa việc kéo thả các phần tử này trên trang Web?

Giải pháp:

Selelnium Webdriver đã hỗ trợ thư viện là openqa.selenium.interactions.Actions (link) xử lí những sự kiện của chuột và bàn phím như: click, doubleClick, clickAndHold, moveToElement,sendKeys, keyUp, keyDown,… Và method được sử dụng cho bài viết này là dragAndDrop

Chúng ta có thể viết 1 hàm để sử dụng nhiều lần như:

public void dragAndDropElement(WebElement sourceElement, WebElement destinationElement) {
if (sourceElement.isDisplayed() && destinationElement.isDisplayed()) {
Actions action = new Actions(driver);
action.dragAndDrop(sourceElement, destinationElement).build().perform();
} else {
System.out.println(“Element was not displayed to drag”);
} }

hoặc dùng cho mỗi lần:

Actions builder = new Actions(driver);
Action dragAndDropAction = builder.clickAndHold(sourceElement).
moveToElement(destinationElement).release(destinationElement).build();
dragAndDropAction .perform();

clickAndHold(sourceElement): click và giữ đối tượng nguồn
moveToElement(destinationElement): di chuyển đến điểm giữa của đối tượng đích
realease(destinationElement): thả chuột trái tại vị trí chuột hiện tại
build(): tạo ra 1 action tổng hợp có chứa tất cả các action trước đó
perform(): thực hiện hành động

Mình sẽ làm demo thử trên 4 site có những element kéo thả khác nhau, mỗi 1 site sẽ viết 1 case, site 1-2 sẽ sử dụng hàm dragAndDropElement(), site 3-4 sẽ áp dụng cách viết kéo thả khác, các bạn vui lòng xem trong code để tùy biến nhé:
http://jqueryui.com/droppable
http://demos.telerik.com/kendo-ui/dragdrop/angular
http://dhtmlx.com/docs/products/dhtmlxTree
http://demo.kaazing.com/forex

Source demo:

package seleniumWebDriver;

import java.awt.AWTException;
import java.awt.Robot;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.NoSuchElementException;
import org.openqa.selenium.Point;
import org.openqa.selenium.StaleElementReferenceException;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class WebDriver07_DragAndDropFile {
WebDriver driver;

@BeforeClass
public void setUp() {
driver = new FirefoxDriver();
}

@Test (enabled=true)
public void dragAndDropAnElement01() throws Exception {
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get(“http://jqueryui.com/droppable/”);
driver.manage().window().maximize();

WebElement iFrame = driver.findElement(By.tagName(“iframe”));
driver.switchTo().frame(iFrame);

WebElement From = driver.findElement(By.id(“draggable”));
WebElement To = driver.findElement(By.id(“droppable”));

dragAndDrop(From, To);
Thread.sleep(4000);

String actualText = driver.findElement(By.xpath(“//*[@id=’droppable’]/p”)).getText();
System.out.println(actualText);
Assert.assertEquals(actualText, “Dropped!”);
}

@Test (enabled=true)
public void dragAndDropAnElement02() throws Exception {
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get(“http://demos.telerik.com/kendo-ui/dragdrop/angular”);
driver.manage().window().maximize();
Thread.sleep(3000);

WebElement From = driver.findElement(By.id(“draggable”));
WebElement To = driver.findElement(By.id(“droptarget”));

dragAndDrop(From, To);
Thread.sleep(3000);

String actualText = driver.findElement(By.id(“droptarget”)).getText();
System.out.println(actualText);
Assert.assertEquals(actualText, “You did great!”);
}

@Test (enabled=true)
public void dragAndDropAnElement03() throws Exception {
driver.get(“http://dhtmlx.com/docs/products/dhtmlxTree/”);
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.manage().window().maximize();
Thread.sleep(5000);

WebElement elementToMove = driver.findElement(By.xpath(“//div[@id=’treebox2′]//span[text()=’Ian Rankin’]”));
Actions builder = new Actions(driver);
Action drag = builder.clickAndHold(elementToMove).build();
drag.perform();

WebElement moveToElement = driver.findElement(By.xpath(“//div[@id=’treebox2′]//span[text()=’James Johns’]”));
Actions builder2 = new Actions(driver);
Action dragAndDrop = builder2.moveToElement(moveToElement).release(moveToElement).build();
dragAndDrop.perform();
Thread.sleep(5000);
}

@Test (enabled=true)
public void dragAndDropAnElement04() throws AWTException, Exception {
driver.get(“http://demo.kaazing.com/forex”);
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.manage().window().maximize();
Thread.sleep(5000);

WebElement sourceElement = driver.findElement(By.xpath(“//img[@title=’GBPEUR’]”));
Actions builder = new Actions(driver);
Action drag = builder.clickAndHold(sourceElement).build();
drag.perform();

WebElement targetElement = driver.findElement(By.xpath(“//div[@name=’0′]”));
Point coordinates = targetElement.getLocation();
System.out.println(coordinates);

Robot robot = new Robot();
robot.mouseMove(coordinates.getX() + 100,coordinates.getY()+120);
Thread.sleep(2000);

WebElement moveSuccess = driver.findElement(By.id(“GBPEUR”));
if(moveSuccess.isDisplayed()){
System.out.println(“Drag and drop successfully”);
}
}

public void dragAndDrop(WebElement sourceElement, WebElement destinationElement) {
try {
if (sourceElement.isDisplayed() && destinationElement.isDisplayed()) {
Actions action = new Actions(driver);
action.dragAndDrop(sourceElement, destinationElement).build().perform();
} else {
System.out.println(“Element was not displayed to drag”);
}
} catch (StaleElementReferenceException e) {
System.out.println(“Element with ” + sourceElement + “or”+ destinationElement + “is not attached to the page document “+ e.getStackTrace());
} catch (NoSuchElementException e) {
System.out.println(“Element ” + sourceElement + “or”+ destinationElement + ” was not found in DOM ” + e.getStackTrace());
} catch (Exception e) {
System.out.println(“Error occurred while performing drag and drop operation “+ e.getStackTrace());
}
}

@AfterClass
public void tearDown() {
driver.quit();
}
}

Video demo: