Wie man Selen per Drag & Drop einfügt (Beispiel)

Drag & Drop in Selen

Einige Webanwendungen verfügen über eine Funktion zum Ziehen und Ablegen von Webelementen auf einem definierten Bereich oder Element. Mit Selenium Webdriver können wir das Ziehen und Ablegen solcher Elemente automatisieren.

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)

Wie man Selen per Drag & Drop einfügt

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

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

  1. Der erste Parameter „Sourcelocator“ ist das Element, das wir ziehen müssen
  2. 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 –

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

    Drag & Drop in Selenium

Lassen Sie uns Ihnen das Ziehen und Ablegen eines Elements mithilfe des Selenium-Webtreibers mit Follo praktisch zeigenwing 3-Szenarien

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

Im Folgendenwing Code starten wir die angegebene URL in Firefox browser Ziehen Sie dann das BANK-Element und legen Sie es mithilfe der DragAndDrop-Methode auf dem DEBIT SIDE-Block ab.

Drag & Drop in 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();		
	}		
}

Code-Erklärung: Im obigen Code starten wir die angegebene URL in Firefox browser Ziehen Sie dann das BANK-Element und legen Sie es mithilfe der DragAndDrop-Methode auf dem DEBIT SIDE-Block ab. Im Folgenden kurz erklärt:

Zuerst erfassen wir die 1st 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 gezogenst Element und legen Sie es auf dem 2nd Element.

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

Ausführung des Skripts.

Jetzt können Sie das obige Skript einzeln ausführen eclipse wie im folgenden Screenshot gezeigt.

Drag & Drop in Selenium

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

Drag & Drop in Selenium

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.

Drag & Drop in 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();		
 }		
}

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-and-Drop verschoben und anschließend überprüft, ob die Meldung angezeigt wird oder nicht.

Im Folgendenwing Code starten wir die angegebene URL im Browser und ziehen dann die Elemente wie BANK, SALES, 500 per Drag & Drop auf den entsprechenden Block. Sobald wir fertig sind, ü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("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 !!!");					
     	}		
}

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 übergebenst Parameter ist das Element, das wir ziehen müssen, und 2nd Parameter ist das Element, auf dem wir die 1 ablegen müssenst 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, 3nd Parameter ist der X-Achsen-Pixelwert der 2nd Element, 3rd Parameter ist der Y-Achsen-Pixelwert der 2nd Element.