Comment glisser-déposer Selenium (Exemple)

Par : Krishna Rungta Krishna Rungta
Hours Le kit de préparation mis à jour

Glisser-déposer dans le sélénium

Certaines applications Web disposent d'une fonctionnalité permettant de faire glisser des éléments Web et de les déposer sur une zone ou un élément défini. Nous pouvons automatiser le glisser-déposer de ces éléments en utilisant Selenium Pilote Web.

Syntaxe du glisser-déposer

La classe Actions dispose de deux méthodes prenant en charge le glisser-déposer. Étudions-les-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Comment glisser-déposer Selenium

Voici comment glisser-déposer un élément en utilisant Selenium Pilote Web

Dans la méthode dragAndDrop, nous passons les deux paramètres –

  1. Le premier paramètre « Sourcelocator » est l'élément que nous devons faire glisser
  2. Le deuxième paramètre « Destinationlocator » est l'élément sur lequel nous devons déposer le premier élément
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

méthode dragAndDropBy nous passons les 3 paramètres –

  1. Le premier paramètre « Sourcelocator » est l'élément que nous devons faire glisser
  2. Le deuxième paramètre est la valeur du pixel sur l'axe X des 2nd élément sur lequel nous devons déposer le premier élément.
  3. Le troisième paramètre est la valeur du pixel de l'axe y du 2ème élément sur lequel nous devons déposer le premier élément.

    Glisser et déposer Selenium

Montrons pratiquement le glisser-déposer d'un élément à l'aide du webdriver Selenium avec les 3 scénarios suivants

Scénario 1 : l'élément BANK est glissé et déposé sur la cellule spécifique par la méthode DragAndDrop.

Dans le code suivant, nous lançons l'URL donnée dans Firefox navigateur, puis faites glisser l'élément BANK et déposez-le sur le bloc DEBIT SIDE via la méthode dragAndDrop.

Glisser et déposer 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("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();		
	}		
}

Explication du code : Dans le code ci-dessus, nous lançons l'URL donnée dans Firefox navigateur, puis faites glisser l'élément BANK et déposez-le sur le bloc DEBIT SIDE via la méthode dragAndDrop. Expliqué brièvement ci-dessous :

Tout d'abord, nous capturons le 1st élément que nous devons faire glisser dans la variable « From ».

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

Deuxièmement, nous capturons le 2ème élément sur lequel nous devons déposer le 1er élément dans la variable « To ».

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

Troisièmement, nous créons un objet de la classe Actions en utilisant les méthodes de la classe Actions.

Actions act=new Actions(driver);

Pour l'élément glisser-déposer, nous utilisons la méthode dragAndDrop de la classe Actions et transmettons les paramètres en tant que premier élément (Sourcelocator) « From » et deuxième élément (Destinationlocator) « To ». La ligne ci-dessous fera glisser le 1st élément et déposez-le sur le 2nd .

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

Exécution du scénario.

Vous pouvez maintenant exécuter le script ci-dessus un par un à partir d'Eclipse, comme indiqué dans la capture d'écran ci-dessous.

Glisser et déposer Selenium

Voici le résultat lorsque vous exécutez le script

Glisser et déposer Selenium

ARTICLES LIÉS

Scénario 2 : l'élément BANK est glissé et déposé sur la cellule spécifique par la méthode DragAndDropBy.

Dans ce scénario, nous lançons l'URL donnée dans le navigateur, puis faisons glisser l'élément BANK et le déposons sur le bloc DEBIT SIDE via la méthode dragAndDropBy. Pour dragAndDropBy, nous devons trouver le pixel de l'élément.

Comment trouver des pixels ?

Ouvrez l'URL dans Chrome ou FireFox et cliquez sur la flèche de couleur bleue.

Cliquez ensuite sur n'importe quel élément dont vous souhaitez connaître le pixel.

Vous trouverez le pixel au-dessus de l'élément, comme indiqué dans la capture d'écran ci-dessous.

Glisser et déposer 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("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();		
 }		
}

NOTE: Les valeurs des pixels changent avec la résolution de l'écran et la taille du navigateur. Cette méthode n’est donc pas fiable et peu utilisée.

Scénario 3 : quelques éléments sont glissés et déposés, puis vérifiez que le message est affiché ou non.

Dans le code suivant, nous lançons l'URL donnée dans le navigateur, puis faisons glisser les éléments comme BANK, SALES, 500 et déposons sur le bloc respectif. Une fois cela fait, nous vérifions le message de sortie.

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

Analyse de sortie

Dans Output, vous pouvez voir que l'élément est glissé et déposé sur l'élément défini. Vous pouvez vérifier le GIF de la sortie.

Résumé

  • Dans les didacticiels ci-dessus, nous illustrons la fonctionnalité glisser-déposer de l'application Web via les méthodes d'action dans Webdriver :
  • dragAndDrop (localisateur de source, localisateur de destination)
  • dragAndDropBy (Sourcelocator, pixel de l'axe x du Destinationlocator, pixel de l'axe y du Destinationlocator)
  • Pour glisser et déposer l'élément, nous avons d'abord utilisé la méthode DragAndDrop de la classe Actions dans laquelle nous passons les 2 paramètres, 1st le paramètre est l’élément que nous devons faire glisser, et 2nd Le paramètre est l'élément sur lequel nous devons déposer le 1st .
  • Deuxièmement, nous avons utilisé la méthode dragAndDropBy de la classe Actions dans laquelle nous passons les 3 paramètres, le 1er paramètre est l'élément que nous devons faire glisser, 2nd Le paramètre est la valeur du pixel sur l'axe X des 2nd élément, 3rd Le paramètre est la valeur du pixel sur l'axe y des 2nd .