Kako povući i ispustiti Selenium (Primjer)

Povucite i ispustite u selenu

Neke web aplikacije imaju funkciju povlačenja web elemenata i ispuštanja na definirano područje ili element. Možemo automatizirati povlačenje i ispuštanje takvih elemenata pomoću Selenium Webdriver.

Sintaksa povuci i ispusti

Klasa Actions ima dvije metode koje podržavaju povlačenje i ispuštanje. Proučimo ih -

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Kako povući i ispustiti Selenium

Evo kako povući i ispustiti element pomoću Selenium Webdriver

U dragAndDrop metodi prosljeđujemo dva parametra –

1. Prvi parametar “Sourcelocator” je element koji trebamo povući
2. Drugi parametar “Destinationlocator” je element na koji trebamo ispustiti prvi element

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

metodom dragAndDrop prosljeđujemo 3 parametra –

1. Prvi parametar “Sourcelocator” je element koji trebamo povući
2. Drugi parametar je vrijednost piksela 2 na osi x^nd element na koji trebamo ispustiti prvi element.
3. Treći parametar je vrijednost piksela y-osi drugog elementa na koji trebamo ispustiti prvi element.

   

Idemo vam praktično pokazati povlačenje i ispuštanje elementa pomoću selenium webdrivera sa sljedeća 3 scenarija

Scenarij 1: element BANK povlači se i ispušta na određenu ćeliju metodom DragAndDrop.

U sljedećem kodu pokrećemo navedeni URL Firefox preglednik, a zatim povucite element BANKA i ispustite ga na blok DEBITNE STRANE metodom 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();		
	}		
}

Objašnjenje koda: U gornjem kodu pokrećemo navedeni URL Firefox preglednik, a zatim povucite element BANKA i ispustite ga na blok DEBITNE STRANE metodom dragAndDrop. Ukratko objašnjeno u nastavku:

Prvo, uhvatimo 1^st element koji trebamo povući u varijablu “Od.”

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

Drugo, hvatamo 2. element na koji trebamo ispustiti 1. element u varijabli "To".

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

Treće, stvaramo objekt klase Actions koristeći metode klase Actions.

Actions act=new Actions(driver);

Za povuci i ispusti element koristimo metodu dragAndDrop klase Actions i prosljeđujemo parametre kao prvi element (Sourcelocator) “From” i drugi element (Destinationlocator) “To”. Ispod linije će se povući 1^st element i ispustite ga na 2^nd element.

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

Izvođenje skripte.

Sada možete izvršiti gornju skriptu jednu po jednu iz eclipse kao što je prikazano na slici ispod.

Ovo je rezultat kada pokrenete skriptu

Scenarij 2: element BANK povlači se i ispušta na određenu ćeliju metodom DragAndDropBy.

U ovom scenariju pokrećemo dani URL u pregledniku, a zatim povlačimo element BANKA i ispuštamo ga na blok DEBIT SIDE metodom dragAndDropBy. Za dragAndDropBy, moramo pronaći piksel elementa.

Kako pronaći Pixel?

Otvorite URL u Chromeu ili FireFox i kliknite na plavu strelicu.

Zatim kliknite bilo koji element za koji želite znati piksel.

Naći ćete piksel iznad elementa kao što je prikazano na slici ispod.

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

NAPOMENA: Vrijednosti piksela mijenjaju se ovisno o razlučivosti zaslona i veličini preglednika. Ova metoda stoga nije pouzdana i nema široku primjenu.

Scenarij 3: Nekoliko elemenata se povlači i ispušta, a zatim se provjerava je li poruka prikazana ili ne.

U sljedećem kodu pokrećemo dati URL u pregledniku, a zatim povlačimo elemente kao što su BANK, SALES, 500 i ispuštamo na odgovarajući blok. Nakon što završimo, provjeravamo izlaznu poruku.

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 izlaza

U Izlazu možete vidjeti da se element povlači i ispušta na definirani element. Možete provjeriti GIF izlaza.

Rezime

• U gornjim vodičima ilustriramo funkciju povlačenja i ispuštanja web aplikacije putem Action metoda u Webdriveru:
• dragAndDrop(lokator izvora, lokator odredišta)
• dragAndDropBy(Sourcelocator, piksel x-osi lokatora odredišta, piksel y-osi lokatora odredišta)
• Za povlačenje i ispuštanje elementa najprije smo upotrijebili metodu DragAndDrop iz klase Actions u kojoj prosljeđujemo 2 parametra, 1^st parametar je element koji trebamo povući, i 2^nd parametar je element na koji trebamo ispustiti 1^st element.
• Drugo, koristili smo metodu dragAndDropBy iz klase Actions u kojoj prosljeđujemo 3 parametra, 1. parametar je element koji trebamo povući, 2^nd parametar je vrijednost piksela x-osi od 2^nd element, 3^rd parametar je vrijednost piksela 2 na osi y^nd element.