Cách kéo và thả vào Selenium (Thí dụ)

Kéo và thả trong selen

Một số ứng dụng web có chức năng kéo các thành phần web và thả chúng vào vùng hoặc thành phần được xác định. Chúng ta có thể tự động kéo và thả các phần tử đó bằng cách sử dụng Selenium Webdriver.

Cú pháp kéo và thả

Lớp Actions có hai phương thức hỗ trợ Kéo và Thả. Hãy nghiên cứu chúng-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Cách kéo và thả vào Selenium

Đây là cách kéo và thả một phần tử bằng cách sử dụng Selenium webdriver

Trong phương thức dragAndDrop, chúng ta truyền hai tham số –

  1. Tham số đầu tiên “Sourcelocator” là phần tử chúng ta cần kéo
  2. Tham số thứ hai “Destinationlocator” là phần tử mà chúng ta cần thả phần tử đầu tiên vào đó
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

Phương thức dragAndDropBy chúng ta truyền 3 tham số –

  1. Tham số đầu tiên “Sourcelocator” là phần tử chúng ta cần kéo
  2. Tham số thứ hai là giá trị pixel trục x của 2nd phần tử mà chúng ta cần bỏ phần tử đầu tiên vào đó.
  3. Tham số thứ ba là giá trị pixel trục y của phần tử thứ 2 mà chúng ta cần thả phần tử đầu tiên vào đó.

    Kéo và thả vào Selenium

Chúng tôi sẽ hướng dẫn bạn cách kéo và thả một phần tử bằng selenium webdriver với 3 tình huống sau

Tình huống 1: Phần tử NGÂN HÀNG được kéo và thả trên ô cụ thể bằng phương pháp DragAndDrop.

Trong đoạn mã sau, chúng tôi khởi chạy URL đã cho trong Firefox trình duyệt và sau đó kéo phần tử BANK và thả vào khối DEBIT SIDE thông qua phương thức dragAndDrop.

Kéo và thả vào Selenium

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.Actions;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			

    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe ");					
         driver= new ChromeDriver();					
         driver.get("http://demo.guru99.com/test/drag_drop.html");					
         
		//Element which needs to drag.    		
        	WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
         //Element on which need to drop.		
         WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));					
         		
         //Using Action class for drag and drop.		
         Actions act=new Actions(driver);					

	//Dragged and dropped.		
         act.dragAndDrop(From, To).build().perform();		
	}		
}

Giải thích mã: Trong đoạn mã trên, chúng tôi khởi chạy URL đã cho trong Firefox trình duyệt và sau đó kéo phần tử BANK và thả vào khối DEBIT SIDE thông qua phương pháp dragAndDrop. Giải thích ngắn gọn bên dưới:

Đầu tiên, chúng tôi nắm bắt 1st phần tử mà chúng ta cần kéo vào biến “Từ”.

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

Thứ hai, chúng ta nắm bắt phần tử thứ 2 mà chúng ta cần thả phần tử thứ 1 vào biến “To”.

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

Thứ ba, chúng ta tạo đối tượng của lớp Actions khi chúng ta sử dụng các phương thức của lớp Actions.

Actions act=new Actions(driver);

Đối với phần tử kéo và thả, chúng tôi sử dụng phương thức dragAndDrop của lớp Actions và chuyển các tham số dưới dạng phần tử đầu tiên (Sourcelocator) “From” và phần tử thứ hai (Destinationlocator) “To”. Dòng dưới đây sẽ kéo 1st phần tử và thả nó vào 2nd thành phần.

act.dragAndDrop(From, To).build().perform();

Thực thi kịch bản.

Bây giờ bạn có thể thực thi từng đoạn lệnh trên từ Eclipse như thể hiện trong ảnh chụp màn hình bên dưới.

Kéo và thả vào Selenium

Đây là kết quả khi bạn chạy tập lệnh

Kéo và thả vào Selenium

Tình huống 2: Phần tử NGÂN HÀNG được kéo và thả trên một ô cụ thể bằng phương thức DragAndDropBy.

Trong trường hợp này, chúng tôi khởi chạy URL đã cho trong trình duyệt, sau đó kéo phần tử NGÂN HÀNG và thả vào khối BÊN NỢ thông qua phương thức dragAndDropBy. Để dragAndDropBy, chúng ta cần tìm pixel của phần tử.

Làm cách nào để tìm Pixel?

Mở URL trong Chrome hoặc FireFox và nhấp vào mũi tên màu xanh.

Tiếp theo, nhấp vào bất kỳ phần tử nào mà bạn muốn biết pixel.

Bạn sẽ tìm thấy pixel phía trên phần tử như trong ảnh chụp màn hình bên dưới.

Kéo và thả vào Selenium

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.Actions;		
import org.testng.annotations.Test;		


public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("http://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
        WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));					
      
        //Using Action class for drag and drop.		
        Actions act=new Actions(driver);					
      
        //Drag and Drop by Offset.		
        act.dragAndDropBy(From,135, 40).build().perform();		
 }		
}

LƯU Ý: Giá trị pixel thay đổi theo độ phân giải màn hình và kích thước trình duyệt. Do đó phương pháp này không đáng tin cậy và không được sử dụng rộng rãi.

Tình huống 3: Một số phần tử được kéo và thả rồi xác minh xem thông báo có được hiển thị hay không.

Trong đoạn mã sau, chúng ta khởi chạy URL đã cho trong trình duyệt rồi kéo các phần tử như BANK, SALES, 500 và thả vào khối tương ứng. Sau khi hoàn tất, chúng ta xác minh thông báo đầu ra.

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.Actions;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
    	 System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("http://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
     	 WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
     	//Element(DEBIT SIDE) on which need to drop.		
     	WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li"));					
      
	//Element(SALES) which need to drag.		
     	WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a"));
        
	//Element(CREDIT SIDE) on which need to drop.  		
     	WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li"));					
     
     	//Element(500) which need to drag.		
        WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(DEBIT SIDE) on which need to drop.		
     	WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li"));					
         
	//Element(500) which need to drag.		
        WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(CREDIT SIDE) on which need to drop.		
     	WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li"));					
      
	//Using Action class for drag and drop.		
     	Actions act=new Actions(driver);					

	//BANK drag and drop.		
     	act.dragAndDrop(From1, To1).build().perform();
        
	//SALES drag and drop.		
     	act.dragAndDrop(From2, To2).build().perform();
        
	//500 drag and drop debit side.		
     	act.dragAndDrop(From3, To3).build().perform();	
        
	//500 drag and drop credit side. 		
     	act.dragAndDrop(From4, To4).build().perform();		
      
	//Verifying the Perfect! message.		
	if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed())							
     	{		
         	System.out.println("Perfect Displayed !!!");					
     	}
		else
     	{
        	System.out.println("Perfect not Displayed !!!");					
     	}		
}

Phân tích đầu ra

Trong Output, bạn có thể thấy phần tử được kéo và thả trên phần tử đã xác định. Bạn có thể kiểm tra GIF của đầu ra.

Tổng kết

  • Trong các bài hướng dẫn trên, chúng tôi minh họa chức năng kéo và thả của ứng dụng web thông qua các phương thức Action trong Webdriver:
  • dragAndDrop(Bộ định vị nguồn, Bộ định vị đích)
  • dragAndDropBy(Bộ định vị nguồn, pixel trục x của Bộ định vị đích, pixel trục y của Bộ định vị đích)
  • Để kéo và thả phần tử trước tiên, chúng tôi sử dụng phương thức DragAndDrop từ lớp Actions trong đó chúng tôi truyền 2 tham số, 1st tham số là phần tử mà chúng ta cần kéo và 2nd tham số là phần tử mà chúng ta cần bỏ số 1st thành phần.
  • Thứ hai, chúng ta đã sử dụng phương thức dragAndDropBy từ lớp Actions trong đó chúng ta truyền 3 tham số, tham số thứ 1 là phần tử mà chúng ta cần kéo, 2nd tham số là giá trị pixel trục x của 2nd phần tử, 3rd tham số là giá trị pixel trục y của 2nd thành phần.