Cómo arrastrar y soltar Selenium (Ejemplo)

¿Qué es arrastrar y soltar en? Selenium?

Arrastrar y soltar en Selenium Es una interacción automatizada que simula hacer clic y mantener presionado un elemento de origen, moverlo por la página y soltarlo en una ubicación de destino. Se utiliza ampliamente para probar aplicaciones web modernas que dependen de interfaces de arrastrar y soltar, como cargadores de archivos, tableros Kanban, tiendas, etc.ping carritos y creadores de paneles de control.

In Selenium WebDriver, arrastrar y soltar se realiza a través de Acciones clase que proporciona métodos especializados para encadenar gestos del ratón y ejecutarlos como una única acción compuesta.

La clase Actions expone dos métodos principales para la automatización mediante arrastrar y soltar:

Sintaxis:

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();

Aquí, dragAndDrop() toma los elementos web de origen y destino, mientras que dragAndDropBy() toma el elemento de origen y los desplazamientos de píxeles x/y para moverlo.

Cómo arrastrar y soltar Selenium

Los siguientes tres escenarios demuestran la automatización práctica de arrastrar y soltar en el GuruPágina de demostración 99 https://demo.guru99.com/test/drag_drop.html. El objetivo es mover el BANCO elemento de débito en el Cuenta área del lado del débito para que el importe de 5000 dólares se contabilice correctamente como una transacción de débito.

Escenario 1: Arrastrar y soltar usando el método dragAndDrop

En este escenario, el elemento de origen (BANCO) se arrastra al destino (lado del débito de la cuenta) utilizando el dragAndDrop(source, target) método que acepta directamente los elementos web de origen y 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();
    }
}

Después de que se ejecuta el script, el BANCO La baldosa se mueve hacia el Cuenta área de débito y el monto de $5000 se registra como un débito.

El resultado visual en la página de demostración se ve así:

Escenario 2: Arrastrar y soltar usando el método dragAndDropBy

El dragAndDropBy(source, xOffset, yOffset) El método ofrece precisión a nivel de píxel. En lugar de dejar caerping Al aplicarlo a un elemento objetivo, desplaza la fuente un número determinado de píxeles a lo largo de los ejes X e Y.

Para determinar el desplazamiento, coloque el cursor sobre el área de destino en su navegador y lea las coordenadas de píxeles con una herramienta como la regla del inspector o una extensión de coordenadas de pantalla.

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

El script mueve la ficha BANK según el desplazamiento proporcionado y la coloca en el lado del débito de la cuenta, produciendo el mismo resultado financiero que en el Escenario 1.

Escenario 3: Arrastrar, soltar y verificar varios elementos.

Este escenario encadena varias operaciones de arrastrar y soltar y verifica el resultado comprobando el importe final en el destino. Varios elementos de origen (BANCO, VENTAS, 5000, 500) se mueven a sus respectivas zonas de débito y crédito, y el script confirma que los totales coinciden con el 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 patrón demuestra cómo se puede combinar la función de arrastrar y soltar con aserciones para validar el comportamiento funcional, no solo el movimiento visual.

Mejores prácticas para la automatización de arrastrar y soltar

Las pruebas de arrastrar y soltar se encuentran entre los scripts más inestables en un Selenium suite porque dependen de coordenadas precisas del ratón y de la disponibilidad del DOM. Las siguientes prácticas garantizan su fiabilidad:

• Espere a que lleguen los elementos: Usar WebDriverWait con ExpectedConditions.elementToBeClickable antes de invocar el arrastre.
• Prefiero arrastrar y soltar sobre JavaTrucos de script: Los eventos de arrastre nativos de HTML5 a veces necesitan un JavaUtiliza un script de respaldo, pero confía primero en la API de Actions.
• Desplácese hacia el objetivo para que sea visible: Un destino fuera de la pantalla provoca fallos silenciosos. Utilice Actions.scrollToElement JavaDesplácese por el script antes de arrastrarlo.
• Verifica el resultado: Siempre verifique un cambio de estado medible (texto, atributo, recuento) después de soltar el archivo en lugar de confiar en que la acción se ejecutó.
• Ejecutar con una resolución estable: Las funciones de arrastre con desplazamiento de píxeles fallan si el tamaño de la ventana gráfica difiere del utilizado para calcular los desplazamientos.

Preguntas Frecuentes