So führen Sie Drag-and-Drop durch Selenium (Beispiel)

Was ist Drag & Drop? Selenium?

Per Drag & Drop einziehen Selenium Drag & Drop ist eine automatisierte Interaktion, die das Klicken und Halten eines Quellelements, dessen Verschieben über die Seite und das Loslassen an einer Zielposition simuliert. Sie wird häufig zum Testen moderner Webanwendungen eingesetzt, die auf Drag-&-Drop-Oberflächen basieren, wie z. B. Datei-Uploader, Kanban-Boards und Shopsysteme.ping Warenkörbe und Dashboard-Builder.

In Selenium WebDriver, Drag & Drop wird über den WebDriver ausgeführt. Aktion Klasse, die spezielle Methoden bereitstellt, um Mausgesten zu verketten und sie als eine einzige zusammengesetzte Aktion auszuführen.

Die Actions-Klasse stellt zwei primäre Methoden für die Drag-and-Drop-Automatisierung bereit:

Syntax:

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

Dabei steht: dragAndDrop() nimmt die Quell- und Ziel-WebElemente entgegen, während dragAndDropBy() Nimmt das Quellelement und die x/y-Pixel-Offsets, um die es verschoben werden soll.

So führen Sie Drag-and-Drop durch Selenium

Die folgenden drei Szenarien veranschaulichen die praktische Drag-and-Drop-Automatisierung auf dem Guru99 Demoseite https://demo.guru99.com/test/drag_drop.htmlDas Ziel ist es, die BANK Soll-Element in die Konto Sollseite, damit der Betrag von 5000 $ korrekt als Sollbuchung verbucht wird.

Szenario 1: Drag & Drop mithilfe der dragAndDrop-Methode

In diesem Szenario wird das Quellelement (BANK) mithilfe der folgenden Funktion auf das Zielelement (Kontolastseite) gezogen: dragAndDrop(source, target) Methode, die Quell- und Ziel-WebElements direkt akzeptiert.

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

Nachdem das Skript ausgeführt wurde, BANK Die Kachel bewegt sich in den Bereich Konto Im Debitbereich wird der Betrag von 5000 $ als Lastschrift verbucht.

Das visuelle Ergebnis auf der Demoseite sieht folgendermaßen aus:

Szenario 2: Drag & Drop mithilfe der dragAndDropBy-Methode

Das dragAndDropBy(source, xOffset, yOffset) Die Methode bietet Präzision auf Pixelebene. Anstatt zu tropfenping Bei einem Zielelement wird die Quelle um eine festgelegte Anzahl von Pixeln entlang der X- und Y-Achse verschoben.

Um den Versatz zu bestimmen, bewegen Sie den Mauszeiger in Ihrem Browser über den Zielbereich und lesen Sie die Pixelkoordinaten mit einem Werkzeug wie dem Inspektorlineal oder einer Bildschirmkoordinaten-Erweiterung ab.

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

Das Skript verschiebt die BANK-Kachel um den angegebenen Offset und platziert sie auf der Sollseite des Kontos, wodurch das gleiche finanzielle Ergebnis wie in Szenario 1 erzielt wird.

Szenario 3: Mehrere Elemente per Drag & Drop verschieben und überprüfen

Dieses Szenario verknüpft mehrere Drag-and-Drop-Operationen und überprüft das Ergebnis, indem der Endbetrag im Zielkonto angezeigt wird. Mehrere Quellelemente (BANK, SALES, 5000, 500) werden in die entsprechenden Soll- und Habenbereiche verschoben, und das Skript bestätigt, dass die Summen dem erwarteten Saldo entsprechen.

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

Dieses Beispiel veranschaulicht, wie Drag-and-Drop mit Assertions kombiniert werden kann, um nicht nur visuelle Bewegungen, sondern auch funktionales Verhalten zu validieren.

Best Practices für die Drag-and-Drop-Automatisierung

Drag-and-Drop-Tests gehören zu den unzuverlässigsten Skripten in einem Selenium Suite, da sie auf präzisen Mauskoordinaten und der DOM-Bereitschaft basieren. Die folgenden Praktiken gewährleisten ihre Zuverlässigkeit:

• Auf Elemente warten: Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, WebDriverWait und ExpectedConditions.elementToBeClickable vor dem Aufrufen des Drag-Vorgangs.
• Bevorzugen Sie Drag & Drop gegenüber JavaSkript-Hacks: Native HTML5-Drag-Events benötigen manchmal einen JavaSkriptbasierte Ausweichlösung, aber zuerst die Actions API verwenden.
• Scrollen Sie das Ziel in den sichtbaren Bereich: Ein Ziel außerhalb des sichtbaren Bereichs führt zu stillen Fehlern. Verwenden Sie Actions.scrollToElement oder die JavaScrollen Sie im Skript, bevor Sie es ziehen.
• Ergebnis überprüfen: Prüfen Sie nach dem Ablegen immer eine messbare Zustandsänderung (Text, Attribut, Anzahl), anstatt darauf zu vertrauen, dass die Aktion ausgeführt wurde.
• Mit einer stabilen Auflösung ausführen: Pixel-Offset-Drags schlagen fehl, wenn die Viewport-Größe von der zur Berechnung der Offsets verwendeten Größe abweicht.

Häufig gestellte Fragen