Cách kéo và thả một phần tử trong Selenium WebDriver

Hôm nay mình trở lại với các bạn về chuỗi topic liên quan đến Selenium Webdriver. Trong bài viết này mình sẽ giới thiệu với các bạn về cách kéo thả phần tử trong Selenium Webdriver.
Chắc hẳn khi bạn sử dụng một website thì bạn gặp trường hợp kéo thả một đối tượng từ nơi này sang nơi khác.

Hoặc trong một list danh sách có nhiều item, bạn muốn sắp xếp lại chúng bằng cách kéo thả:

Selelnium Webdriver đã hỗ trợ thư viện cho việc kéo thả là:

openqa.selenium.interactions.Actions

Nó sẽ xử lí các sự kiện của con chuột và bàn phím như: click, doubleClick, sendKeys,... Dưới đây là cách sử dụng:

Actions builder = new Actions(driver);
		        Action dragAndDrop = builder.clickAndHold(dragElementFrom)
		            .moveToElement(dropElementTo)
		            .release(dropElementTo)
		            .build();
		        dragAndDrop.perform();  

Đầu tiên chúng ta thực hiện click và giữ đối tượng nguồn bằng clickAndHold(dragElementFrom). Sau đó thực hiện di chuyển đến điểm giữa của đối tượng đích với moveToElement(dropElementTo). Tại điểm hiện tại thực hiện thả chuột release(dropElementTo) và build ra các hành động trước đó, cuối cùng là thực hiện hành động bằng phương thức: perform();

Dưới đây là code hoàn chỉnh:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class DragAndDrop {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		System.setProperty("webdriver.chrome.driver",
		"C:\\Users\\dienbui96\\Downloads\\Setting\\selenium\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();
		
		driver.get("http://only-testing-blog.blogspot.in/2014/09/drag-and-drop.html");
	
		  WebElement dragElementFrom = driver.findElement(By.xpath("//div[@id='dragdiv']"));
		 
		  WebElement dropElementTo = driver.findElement(By.xpath("//div[@id='dropdiv']"));		  		
		  Actions builder = new Actions(driver);
		        Action dragAndDrop = builder.clickAndHold(dragElementFrom)
		            .moveToElement(dropElementTo)
		            .release(dropElementTo)
		            .build();
		        dragAndDrop.perform();       
	}
}

Dưới đây là demo mà mình chuẩn bị. Chúc các bạn sẽ học vui! https://drive.google.com/file/d/17pRuzmPUQC-hChVlbFTHpqbw4e4VDmhK/view

Tài liệu tham khảo: http://www.software-testing-tutorials-automation.com/2014/09/how-to-drag-and-drop-element-in.html https://www.softwaretestingmaterial.com/drag-and-drop-using-actions-class-in-selenium/ https://www.guru99.com/drag-drop-selenium.html