Hvordan dra og slippe inn Selenium (Eksempel)

by: Krishna Rungta Krishna Rungta
Hours oppdatert

⚡ Smart oppsummering

Dra og slipp inn Selenium WebDriver muliggjør automatisert simulering av musebaserte interaksjoner som flytter et kildeelement og slipper det på et definert mål. Actions-klassen driver disse bevegelsene gjennom dragAndDrop- og dragAndDropBy-metoder for presis og repeterbar nettleserautomatisering.

  • 🎓 Bruk Actions-klassen til å bygge tastatur- og musebevegelser, og kall deretter build() og perform() for å utføre dem på siden.
  • 🌟 Velg dragAndDrop(source, target) når du har begge elementene, og dragAndDropBy(source, xOffset, yOffset) når du trenger presisjon på pikselnivå.
  • 🚀 Vent alltid til kilde- og målelementene er til stede før du starter draoperasjonen for å unngå ustabile tester.
  • 🎖️ Bekreft slippet visuelt eller ved å bekrefte attributtendringer på målet, slik at testen bekrefter reell interaksjon, ikke bare en handling i kø.
  • 🏆 AI-assisterte lokaliseringsverktøy reparerer ødelagte XPath-er etter brukergrensesnittoppdateringer, noe som reduserer vedlikehold for dra-og-slipp-pakker som kjører i CI-pipelines.
Les mer

Dra og slipp inn Selenium

Hva er dra og slipp Selenium?

Dra og slipp inn Selenium er en automatisert interaksjon som simulerer å klikke og holde et kildeelement, flytte det over siden og slippe det på en målplassering. Det er mye brukt til å teste moderne webapplikasjoner som er avhengige av dra-og-slipp-grensesnitt, for eksempel filopplastere, kanban-tavler, nettbutikkerping handlekurver og dashbordbyggere.

In Selenium WebDriver, dra og slipp utføres via handlinger klasse, som tilbyr spesialiserte metoder for å kjede musebevegelser og utføre dem som en enkelt sammensatt handling.

Dra og slipp inn Selenium

Handlinger-klassen eksponerer to primære metoder for dra-og-slipp-automatisering:

Syntaks:

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

Her dragAndDrop() tar kilde- og destinasjons-WebElementene, mens dragAndDropBy() tar kildeelementet og x/y-pikselforskyvningene for å flytte det med.

Hvordan dra og slippe inn Selenium

De følgende tre scenariene demonstrerer praktisk dra-og-slipp-automatisering på Guru99 demoside https://demo.guru99.com/test/drag_drop.htmlMålet er å flytte BANK debetelementet inn i Konto debetsideområdet slik at beløpet på $5000 blir korrekt regnskapsført som en debettransaksjon.

Scenario 1: Dra og slipp ved hjelp av dra-og-slipp-metoden

I dette scenariet dras kildeelementet (BANK) til destinasjonen (kontoens debetside) ved hjelp av dragAndDrop(source, target) metode, som godtar kilde- og mål-WebElements direkte.

Dra-og-slipp-scenario 1-oppsett

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

Etter at skriptet kjører, BANK flisen beveger seg inn i Konto debetområdet, og beløpet på $5000 er registrert som en debet.

Eclipse kjører dra-og-slipp-skriptet

Det visuelle resultatet på demosiden ser slik ut:

Dra-og-slipp-utdataanimasjon

RELATERTE ARTIKLER

Scenario 2: Dra og slipp ved hjelp av dragAndDropBy-metoden

Ocuco dragAndDropBy(source, xOffset, yOffset) Metoden tilbyr presisjon på pikselnivå. I stedet for å slippeping På et målelement flytter den kilden med et spesifisert antall piksler langs X- og Y-aksene.

For å bestemme forskyvningen, hold musepekeren over målområdet i nettleseren din og les pikselkoordinatene med et verktøy som inspektørlinjalen eller en skjermkoordinatutvidelse.

Identifisere pikselforskyvninger for dragAndDropBy

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

Skriptet flytter BANK-flisen med den angitte forskyvningen og slipper den på kontodebetsiden, noe som gir samme økonomiske resultat som scenario 1.

Scenario 3: Dra, slipp og bekreft flere elementer

Dette scenariet kjeder sammen flere dra-og-slipp-operasjoner og verifiserer resultatet ved å bekrefte det endelige beløpet på målet. Flere kildeelementer (BANK, SALG, 5000, 500) flyttes til sine respektive debet- og kreditsoner, og skriptet bekrefter at totalene samsvarer med forventet 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);
        }
    }
}

Dette mønsteret demonstrerer hvordan dra-og-slipp kan kombineres med påstander for å validere funksjonell atferd, ikke bare visuell bevegelse.

Beste praksis for dra-og-slipp-automatisering

Dra-og-slipp-tester er blant de mest ustabile skriptene i en Selenium suite fordi de er avhengige av presise musekoordinater og DOM-klarhet. Følgende fremgangsmåter holder dem pålitelige:

  • Vent på elementene: Bruk WebDriverWait med ExpectedConditions.elementToBeClickable før du aktiverer dragen.
  • Foretrekker dra-og-slipp fremfor JavaSkript-hacks: Native HTML5-draghendelser trenger noen ganger en JavaSkriptreserve, men stol først på Actions API-et.
  • Rull målet inn i visningen: En destinasjon utenfor skjermen forårsaker stille feil. Actions.scrollToElement eller JavaSkriptrulling før draing.
  • Bekreft resultatet: Angi alltid en målbar tilstandsendring (tekst, attributt, antall) etter slippet i stedet for å stole på at handlingen ble kjørt.
  • Kjør på en stabil oppløsning: Pikselforskyvningsdrag brytes hvis viewportstørrelsen er forskjellig fra den som brukes til å beregne forskyvningene.

Spørsmål og svar

Dra og slipp inn Selenium er en automatisert musebevegelse som plukker opp et kildeelement og slipper det på et mål. Den utføres via Actions-klassen ved hjelp av dragAndDrop eller dragAndDropBy.

dragAndDrop godtar kilde- og mål-WebElements. dragAndDropBy tar kilden pluss x- og y-pikselforskyvninger, noe som gir presis kontroll når målelementet ikke er et diskret element.

build() kompilerer de kjedede interaksjonene til én sammensatt handling, og perform() utfører den. Uten perform() kjøres aldri trinnene i køen mot nettleseren.

Mange HTML5-nettsteder bruker innebygde dra-hendelser som Actions API ikke alltid utløser. I slike tilfeller sender du dragstart-, dragover- og drop-hendelsene via executeScript som en JavaSkriptreserve.

Åpne nettleserens DevTools, hold musepekeren over destinasjonen, og les elementets getBoundingClientRect-verdier.tract kildeposisjonen fra målposisjonen for å få x- og y-forskyvningene i piksler.

Ja. Pakk inn kilde- og måloppslagene i WebDriverWait med ExpectedConditions.elementToBeClickable slik at draingen bare kjører etter at begge elementene er interaktive, noe som reduserer ustabilisering i CI-kjøringer.

AI-verktøy tilbyr selvreparerende lokaliseringsverktøy som tilpasser seg når XPather endres, og anbefaler stabile selektorer for kilde- og målelementer. Dette reduserer vedlikehold for dra-og-slipp-pakker som kjører på tvers av versjoner.

Ja. AI-kodingsassistenter gjør et enkelt scenario som «dra BANK til debetsiden og bekreft totalen» om til en komplett handlingskjede med dra-og-slipp, bygg, utfør og et verifiseringstrinn.

Oppsummer dette innlegget med: