Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay mình sẽ tiếp tục giới đến các bạn cách Drag and drop element trong Selenium Webdriver. Ở bài này, mình sẽ đi qua những nội dung như sau:
1. 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. Ví dụ như:
- 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?
2. Giải pháp
Selelnium Webdriver đã hỗ trợ thư viện là openqa.selenium.interactions.Actions để 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ư sau:
public void dragAndDrop1(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();Giải thích:
- 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
3. Source demo
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
Source demo:
package org.example.Topic39;
import org.openqa.selenium.*;
import org.openqa.selenium.Point;
import org.openqa.selenium.chrome.ChromeDriver;
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;
import java.time.Duration;
public class DragAnDrop {
WebDriver driver;
@BeforeClass
public void beforeClass() {
driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.manage().window().maximize();
}
@Test
public void dragAndDropAnElement01() throws Exception {
driver.get("http://jqueryui.com/droppable/");
Thread.sleep(5000);
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
public void dragAndDropAnElement02() throws Exception {
driver.get("http://demos.telerik.com/kendo-ui/dragdrop/angular");
Thread.sleep(5000);
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
public void dragAndDropAnElement03() throws Exception {
driver.get("http://dhtmlx.com/docs/products/dhtmlxTree/");
Thread.sleep(5000);
driver.switchTo().frame(0);
WebElement elementToMove = driver.findElement(By.xpath("//div[@id='treeSource']//span[text()='Ian Rankin']"));
Actions builder = new Actions(driver);
Action drag = builder.clickAndHold(elementToMove).build();
drag.perform();
Thread.sleep(5000);
WebElement moveToElement = driver.findElement(By.xpath("//div[@id='treeSource']//span[text()='James Johns']"));
Actions builder2 = new Actions(driver);
Action dragAndDrop = builder2.moveToElement(moveToElement).release(moveToElement).build();
dragAndDrop.perform();
Thread.sleep(5000);
}
@Test
public void dragAndDropAnElement04() throws Exception {
driver.get("http://dhtmlx.com/docs/products/dhtmlxTree/");
Thread.sleep(5000);
driver.switchTo().frame(0);
WebElement elementToMove = driver.findElement(By.xpath("//div[@id='treeSource']//span[text()='Ian Rankin']"));
Actions builder = new Actions(driver);
Action drag = builder.clickAndHold(elementToMove).build();
drag.perform();
Thread.sleep(5000);
WebElement moveToElement = driver.findElement(By.xpath("//div[@id='treeTarget']"));
Actions builder2 = new Actions(driver);
Action dragAndDrop = builder2.moveToElement(moveToElement).release(moveToElement).build();
dragAndDrop.perform();
Thread.sleep(5000);
}
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 afterClass() {
driver.quit();
}
}
4. Lời kết
Như vậy chúng ta đã tìm hiểu qua cách Drag and drop element trong Selenium Webdriver. Các bạn hãy xem lại ví dụ trên và làm lại 1 lần nữa để hiểu bài hơn nhé. Mình hy vọng bài viết này sẽ hữu ích cho các bạn. Cảm ơn các bạn đã theo dõi bài viết của mình. Hẹn gặp lại các bạn ở những chủ đề tiếp theo.
Nguồn: