So führen Sie Drag-and-Drop durch Selenium (Beispiel)

Drag & Drop in Selen

Einige Webanwendungen verfügen über eine Funktion zum Ziehen und Ablegen von Webelementen auf einem definierten Bereich oder Element. Wir können das Drag & Drop solcher Elemente automatisieren Selenium Webtreiber.

Drag-and-Drop-Syntax

Die Actions-Klasse verfügt über zwei Methoden, die Drag & Drop unterstützen. Lasst uns sie studieren-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

So führen Sie Drag-and-Drop durch Selenium

Hier erfahren Sie, wie Sie ein Element per Drag & Drop verschieben Selenium Webtreiber

In der DragAndDrop-Methode übergeben wir die beiden Parameter –

Der erste Parameter „Sourcelocator“ ist das Element, das wir ziehen müssen
Der zweite Parameter „Destinationlocator“ ist das Element, auf dem wir das erste Element ablegen müssen

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

Mit der DragAndDropBy-Methode übergeben wir die 3 Parameter –

Der erste Parameter „Sourcelocator“ ist das Element, das wir ziehen müssen
Der zweite Parameter ist der X-Achsen-Pixelwert der 2^nd Element, auf dem wir das erste Element ablegen müssen.
Der dritte Parameter ist der Y-Achsen-Pixelwert des zweiten Elements, auf dem wir das erste Element ablegen müssen.

Wir zeigen Ihnen das Drag & Drop eines Elements mithilfe des Selenium-Webtreibers anhand der folgenden 3 Szenarien

Szenario 1: Das BANK-Element wird mit der DragAndDrop-Methode per Drag-and-Drop auf die spezifische Zelle gezogen.

Im folgenden Code starten wir die angegebene URL in Firefox Browser und ziehen Sie dann das Element BANK per Drag & Drop auf den Block DEBIT SIDE.

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("https://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();		
	}		
}

Code-Erklärung: Im obigen Code starten wir die angegebene URL in Firefox Browser und ziehen Sie dann das BANK-Element per Drag & Drop auf den DEBIT SIDE-Block. Im Folgenden kurz erklärt:

Zuerst erfassen wir die 1^st Element, das wir in die Variable „Von“ ziehen müssen.

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

Zweitens erfassen wir das zweite Element, auf dem wir das erste Element in der Variablen „To“ ablegen müssen.

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

Drittens erstellen wir ein Objekt der Actions-Klasse, während wir Methoden der Actions-Klasse verwenden.

Actions act=new Actions(driver);

Für Drag-and-Drop-Elemente verwenden wir die DragAndDrop-Methode der Actions-Klasse und übergeben die Parameter als erstes Element (Sourcelocator) „From“ und als zweites Element (Destinationlocator) „To“. Unterhalb der Zeile wird die 1 gezogen^st Element und legen Sie es auf dem 2^nd Element.

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

Ausführung des Skripts.

Jetzt können Sie die obigen Skripts nacheinander von Eclipse aus ausführen, wie im folgenden Screenshot gezeigt.

Hier ist die Ausgabe, wenn Sie das Skript ausführen

Szenario 2: Das BANK-Element wird mit der DragAndDropBy-Methode per Drag-and-Drop auf die bestimmte Zelle gezogen.

In diesem Szenario starten wir die angegebene URL im Browser und ziehen dann das BANK-Element per DragAndDropBy-Methode auf den DEBIT SIDE-Block. Für DragAndDropBy müssen wir das Pixel des Elements finden.

Wie finde ich Pixel?

Öffnen Sie die URL in Chrome oder FireFox und klicken Sie auf den blauen Farbpfeil.

Klicken Sie anschließend auf ein beliebiges Element, dessen Pixel Sie wissen möchten.

Sie finden das Pixel über dem Element, wie im folgenden Screenshot gezeigt.

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("https://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();		
 }		
}

Anmerkungen: Die Pixelwerte ändern sich je nach Bildschirmauflösung und Browsergröße. Diese Methode ist daher nicht zuverlässig und nicht weit verbreitet.

Szenario 3: Einige Elemente werden per Drag & Drop verschoben und anschließend überprüft, ob die Nachricht angezeigt wird oder nicht.

Im folgenden Code starten wir die angegebene URL im Browser und ziehen dann die Elemente wie BANK, SALES, 500 und legen sie im entsprechenden Block ab. Sobald dies erledigt ist, überprüfen wir die Ausgabenachricht.

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("https://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 !!!");					
     	}		
}

Ausgabeanalyse

In der Ausgabe können Sie sehen, dass das Element per Drag-and-Drop auf das definierte Element gezogen wird. Sie können das GIF der Ausgabe überprüfen.

Zusammenfassung

In den obigen Tutorials veranschaulichen wir die Drag-and-Drop-Funktionalität der Webanwendung durch Aktionsmethoden in Webdriver:
DragAndDrop(Sourcelocator, Destinationlocator)
dragAndDropBy(Sourcelocator, X-Achsen-Pixel von Destinationlocator, Y-Achsen-Pixel von Destinationlocator)
Um das Element zuerst per Drag & Drop zu verschieben, haben wir die DragAndDrop-Methode aus der Actions-Klasse verwendet, in der wir die beiden Parameter 2 übergeben^st Parameter ist das Element, das wir ziehen müssen, und 2^nd Parameter ist das Element, auf dem wir die 1 ablegen müssen^st Element.
Zweitens haben wir die Methode „dragAndDropBy“ aus der Klasse „Actions“ verwendet, in der wir die drei Parameter übergeben. Der erste Parameter ist das Element, das wir ziehen müssen, 3^nd Parameter ist der X-Achsen-Pixelwert der 2^nd Element, 3^rd Parameter ist der Y-Achsen-Pixelwert der 2^nd Element.