Como arrastar e soltar Selenium (Exemplo)

O que é arrastar e soltar em Selenium?

Arraste e solte em Selenium É uma interação automatizada que simula clicar e segurar um elemento de origem, movê-lo pela página e soltá-lo em um local de destino. É amplamente utilizada para testar aplicações web modernas que dependem de interfaces de arrastar e soltar, como carregadores de arquivos, quadros Kanban e lojas virtuais.ping carrinhos e construtores de painéis.

In Selenium WebDriver, o recurso de arrastar e soltar é realizado através do Ação classe, que fornece métodos especializados para encadear gestos do mouse e executá-los como uma única ação composta.

A classe Actions expõe dois métodos principais para automação de arrastar e soltar:

Sintaxe:

Actions act = new Actions(driver);
//for drag and drop directly on an element
act.dragAndDrop(Source, Destination).build().perform();

//for drag and drop with pixel offsets
act.dragAndDropBy(WebElement Source, int xOffset, int yOffset).build().perform();

Aqui, dragAndDrop() recebe os WebElements de origem e destino, enquanto dragAndDropBy() Recebe o elemento de origem e os deslocamentos em pixels x/y para movê-lo.

Como arrastar e soltar Selenium

Os três cenários a seguir demonstram a automação prática de arrastar e soltar no Guru99 página de demonstração https://demo.guru99.com/test/drag_drop.htmlO objetivo é mover o BANCO elemento de débito no de Corretora área do lado do débito para que o valor de $5000 seja contabilizado corretamente como uma transação a débito.

Cenário 1: Arrastar e soltar usando o método dragAndDrop

Neste cenário, o elemento de origem (BANCO) é arrastado para o destino (lado do débito da conta) usando o dragAndDrop(source, target) método que aceita diretamente os WebElements de origem e destino.

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;

public class DragAndDropExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate the source (BANK) element
        WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));
        // Locate the target (Account debit side) element
        WebElement Dest = driver.findElement(By.xpath("//*[@id='bank']/li"));

        // Create the Actions instance
        Actions act = new Actions(driver);
        // Perform drag and drop
        act.dragAndDrop(Source, Dest).build().perform();
    }
}

Após a execução do script, o BANCO A telha se move para o de Corretora na área de débito e o valor de $5000 é registrado como um débito.

O resultado visual na página de demonstração é semelhante a este:

Cenário 2: Arrastar e soltar usando o método dragAndDropBy

O dragAndDropBy(source, xOffset, yOffset) O método oferece precisão em nível de pixel. Em vez de soltarping Ao aplicar a função a um elemento alvo, ela move a fonte por um número específico de pixels ao longo dos eixos X e Y.

Para determinar o deslocamento, passe o cursor sobre a área de destino no seu navegador e leia as coordenadas em pixels com uma ferramenta como a régua do inspetor ou uma extensão de coordenadas de tela.

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;

public class DragAndDropByExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate the source (BANK) element
        WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));

        // Create the Actions instance
        Actions act = new Actions(driver);
        // Drag the source by 400 pixels right and 0 pixels down
        act.dragAndDropBy(Source, 400, 0).build().perform();
    }
}

O script move o bloco BANK pelo deslocamento fornecido e o coloca no lado do débito da conta, produzindo o mesmo resultado financeiro do Cenário 1.

Cenário 3: Arrastar, soltar e verificar vários elementos

Este cenário encadeia várias operações de arrastar e soltar e verifica o resultado, comparando o valor final com o valor de destino. Vários elementos de origem (BANCO, VENDAS, 5000, 500) são movidos para suas respectivas zonas de débito e crédito, e o script confirma se os totais correspondem ao saldo esperado.

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;

public class DragAndDropMultiple {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate sources
        WebElement srcBank = driver.findElement(By.xpath("//*[@id='credit2']/a"));
        WebElement srcSales = driver.findElement(By.xpath("//*[@id='credit1']/a"));
        WebElement src5000 = driver.findElement(By.xpath("//*[@id='fourth']/a"));
        WebElement src500 = driver.findElement(By.xpath("//*[@id='fourth']/a"));

        // Locate targets
        WebElement debitSide = driver.findElement(By.xpath("//*[@id='bank']/li"));
        WebElement creditSide = driver.findElement(By.xpath("//*[@id='loan']/li"));
        WebElement amount7 = driver.findElement(By.xpath("//*[@id='amt7']/li"));
        WebElement amount8 = driver.findElement(By.xpath("//*[@id='amt8']/li"));

        Actions act = new Actions(driver);
        act.dragAndDrop(srcBank, debitSide).build().perform();
        act.dragAndDrop(srcSales, creditSide).build().perform();
        act.dragAndDrop(src5000, amount7).build().perform();
        act.dragAndDrop(src500, amount8).build().perform();

        // Verify the displayed total
        String total = driver.findElement(By.xpath("//*[@id='totamt']")).getText();
        if (total.equals("5500")) {
            System.out.println("Test Passed: total matches expected 5500");
        } else {
            System.out.println("Test Failed: actual total " + total);
        }
    }
}

Este padrão demonstra como o recurso de arrastar e soltar pode ser combinado com asserções para validar o comportamento funcional, e não apenas o movimento visual.

Melhores práticas para automação de arrastar e soltar

Os testes de arrastar e soltar estão entre os scripts mais instáveis ​​em um Selenium são essenciais porque dependem de coordenadas precisas do mouse e da disponibilidade do DOM. As seguintes práticas garantem sua confiabilidade:

• Aguarde os elementos: Uso WebDriverWait com as ExpectedConditions.elementToBeClickable antes de iniciar o arrastar.
• Prefiro arrastar e soltar em vez de... JavaTruques de script: Os eventos de arrastar nativos do HTML5 às vezes precisam de um JavaUtilize um script como alternativa, mas priorize a API de Ações.
• Deslize o cursor para visualizar o alvo: Um destino fora da tela causa falhas silenciosas. Use Actions.scrollToElement JavaO script rola antes de arrastar.
• Verifique o resultado: Sempre verifique se há uma mudança de estado mensurável (texto, atributo, contagem) após a soltura, em vez de simplesmente confiar que a ação foi executada.
• Executar em resolução estável: A função de arrastar com deslocamento de pixel falha se o tamanho da janela de visualização for diferente daquele usado para calcular os deslocamentos.

Perguntas Frequentes