Hvordan dra og slippe inn Selenium (Eksempel)

Dra og slipp inn selen

Noen nettapplikasjoner har en funksjonalitet for å dra nettelementer og slippe dem på et definert område eller element. Vi kan automatisere dra og slipp av slike elementer ved hjelp av Selenium Webdriver.

Dra og slipp syntaks

Actions-klassen har to metoder som støtter Dra og slipp. La oss studere dem-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Hvordan dra og slippe inn Selenium

Her er hvordan du drar og slipper et element ved hjelp av Selenium Webdriver

I dragAndDrop-metoden sender vi de to parameterne –

1. Første parameter "Sourcelocator" er elementet som vi må dra
2. Andre parameter "Destinationlocator" er elementet som vi må slippe det første elementet på

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

dragAndDropBy-metoden sender vi de 3 parameterne -

1. Første parameter "Sourcelocator" er elementet som vi må dra
2. Den andre parameteren er x-aksen pikselverdi av 2^nd element som vi må slippe det første elementet på.
3. Den tredje parameteren er pikselverdien på y-aksen til det andre elementet som vi må slippe det første elementet på.

   

La oss praktisk talt vise deg dra og slipp av et element ved hjelp av selen webdriver med følgende 3 scenarier

Scenario 1: BANK-elementet dras og slippes på den spesifikke cellen ved hjelp av DragAndDrop-metoden.

I den følgende koden starter vi den gitte URL-en i Firefox nettleser og dra deretter BANK-elementet og slipp på DEBIT SIDE-blokken gjennom dragAndDrop-metoden.

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

Kodeforklaring: I koden ovenfor lanserer vi den gitte URL-en i Firefox nettleser og dra deretter BANK-elementet og slipp på DEBIT SIDE-blokken gjennom dragAndDrop-metoden. Kort forklart nedenfor:

Først fanger vi 1^st element som vi må dra inn i variabelen "Fra."

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

For det andre fanger vi det andre elementet som vi må slippe det første elementet på i variabelen "Til".

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

For det tredje lager vi objekt av Actions-klassen ettersom vi bruker metoder for Actions-klassen.

Actions act=new Actions(driver);

For dra og slipp-element bruker vi dragAndDrop-metoden til Actions-klassen og sender parameterne som det første elementet (Sourcelocator) "Fra" og det andre elementet (Destinationlocator) "To". Linjen under vil dra 1^st element og slipp det på 2^nd element.

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

Utførelse av skriptet.

Nå kan du utføre skriptet ovenfor en etter en fra eclipse som vist i skjermbildet nedenfor.

Her er utdataene når du kjører skriptet

Scenario 2: BANK-elementet dras og slippes på den spesifikke cellen ved hjelp av DragAndDropBy-metoden.

I dette scenariet starter vi den gitte URL-en i nettleseren og drar deretter BANK-elementet og slipper på DEBIT SIDE-blokken gjennom dragAndDropBy-metoden. For å draAndDropBy må vi finne pikselen til elementet.

Hvordan finner jeg Pixel?

Åpne nettadressen i Chrome eller FireFox og klikk på den blå fargepilen.

Klikk deretter på et hvilket som helst element du vil vite pikselen for.

Du finner pikselen over elementet som vist i skjermbildet nedenfor.

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

NOTAT: Pikselverdiene endres med skjermoppløsning og nettleserstørrelse. Denne metoden er derfor ikke pålitelig og ikke mye brukt.

Scenario 3: Få elementer dras og slippes og bekrefter deretter at meldingen vises eller ikke.

I den følgende koden starter vi den gitte URL-en i nettleseren og drar deretter elementene som BANK, SALES, 500 og slipp på den respektive blokken. Når det er gjort, bekrefter vi utdatameldingen.

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

Resultatanalyse

I Output kan du se at elementet dras og slippes på det definerte elementet. Du kan sjekke GIF-en til utgangen.

Sammendrag

• I veiledningene ovenfor illustrerer vi dra og slipp-funksjonaliteten til nettapplikasjonen gjennom handlingsmetoder i Webdriver:
• dragAndDrop(Sourcelocator, Destinationlocator)
• dragAndDropBy(Sourcelocator, x-akse piksel av Destinationlocator, y-akse piksel av Destinationlocator)
• For å dra og slippe elementet først brukte vi DragAndDrop-metoden fra Actions-klassen der vi sender de 2 parameterne, 1^st parameter er elementet som vi må dra, og 2^nd parameter er elementet som vi må slippe 1-en på^st element.
• For det andre brukte vi dragAndDropBy-metoden fra Actions-klassen der vi sender de 3 parameterne, den første parameteren er elementet som vi må dra, 1^nd parameteren er x-aksens pikselverdi til 2^nd element, 3^rd parameteren er pikselverdien for y-aksen til 2^nd element.