Cara Menarik dan Melepaskan Selenium (Contoh)

Oleh: Krishna rungta Krishna rungta
Hours Updated

Seret dan Jatuhkan selenium

Beberapa aplikasi web, memiliki fungsi untuk menyeret elemen web dan melepaskannya pada area atau elemen tertentu. Kita dapat mengotomatiskan drag dan drop elemen tersebut menggunakan Selenium driver web.

Seret dan Lepas Sintaks

Kelas Actions memiliki dua metode yang mendukung Drag and Drop. Mari kita pelajari mereka-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Cara Menarik dan Melepaskan Selenium

Berikut cara drag and drop suatu elemen menggunakan Selenium Driver web

Dalam metode dragAndDrop, kami meneruskan dua parameter –

  1. Parameter pertama “Sourcelocator” adalah elemen yang perlu kita tarik
  2. Parameter kedua "Destinationlocator" adalah elemen yang kita perlukan untuk membuang elemen pertama
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

metode dragAndDropBy kami meneruskan 3 parameter –

  1. Parameter pertama “Sourcelocator” adalah elemen yang perlu kita tarik
  2. Parameter kedua adalah nilai piksel sumbu x 2nd elemen di mana kita perlu membuang elemen pertama.
  3. Parameter ketiga adalah nilai piksel sumbu y dari elemen ke-2 yang harus kita hilangkan elemen pertama.

    Seret dan Lepas Selenium

Mari kita tunjukkan secara praktis drag and drop suatu elemen menggunakan selenium webdriver dengan 3 skenario berikut

Skenario 1: Elemen BANK diseret dan dilepas pada sel tertentu dengan metode DragAndDrop.

Dalam kode berikut, kami meluncurkan URL yang diberikan di Firefox browser lalu seret elemen BANK dan letakkan pada blok SISI DEBIT melalui metode dragAndDrop.

Seret dan Lepas 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();		
	}		
}

Penjelasan Kode: Dalam kode di atas kami meluncurkan URL yang diberikan Firefox browser lalu seret elemen BANK dan letakkan pada blok DEBIT SIDE melalui metode dragAndDrop. Penjelasan singkatnya di bawah ini:

Pertama, kami menangkap 1st elemen yang perlu kita seret ke dalam variabel “Dari.”

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

Kedua, kita menangkap elemen ke-2 yang mana kita perlu membuang elemen pertama ke dalam variabel “Ke”.

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

Ketiga, kita membuat objek kelas Actions saat kita menggunakan metode kelas Actions.

Actions act=new Actions(driver);

Untuk elemen drag and drop kami menggunakan metode dragAndDrop dari kelas Actions dan meneruskan parameter sebagai elemen pertama (Sourcelocator) “From” dan elemen kedua (Destinationlocator) “To”. Garis di bawah akan menyeret 1st elemen dan letakkan di 2nd elemen.

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

Eksekusi naskah.

Sekarang Anda dapat menjalankan skrip di atas satu per satu dari Eclipse seperti yang ditunjukkan pada tangkapan layar di bawah ini.

Seret dan Lepas Selenium

Berikut adalah output saat Anda menjalankan skrip

Seret dan Lepas Selenium

ARTIKEL TERKAIT

Skenario 2: Elemen BANK diseret dan dilepas pada sel tertentu dengan metode DragAndDropBy.

Dalam skenario ini, kami meluncurkan URL yang diberikan di browser dan kemudian menyeret elemen BANK dan melepaskan blok SISI DEBIT melalui metode dragAndDropBy. Untuk dragAndDropBy, kita perlu mencari piksel elemennya.

Bagaimana cara menemukan Piksel?

Buka URL di Chrome atau FireFox dan klik panah warna Biru.

Selanjutnya klik pada elemen mana pun yang ingin Anda ketahui pikselnya.

Anda akan menemukan piksel di atas elemen seperti yang ditunjukkan pada gambar di bawah.

Seret dan Lepas 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();		
 }		
}

CATATAN: Nilai piksel berubah seiring dengan resolusi layar dan ukuran browser. Oleh karena itu, metode ini tidak dapat diandalkan dan tidak banyak digunakan.

Skenario 3: Beberapa elemen diseret dan dijatuhkan lalu diverifikasi apakah pesan tersebut ditampilkan atau tidak.

Dalam kode berikut, kami meluncurkan URL yang diberikan di browser lalu menyeret elemen seperti BANK, SALES, 500 dan meletakkannya di blok yang sesuai. Setelah selesai, kami memverifikasi pesan keluaran.

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 !!!");					
     	}		
}

Analisis keluaran

Di Output, Anda dapat melihat elemen diseret dan dilepas pada elemen yang ditentukan. Anda dapat memeriksa GIF keluarannya.

Kesimpulan

  • Dalam tutorial di atas, kami mengilustrasikan fungsionalitas drag and drop aplikasi web melalui metode Action di Webdriver:
  • dragAndDrop(Pencari Sumber, Pencari Tujuan)
  • dragAndDropBy(Sourcelocator, piksel sumbu x dari Destinationlocator, piksel sumbu y dari Destinationlocator)
  • Untuk menarik dan melepas elemen terlebih dahulu kita menggunakan metode DragAndDrop dari kelas Actions di mana kita meneruskan 2 parameter, 1st parameter adalah elemen yang perlu kita tarik, dan 2nd parameter adalah elemen yang perlu kita hilangkan angka 1st elemen.
  • Kedua, kita menggunakan metode dragAndDropBy dari kelas Actions di mana kita meneruskan 3 parameter, parameter pertama adalah elemen yang perlu kita tarik, 1nd parameternya adalah nilai piksel sumbu x dari 2nd elemen, 3rd parameternya adalah nilai piksel sumbu y dari 2nd elemen.

Anda mungkin ingin: