Come trascinare e rilasciare Selenium (Esempio)

Trascina e rilascia il selenio

Alcune applicazioni web hanno una funzionalità per trascinare elementi web e rilasciarli su un'area o un elemento definito. Possiamo automatizzare il drag and drop di tali elementi utilizzando Selenium Webdriver.

Sintassi trascina e rilascia

La classe Actions dispone di due metodi che supportano il trascinamento della selezione. Studiamoli-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Come trascinare e rilasciare Selenium

Ecco come trascinare e rilasciare un elemento utilizzando Selenium Webdriver

Nel metodo dragAndDrop, passiamo i due parametri:

Il primo parametro "Sourcelocator" è l'elemento che dobbiamo trascinare
Il secondo parametro “Destinationlocator” è l'elemento su cui dobbiamo rilasciare il primo elemento

Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

metodo dragAndDropBy passiamo i 3 parametri –

Il primo parametro "Sourcelocator" è l'elemento che dobbiamo trascinare
Il secondo parametro è il valore dei pixel dell'asse x di 2^nd elemento su cui dobbiamo rilasciare il primo elemento.
Il terzo parametro è il valore del pixel dell'asse y del 2° elemento su cui dobbiamo rilasciare il primo elemento.

Ti mostreremo praticamente il trascinamento e la selezione di un elemento utilizzando il webdriver Selenium con i seguenti 3 scenari

Scenario 1: l'elemento BANK viene trascinato e rilasciato sulla cella specifica tramite il metodo DragAndDrop.

Nel codice seguente, lanciamo l'URL specificato in Firefox browser, quindi trascinare l'elemento BANK e rilasciarlo sul blocco DEBIT SIDE tramite il metodo dragAndDrop.

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

Spiegazione del codice: Nel codice sopra lanciamo l'URL indicato in Firefox browser e quindi trascinare l'elemento BANK e rilasciarlo sul blocco DEBIT SIDE tramite il metodo dragAndDrop. Spiegato brevemente di seguito:

Innanzitutto, catturiamo l'1^st elemento che dobbiamo trascinare nella variabile “From”.

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

In secondo luogo, catturiamo il 2° elemento su cui dobbiamo rilasciare il 1° elemento nella variabile “To”.

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

In terzo luogo, creiamo l'oggetto della classe Actions mentre utilizziamo i metodi della classe Actions.

Actions act=new Actions(driver);

Per l'elemento drag and drop utilizziamo il metodo dragAndDrop della classe Actions e passiamo i parametri come primo elemento (Sourcelocator) "From" e secondo elemento (Destinationlocator) "To". La riga sotto trascinerà l'1^st elemento e rilasciarlo su 2^nd elemento.

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

Esecuzione dello script.

Ora puoi eseguire uno alla volta gli script soprastanti da Eclipse, come mostrato nello screenshot qui sotto.

Ecco l'output quando esegui lo script

Scenario 2: l'elemento BANK viene trascinato e rilasciato sulla cella specifica tramite il metodo DragAndDropBy.

In questo scenario, lanciamo l'URL fornito nel browser, quindi trasciniamo l'elemento BANK e lo rilasciamo sul blocco DEBIT SIDE tramite il metodo dragAndDropBy. Per dragAndDropBy, dobbiamo trovare il pixel dell'elemento.

Come trovare Pixel?

Apri l'URL in Chrome o FireFox e fare clic sulla freccia di colore Blu.

Successivamente fai clic su qualsiasi elemento di cui desideri conoscere il pixel.

Troverai il pixel sopra l'elemento come mostrato nello screenshot qui sotto.

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

NOTA: I valori dei pixel cambiano con la risoluzione dello schermo e le dimensioni del browser. Questo metodo quindi non è affidabile e non è ampiamente utilizzato.

Scenario 3: alcuni elementi vengono trascinati e rilasciati e quindi verificare che il messaggio venga visualizzato o meno.

Nel seguente codice, lanciamo l'URL specificato nel browser e poi trasciniamo gli elementi come BANK, SALES, 500 e rilasciamo sul rispettivo blocco. Una volta fatto, verifichiamo il messaggio di output.

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

Analisi dell'output

In Output, puoi vedere che l'elemento viene trascinato e rilasciato sull'elemento definito. Puoi controllare la GIF dell'output.

Sommario

Nei tutorial sopra, illustriamo la funzionalità di trascinamento della selezione dell'applicazione web tramite i metodi di azione in Webdriver:
dragAndDrop(Locatore di origine, Localizzatore di destinazione)
dragAndDropBy(Sourcelocator, pixel dell'asse x di Destinationlocator, pixel dell'asse y di Destinationlocator)
Per trascinare e rilasciare prima l'elemento abbiamo utilizzato il metodo DragAndDrop della classe Actions in cui passiamo i 2 parametri, 1^st il parametro è l'elemento che dobbiamo trascinare e 2^nd Il parametro è l'elemento su cui dobbiamo rilasciare 1^st elemento.
In secondo luogo, abbiamo utilizzato il metodo dragAndDropBy della classe Actions in cui passiamo i 3 parametri, il primo parametro è l'elemento che dobbiamo trascinare, 1^nd Il parametro è il valore del pixel dell'asse x di 2^nd elemento, 3^rd Il parametro è il valore del pixel dell'asse y del 2^nd elemento.

Potrebbe piacerti: