Hoe u kunt slepen en neerzetten Selenium (Voorbeeld)

Door: Krishna Rungta Krishna Rungta
Hours Bijgewerkt

Slepen en neerzetten in selenium

Sommige webapplicaties hebben een functionaliteit om webelementen te slepen en neer te zetten op een gedefinieerd gebied of element. We kunnen het slepen en neerzetten van dergelijke elementen automatiseren met behulp van Selenium Webdriver.

Syntaxis van slepen en neerzetten

De klasse Actions heeft twee methoden die slepen en neerzetten ondersteunen. Laten we ze bestuderen-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Hoe u kunt slepen en neerzetten Selenium

Hier leest u hoe u een element kunt slepen en neerzetten met behulp van Selenium Webstuurprogramma

In de dragAndDrop-methode geven we de twee parameters door:

  1. De eerste parameter “Bronlocator” is het element dat we moeten slepen
  2. Tweede parameter “Destinationlocator” is het element waarop we het eerste element moeten neerzetten
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy-methode geven we de 3 parameters door –

  1. De eerste parameter “Bronlocator” is het element dat we moeten slepen
  2. De tweede parameter is de pixelwaarde op de x-as van de 2nd element waarop we het eerste element moeten neerzetten.
  3. De derde parameter is de pixelwaarde op de y-as van het tweede element waarop we het eerste element moeten neerzetten.

    Slepen en neerzetten Selenium

Laten we u praktisch het slepen en neerzetten van een element laten zien met behulp van de Selenium Webdriver met de volgende 3 scenario's

Scenario 1: BANK-element wordt via de DragAndDrop-methode naar de specifieke cel gesleept en neergezet.

In de volgende code starten we de gegeven URL in Firefox browser en sleep vervolgens het BANK-element naar het DEBIT SIDE-blok met de dragAndDrop-methode.

Slepen en neerzetten 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 Verklaring: In de bovenstaande code lanceren we de gegeven URL in Firefox browser en sleep vervolgens het BANK-element en zet het neer op het DEBIT SIDE-blok via de dragAndDrop-methode. Hieronder kort uitgelegd:

Eerst leggen we de 1 vastst element dat we in de variabele 'Van' moeten slepen.

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

Ten tweede leggen we het tweede element vast waarop we het eerste element in de variabele "To" moeten plaatsen.

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

Ten derde creëren we een object van de Actions-klasse terwijl we methoden van de Actions-klasse gebruiken.

Actions act=new Actions(driver);

Voor drag-and-drop-elementen gebruiken we de dragAndDrop-methode van de Actions-klasse en geven de parameters door als het eerste element (Sourcelocator) "From" en het tweede element (Destinationlocator) "To". Onder de lijn wordt de 1 versleeptst element en laat het op de 2 vallennd element.

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

Uitvoering van het script.

Nu kunt u de bovenstaande scripts één voor één uitvoeren vanuit Eclipse, zoals weergegeven in onderstaande schermafbeelding.

Slepen en neerzetten Selenium

Hier is de uitvoer wanneer u het script uitvoert

Slepen en neerzetten Selenium

GERELATEERDE ARTIKELEN

Scenario 2: BANK-element wordt via de DragAndDropBy-methode naar de specifieke cel gesleept en neergezet.

In dit scenario lanceren we de gegeven URL in de browser en slepen we vervolgens het BANK-element naar het DEBIT SIDE-blok via de dragAndDropBy-methode. Om DragAndDropBy te kunnen slepen, moeten we de pixel van het element vinden.

Hoe Pixel vinden?

Open de URL in Chrome of FireFox en klik op de blauwe kleurpijl.

Klik vervolgens op een element waarvan u de pixel wilt weten.

U vindt de pixel boven het element, zoals weergegeven in onderstaande schermafbeelding.

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

NOTITIE: De pixelwaarden veranderen met de schermresolutie en browsergrootte. Deze methode is daarom niet betrouwbaar en wordt niet veel gebruikt.

Scenario 3: Er worden een aantal elementen gesleept en neergezet en vervolgens wordt gecontroleerd of het bericht wordt weergegeven.

In de volgende code starten we de gegeven URL in de browser en slepen we vervolgens de elementen zoals BANK, SALES, 500 en droppen ze op het betreffende blok. Als we klaar zijn, verifiëren we het uitvoerbericht.

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

Output analyse

In Uitvoer kunt u zien dat het element op het gedefinieerde element wordt gesleept en neergezet. U kunt de GIF van de uitvoer controleren.

Samenvatting

  • In de bovenstaande tutorials illustreren we de functionaliteit voor slepen en neerzetten van de webapplicatie via actiemethoden in Webdriver:
  • dragAndDrop(Bronlocator, Destinationlocator)
  • dragAndDropBy(Bronlocator, x-aspixel van Destinationlocator, y-aspixel van Destinationlocator)
  • Om het element eerst te slepen en neer te zetten, gebruikten we de DragAndDrop-methode uit de Actions-klasse waarin we de 2 parameters doorgeven, 1st parameter is het element dat we moeten slepen, en 2nd parameter is het element waarop we de 1 moeten laten vallenst element.
  • Ten tweede hebben we de methode dragAndDropBy uit de klasse Actions gebruikt, waarin we de 3 parameters doorgeven, de eerste parameter is het element dat we moeten slepen, 1nd parameter is de pixelwaarde op de x-as van de 2nd bestanddeel, 3rd parameter is de pixelwaarde op de y-as van de 2nd element.

Je houdt misschien van: