Como arrastar e soltar Selenium (Exemplo)

Por: Krishna Degrau Krishna Degrau
Hours Atualização do

Arrastar e soltar no selênio

Alguns aplicativos da web possuem a funcionalidade de arrastar elementos da web e soltá-los em uma área ou elemento definido. Podemos automatizar o arrastar e soltar de tais elementos usando Selenium Driver da Web.

Sintaxe de arrastar e soltar

A classe Actions possui dois métodos que suportam arrastar e soltar. Vamos estudá-los-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Como arrastar e soltar Selenium

Veja como arrastar e soltar um elemento usando Selenium Driver da Web

No método dragAndDrop, passamos os dois parâmetros –

  1. O primeiro parâmetro “Sourcelocator” é o elemento que precisamos arrastar
  2. O segundo parâmetro “Destinationlocator” é o elemento no qual precisamos colocar o primeiro elemento
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

método dragAndDropBy passamos os 3 parâmetros –

  1. O primeiro parâmetro “Sourcelocator” é o elemento que precisamos arrastar
  2. O segundo parâmetro é o valor do pixel do eixo x dos 2nd elemento no qual precisamos descartar o primeiro elemento.
  3. O terceiro parâmetro é o valor do pixel do eixo y do segundo elemento no qual precisamos colocar o primeiro elemento.

    Arraste e solte Selenium

Vamos mostrar de forma prática como arrastar e soltar um elemento usando o selenium webdriver com os três cenários a seguir

Cenário 1: o elemento BANK é arrastado e solto na célula específica pelo método DragAndDrop.

No código a seguir, lançamos a URL fornecida em Firefox navegador e, em seguida, arraste o elemento BANK e solte no bloco DEBIT SIDE através do método dragAndDrop.

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

Explicação do código: No código acima, lançamos o URL fornecido em Firefox navegador e, em seguida, arraste o elemento BANK e solte no bloco DEBIT SIDE através do método dragAndDrop. Explicado brevemente abaixo:

Primeiro, capturamos o 1st elemento que precisamos arrastar na variável “De”.

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

Em segundo lugar, capturamos o segundo elemento no qual precisamos descartar o primeiro elemento na variável “To”.

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

Terceiro, criamos objetos da classe Actions à medida que usamos métodos da classe Actions.

Actions act=new Actions(driver);

Para arrastar e soltar o elemento usamos o método dragAndDrop da classe Actions e passamos os parâmetros como o primeiro elemento (Sourcelocator) “From” e o segundo elemento (Destinationlocator) “To”. A linha abaixo arrastará o 1st elemento e solte-o no 2nd elemento.

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

Execução do roteiro.

Agora você pode executar o script acima um por um no Eclipse, conforme mostrado na imagem abaixo.

Arraste e solte Selenium

Aqui está a saída quando você executa o script

Arraste e solte Selenium

ARTIGOS RELACIONADOS

Cenário 2: o elemento BANK é arrastado e solto na célula específica pelo método DragAndDropBy.

Neste cenário, lançamos o URL fornecido no navegador e, em seguida, arrastamos o elemento BANK e soltamos no bloco DEBIT SIDE através do método dragAndDropBy. Para dragAndDropBy, precisamos encontrar o pixel do elemento.

Como encontrar Pixel?

Abra o URL no Chrome ou FireFox e clique na seta azul.

Em seguida, clique em qualquer elemento cujo pixel deseja conhecer.

Você encontrará o pixel acima do elemento conforme mostrado na imagem abaixo.

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

OBSERVAÇÃO: Os valores dos pixels mudam com a resolução da tela e o tamanho do navegador. Este método não é, portanto, confiável e não é amplamente utilizado.

Cenário 3: Poucos elementos são arrastados e soltos e então verifica-se se a mensagem é exibida ou não.

No código a seguir, lançamos o URL fornecido no navegador e depois arrastamos os elementos como BANCO, VENDAS, 500 e soltamos no respectivo bloco. Uma vez feito isso, verificamos a mensagem de saída.

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

Análise de saída

Na Saída, você pode ver que o elemento é arrastado e solto no elemento definido. Você pode verificar o GIF da saída.

Resumo

  • Nos tutoriais acima, ilustramos a funcionalidade de arrastar e soltar do aplicativo web por meio de métodos Action no Webdriver:
  • arrastar e soltar (localizador de origem, localizador de destino)
  • dragAndDropBy (Sourcelocator, pixel do eixo x do Destinationlocator, pixel do eixo y do Destinationlocator)
  • Para arrastar e soltar o elemento primeiro usamos o método DragAndDrop da classe Actions no qual passamos os 2 parâmetros, 1st parâmetro é o elemento que precisamos arrastar, e 2nd parâmetro é o elemento no qual precisamos descartar o 1st elemento.
  • Segundo, usamos o método dragAndDropBy da classe Actions no qual passamos os 3 parâmetros, o 1º parâmetro é o elemento que precisamos arrastar, 2nd parâmetro é o valor do pixel do eixo x dos 2nd elemento, 3rd parâmetro é o valor do pixel do eixo y dos 2nd elemento.