Come trascinare e rilasciare Selenium (Esempio)

Che cos'è il trascinamento e rilascio in Selenium?

Trascina e rilascia Selenium è un'interazione automatizzata che simula il clic e il mantenimento di un elemento sorgente, il suo spostamento sulla pagina e il suo rilascio in una posizione di destinazione. È ampiamente utilizzato per testare le moderne applicazioni web che si basano su interfacce drag-and-drop, come caricamenti di file, lavagne kanban, negoziping carrelli e strumenti per la creazione di dashboard.

In Selenium WebDriver, il trascinamento e il rilascio vengono eseguiti tramite il Azione classe che fornisce metodi specializzati per concatenare i gesti del mouse ed eseguirli come un'unica azione composita.

La classe Actions espone due metodi principali per l'automazione del trascinamento e rilascio:

Sintassi:

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

Qui, dragAndDrop() prende gli elementi WebElements di origine e di destinazione, mentre dragAndDropBy() Prende l'elemento sorgente e gli offset in pixel x/y di cui spostarlo.

Come trascinare e rilasciare Selenium

I seguenti tre scenari dimostrano l'automazione pratica del trascinamento e rilascio su Guru99 pagina demo https://demo.guru99.com/test/drag_drop.html. L'obiettivo è spostare il BANCA elemento di debito nel Account area lato addebito in modo che l'importo di $5000 venga correttamente contabilizzato come transazione di addebito.

Scenario 1: Trascinamento e rilascio utilizzando il metodo dragAndDrop

In questo scenario, l'elemento sorgente (BANCA) viene trascinato sulla destinazione (lato addebito conto) utilizzando il dragAndDrop(source, target) metodo che accetta direttamente gli elementi Web di origine e di destinazione.

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

Dopo l'esecuzione dello script, BANCA la piastrella si sposta nel Account area addebito e l'importo di $5000 viene registrato come addebito.

Il risultato visivo sulla pagina demo si presenta così:

Scenario 2: Trascinamento e rilascio utilizzando il metodo dragAndDropBy

Migliori dragAndDropBy(source, xOffset, yOffset) Il metodo offre una precisione a livello di pixel. Invece di perdereping Su un elemento di destinazione, sposta la sorgente di un numero specificato di pixel lungo gli assi X e Y.

Per determinare l'offset, posiziona il cursore del mouse sull'area di destinazione nel browser e leggi le coordinate in pixel con uno strumento come il righello di ispezione o un'estensione per le coordinate dello schermo.

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

Lo script sposta il riquadro BANK dell'offset specificato e lo rilascia sul lato addebito del conto, producendo lo stesso risultato finanziario dello Scenario 1.

Scenario 3: Trascina, rilascia e verifica più elementi

Questo scenario concatena diverse operazioni di trascinamento e rilascio e verifica il risultato confrontando l'importo finale con quello di destinazione. Diversi elementi di origine (BANCA, VENDITE, 5000, 500) vengono spostati nelle rispettive zone di debito e credito e lo script conferma che i totali corrispondano al saldo previsto.

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

Questo schema dimostra come la funzionalità di trascinamento e rilascio (drag-and-drop) possa essere combinata con le asserzioni per convalidare il comportamento funzionale, e non solo il movimento visivo.

Migliori pratiche per l'automazione del trascinamento e rilascio

I test di trascinamento sono tra gli script più instabili in un Selenium suite perché dipendono da coordinate precise del mouse e dalla disponibilità del DOM. Le seguenti pratiche ne garantiscono l'affidabilità:

• Attendi gli elementi: Usa il WebDriverWait con ExpectedConditions.elementToBeClickable prima di invocare il trascinamento.
• Preferisci il trascinamento JavaTrucchi di script: Gli eventi di trascinamento HTML5 nativi a volte necessitano di un JavaPrevediamo un'alternativa tramite script, ma in primo luogo utilizziamo l'API Actions.
• Scorri verso il basso per visualizzare l'obiettivo: Una destinazione fuori dallo schermo causa errori silenziosi. Utilizzare Actions.scrollToElement JavaScorri lo script prima di trascinarlo.
• Verificare il risultato: È sempre necessario verificare un cambiamento di stato misurabile (testo, attributo, conteggio) dopo l'eliminazione, anziché affidarsi all'azione eseguita.
• Eseguire su una risoluzione stabile: Il trascinamento con offset in pixel si interrompe se le dimensioni della finestra di visualizzazione differiscono da quelle utilizzate per calcolare gli offset.

Domande Frequenti