Sådan trækkes og slippes ind Selenium (Eksempel)

Af: Krishna Rungta Krishna Rungta
Hours Opdateret

Træk og slip selen ind

Nogle webapplikationer har en funktionalitet til at trække webelementer og slippe dem på defineret område eller element. Vi kan automatisere træk og slip af sådanne elementer ved hjælp af Selenium Webdriver.

Træk og slip syntaks

Actions-klassen har to metoder, der understøtter træk og slip. Lad os studere dem-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Sådan trækkes og slippes ind Selenium

Her er, hvordan du trækker og slipper et element ved hjælp af Selenium Webdriver

I dragAndDrop-metoden videregiver vi de to parametre -

  1. Første parameter "Sourcelocator" er det element, som vi skal trække
  2. Anden parameter "Destinationlocator" er det element, som vi skal slippe det første element på
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy-metoden sender vi de 3 parametre –

  1. Første parameter "Sourcelocator" er det element, som vi skal trække
  2. Den anden parameter er x-aksens pixelværdi af 2nd element, som vi skal slippe det første element på.
  3. Den tredje parameter er y-aksens pixelværdi for det 2. element, hvorpå vi skal slippe det første element.

    Træk og slip ind Selenium

Lad os praktisk talt vise dig træk og slip af et element ved hjælp af selen webdriveren med følgende 3 scenarier

Scenarie 1: BANK-elementet trækkes og slippes på den specifikke celle ved hjælp af DragAndDrop-metoden.

I den følgende kode starter vi den givne URL i Firefox browser og træk derefter BANK-elementet og slip på DEBIT SIDE-blokken gennem dragAndDrop-metoden.

Træk og slip ind 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();		
	}		
}

Kodeforklaring: I ovenstående kode lancerer vi den givne URL i Firefox browser og træk derefter BANK-elementet og slip på DEBIT SIDE-blokken gennem dragAndDrop-metoden. Forklaret kort nedenfor:

Først fanger vi 1st element, som vi skal trække i variabel "Fra."

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

For det andet fanger vi det 2. element, som vi skal slippe det 1. element på i variabel "To".

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

For det tredje opretter vi objekt af Actions-klassen, da vi bruger metoder fra Actions-klassen.

Actions act=new Actions(driver);

Til træk og slip-elementer bruger vi dragAndDrop-metoden i Actions-klassen og sender parametrene som det første element (Sourcelocator) "From" og det andet element (Destinationlocator) "To". Nedenstående linje vil trække 1st element og slip det på 2nd element.

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

Udførelse af scriptet.

Nu kan du udføre ovenstående script én efter én fra eclipse som vist i nedenstående skærmbillede.

Træk og slip ind Selenium

Her er outputtet, når du kører scriptet

Træk og slip ind Selenium

RELATEREDE ARTIKLER

Scenarie 2: BANK-elementet trækkes og slippes på den specifikke celle ved hjælp af DragAndDropBy-metoden.

I dette scenarie starter vi den givne URL i browseren og trækker derefter BANK-elementet og slipper på DEBIT SIDE-blokken gennem dragAndDropBy-metoden. For at dragAndDropBy skal vi finde elementets pixel.

Hvordan finder jeg Pixel?

Åbn URL'en i Chrome eller FireFox og klik på den blå farvepil.

Klik derefter på ethvert element, som du vil kende pixlen for.

Du finder pixlen over elementet som vist på skærmbilledet nedenfor.

Træk og slip ind 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();		
 }		
}

BEMÆRK VENLIGST: Pixelværdierne ændres med skærmopløsning og browserstørrelse. Denne metode er derfor ikke pålidelig og ikke udbredt.

Scenario 3: Få elementer trækkes og slippes og bekræfter derefter, at meddelelsen vises eller ej.

I den følgende kode starter vi den givne URL i browseren og trækker derefter elementerne som BANK, SALG, 500 og slip på den respektive blok. Når det er gjort, bekræfter vi outputmeddelelsen.

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

Outputanalyse

I Output kan du se, at elementet trækkes og slippes på det definerede element. Du kan kontrollere GIF af output.

Resumé

  • I ovenstående vejledninger illustrerer vi træk og slip-funktionaliteten af ​​webapplikationen gennem handlingsmetoder i Webdriver:
  • dragAndDrop(Sourcelocator, Destinationlocator)
  • dragAndDropBy(Sourcelocator, x-akse pixel af Destinationlocator, y-akse pixel af Destinationlocator)
  • For at trække og slippe elementet brugte vi først DragAndDrop-metoden fra Actions-klassen, hvor vi sender de 2 parametre, 1st parameter er det element, som vi skal trække, og 2nd parameter er det element, som vi skal slippe 1'eren påst element.
  • For det andet brugte vi dragAndDropBy-metoden fra Actions-klassen, hvor vi sender de 3 parametre, den 1. parameter er det element, som vi skal trække, 2nd parameteren er x-aksens pixelværdi for 2nd element, 3rd parameter er y-aksens pixelværdi for 2nd element.

Du kan lide: