Hoe u kunt slepen en neerzetten Selenium (Voorbeeld)

Wat is slepen en neerzetten? Selenium?

Slepen en neerzetten in Selenium Het is een geautomatiseerde interactie die het klikken en vasthouden van een bronelement simuleert, het verplaatsen ervan over de pagina en het loslaten op een doellocatie. Het wordt veel gebruikt om moderne webapplicaties te testen die gebruikmaken van drag-and-drop-interfaces, zoals bestandsuploaders, kanbanborden en webshops.ping winkelwagens en dashboardbouwers.

In Selenium Met WebDriver wordt slepen en neerzetten uitgevoerd via de Acties een klasse die gespecialiseerde methoden biedt om muisbewegingen aan elkaar te koppelen en als één samengestelde actie uit te voeren.

De klasse Actions biedt twee primaire methoden voor het automatiseren van drag-and-drop-bewerkingen:

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

Hier dragAndDrop() neemt de bron- en bestemmings-WebElements, terwijl dragAndDropBy() De functie neemt het bronelement en de x/y-pixeloffsets waarmee het verplaatst moet worden.

Hoe u kunt slepen en neerzetten Selenium

De volgende drie scenario's demonstreren praktische drag-and-drop-automatisering op de Guru99 demopagina https://demo.guru99.com/test/drag_drop.htmlHet doel is om de BANK debet element in de Account Het debetgedeelte moet zodanig worden geboekt dat het bedrag van $5000 correct als debettransactie wordt verwerkt.

Scenario 1: Slepen en neerzetten met behulp van de dragAndDrop-methode

In dit scenario wordt het bronelement (BANK) naar de bestemming (debetzijde van de rekening) gesleept met behulp van de dragAndDrop(source, target) methode die de bron- en bestemmings-WebElements direct accepteert.

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

Nadat het script is uitgevoerd, BANK tegel beweegt naar de Account Het bedrag van $5000 staat geregistreerd als debetpost.

Het visuele resultaat op de demopagina ziet er als volgt uit:

Scenario 2: Slepen en neerzetten met behulp van de dragAndDropBy-methode

De dragAndDropBy(source, xOffset, yOffset) Deze methode biedt precisie op pixelniveau. In plaats van drop.ping Bij een doelelement verplaatst het de bron met een bepaald aantal pixels langs de X- en Y-as.

Om de offset te bepalen, beweeg je de muis over het bestemmingsgebied in je browser en lees je de pixelcoördinaten af ​​met een tool zoals de inspectieliniaal of een schermcoördinaten-extensie.

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

Het script verplaatst de BANK-tegel met de opgegeven offset en plaatst deze aan de debetzijde van de rekening, wat hetzelfde financiële resultaat oplevert als scenario 1.

Scenario 3: Meerdere elementen slepen, neerzetten en verifiëren

Dit scenario koppelt meerdere sleep-en-drop-bewerkingen aan elkaar en verifieert het resultaat door het eindbedrag op de doelrekening te controleren. Verschillende bronelementen (BANK, VERKOOP, 5000, 500) worden naar hun respectievelijke debet- en creditzones verplaatst, en het script bevestigt dat de totalen overeenkomen met het verwachte saldo.

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

Dit patroon laat zien hoe slepen en neerzetten gecombineerd kan worden met beweringen om functioneel gedrag te valideren, en niet alleen visuele beweging.

Beste werkwijzen voor automatisering met slepen en neerzetten

Drag-and-drop-tests behoren tot de meest onbetrouwbare scripts in een Selenium suite omdat ze afhankelijk zijn van precieze muiscoördinaten en de gereedheid van het DOM. De volgende werkwijzen zorgen ervoor dat ze betrouwbaar blijven:

• Wacht op elementen: Gebruik WebDriverWait with ExpectedConditions.elementToBeClickable voordat de sleepbeweging wordt geactiveerd.
• Geef de voorkeur aan drag-and-drop boven JavaScripthacks: Native HTML5-sleepgebeurtenissen hebben soms een JavaScript-fallback, maar vertrouw eerst op de Actions API.
• Schuif het doelwit in beeld: Een bestemming buiten het scherm veroorzaakt stille storingen. Gebruik Actions.scrollToElement nodig heeft of JavaScript scrollen vóór het slepen.
• Controleer het resultaat: Controleer altijd of er na het verwijderen een meetbare statuswijziging (tekst, attribuut, aantal) is opgetreden, in plaats van er zomaar vanuit te gaan dat de actie is uitgevoerd.
• Draaien op een stabiele resolutie: Het slepen met pixelverschuiving werkt niet meer als de grootte van de viewport verschilt van de grootte die is gebruikt om de verschuivingen te berekenen.

Veelgestelde vragen