Jak przeciągnąć i upuścić Selenium (Przykład)

Przeciągnij i upuść w selenie

Niektóre aplikacje internetowe mają funkcję przeciągania elementów internetowych i upuszczania ich na określonym obszarze lub elemencie. Możemy zautomatyzować przeciąganie i upuszczanie takich elementów za pomocą Selenium Sterownik internetowy.

Przeciągnij i upuść składnia

Klasa Actions ma dwie metody obsługujące przeciąganie i upuszczanie. Przestudiujmy je-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Jak przeciągnąć i upuścić Selenium

Oto jak przeciągnąć i upuścić element za pomocą Selenium Sterownik internetowy

W metodzie dragAndDrop przekazujemy dwa parametry –

1. Pierwszy parametr „Sourcelocator” to element, który musimy przeciągnąć
2. Drugi parametr „Destinationlocator” to element, na który musimy upuścić pierwszy element

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

metodą dragAndDropBy przekazujemy 3 parametry –

1. Pierwszy parametr „Sourcelocator” to element, który musimy przeciągnąć
2. Drugi parametr to wartość w pikselach osi X wynosząca 2^nd element, na który musimy upuścić pierwszy element.
3. Trzeci parametr to wartość w pikselach osi Y drugiego elementu, na który musimy upuścić pierwszy element.

   

Pokażemy Ci w praktyce przeciąganie i upuszczanie elementu za pomocą sterownika internetowego Selenium, korzystając z następujących 3 scenariuszy

Scenariusz 1: Element BANK jest przeciągany i upuszczany na konkretną komórkę metodą DragAndDrop.

W poniższym kodzie uruchamiamy podany adres URL w Firefox przeglądarki, a następnie przeciągnij element BANK i upuść go na bloku DEBIT SIDE za pomocą metody 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("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();		
	}		
}

Wyjaśnienie kodu: W powyższym kodzie uruchamiamy podany URL w Firefox przeglądarka, a następnie przeciągnij element BANK i upuść na bloku DEBIT SIDE za pomocą metody dragAndDrop. Wyjaśniono pokrótce poniżej:

Najpierw zdobywamy 1^st element, który musimy przeciągnąć do zmiennej „From”.

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

Po drugie, przechwytujemy drugi element, na który musimy upuścić pierwszy element w zmiennej „To”.

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

Po trzecie, tworzymy obiekt klasy Actions, korzystając z metod klasy Actions.

Actions act=new Actions(driver);

Do elementu przeciągnij i upuść używamy metody dragAndDrop klasy Actions i przekazujemy parametry jako pierwszy element (Sourcelocator) „Fro” i drugi element (Destinationlocator) „To”. Poniższa linia przeciągnie 1^st element i upuść go na 2^nd elementem.

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

Wykonanie skryptu.

Teraz możesz wykonać powyższy skrypt jeden po drugim z poziomu Eclipse, jak pokazano na zrzucie ekranu poniżej.

Oto wynik działania skryptu

Scenariusz 2: Element BANK jest przeciągany i upuszczany na określoną komórkę metodą DragAndDropBy.

W tym scenariuszu uruchamiamy podany adres URL w przeglądarce, a następnie przeciągamy element BANK i upuszczamy na blok DEBIT SIDE metodą dragAndDropBy. Aby przeciągnąćAndDropBy, musimy znaleźć piksel elementu.

Jak znaleźć Pixela?

Otwórz adres URL w Chrome lub FireFox i kliknij niebieską strzałkę.

Następnie kliknij dowolny element, dla którego chcesz poznać piksel.

Piksel znajdziesz nad elementem, jak pokazano na poniższym zrzucie ekranu.

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

UWAGA: Wartości pikseli zmieniają się wraz z rozdzielczością ekranu i rozmiarem przeglądarki. Metoda ta nie jest zatem niezawodna i mało stosowana.

Scenariusz 3: Przeciągamy i upuszczamy kilka elementów, a następnie sprawdzamy, czy komunikat został wyświetlony.

W poniższym kodzie uruchamiamy podany adres URL w przeglądarce, a następnie przeciągamy elementy takie jak BANK, SALES, 500 i upuszczamy na odpowiedni blok. Po wykonaniu tej czynności weryfikujemy komunikat wyjściowy.

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

Analiza wyników

W wyjściu widać, że element jest przeciągany i upuszczany na zdefiniowany element. Możesz sprawdzić GIF wyjścia.

Podsumowanie

• W powyższych samouczkach ilustrujemy funkcję przeciągania i upuszczania aplikacji internetowej za pomocą metod akcji w Webdriver:
• dragAndDrop(lokator źródła, lokalizator miejsca docelowego)
• dragAndDropBy(Sourcelocator, piksel na osi x lokalizatora docelowego, piksel na osi y lokalizatora docelowego)
• Aby najpierw przeciągnąć i upuścić element wykorzystaliśmy metodę DragAndDrop z klasy Actions, w której przekazujemy 2 parametry, 1^st parametr to element, który musimy przeciągnąć, oraz 2^nd parametr jest elementem, na który musimy upuścić 1^st elementem.
• Po drugie użyliśmy metody dragAndDropBy z klasy Actions w której przekazujemy 3 parametry, pierwszy parametr to element który mamy przeciągnąć, 1^nd parametrem jest wartość piksela na osi x wartości 2^nd pierwiastek, 3^rd parametrem jest wartość piksela na osi Y wartości 2^nd elementem.