Sådan trækkes og slippes ind Selenium (Eksempel)

Af: Krishna Rungta Krishna Rungta
Hours Opdateret

⚡ Smart opsummering

Træk og slip ind Selenium WebDriver muliggør automatiseret simulering af musebaserede interaktioner, der flytter et kildeelement og frigiver det på et defineret mål. Actions-klassen driver disse bevægelser via dragAndDrop- og dragAndDropBy-metoder til præcis og gentagelig browserautomatisering.

  • 🎓 Brug Actions-klassen til at bygge tastatur- og musebevægelser, og kald derefter build() og perform() for at udføre dem på siden.
  • 🌟 Vælg dragAndDrop(source, target), når du har begge elementer, og dragAndDropBy(source, xOffset, yOffset), når du har brug for præcision på pixelniveau.
  • 🚀 Vent altid på, at kilde- og målelementerne er til stede, før du aktiverer trækoperationen, for at undgå ustabile tests.
  • 🎖️ Bekræft drop'et visuelt eller ved at hævde attributændringer på målet, så testen bekræfter reel interaktion, ikke blot en handling i kø.
  • 🏆 AI-assisterede lokaliseringsværktøjer reparerer ødelagte XPaths efter UI-opdateringer, hvilket reducerer vedligeholdelsen af ​​træk-og-slip-pakker, der kører i CI-pipelines.
Læs mere

Træk og slip ind Selenium

Hvad er Træk og Slip i Selenium?

Træk og slip ind Selenium er en automatiseret interaktion, der simulerer at klikke og holde et kildeelement nede, flytte det hen over siden og slippe det på en målplacering. Det bruges i vid udstrækning til at teste moderne webapplikationer, der er afhængige af træk-og-slip-grænseflader, såsom filuploadere, kanban-tavler, butikslogoerping vogne og dashboardbyggere.

In Selenium WebDriver, træk og slip udføres via handlinger klasse, som tilbyder specialiserede metoder til at kæde musebevægelser sammen og udføre dem som en enkelt sammensat handling.

Træk og slip ind Selenium

Klassen Actions viser to primære metoder til træk-og-slip-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() tager kilde- og destinations-WebElements, mens dragAndDropBy() tager kildeelementet og x/y-pixelforskydningerne for at flytte det.

Sådan trækkes og slippes ind Selenium

De følgende tre scenarier demonstrerer praktisk træk-og-slip-automatisering på Guru99 demoside https://demo.guru99.com/test/drag_drop.htmlMålet er at flytte BANK debetelementet ind i Konto debetsideområdet, så beløbet på $5000 korrekt bogføres som en debettransaktion.

Scenarie 1: Træk og slip ved hjælp af træk-og-slip-metoden

I dette scenarie trækkes kildeelementet (BANK) til destinationen (kontoens debetside) ved hjælp af dragAndDrop(source, target) metode, som accepterer kilde- og destinations-WebElements direkte.

Træk og slip scenarie 1 opsætning

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

Efter scriptet kører, BANK flisen bevæger sig ind i Konto debetområdet, og beløbet på $5000 er registreret som en debet.

Eclipse kører træk-og-slip-scriptet

Det visuelle resultat på demosiden ser sådan ud:

Træk og slip outputanimation

RELATEREDE ARTIKLER

Scenarie 2: Træk og slip ved hjælp af dragAndDropBy-metoden

dragAndDropBy(source, xOffset, yOffset) Metoden tilbyder præcision på pixelniveau. I stedet for at droppeping På et målelement flytter den kilden med et bestemt antal pixels langs X- og Y-akserne.

For at bestemme forskydningen skal du holde musen over destinationsområdet i din browser og aflæse pixelkoordinaterne med et værktøj som inspektørlinealen eller en skærmkoordinatudvidelse.

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

Scriptet flytter BANK-feltet med den angivne forskydning og placerer det på kontoens debetside, hvilket giver det samme økonomiske resultat som Scenarie 1.

Scenarie 3: Træk, slip og bekræft flere elementer

Dette scenarie kæder flere træk-og-slip-handlinger sammen og verificerer resultatet ved at hævde det endelige beløb på målet. Flere kildeelementer (BANK, SALG, 5000, 500) flyttes til deres respektive debet- og kreditzoner, og scriptet bekræfter, at totalerne stemmer overens med den forventede 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ønster demonstrerer, hvordan træk-og-slip kan kombineres med assertions for at validere funktionel adfærd, ikke kun visuel bevægelse.

Bedste Practices for Drag and Drop Automation

Træk-og-slip-tests er blandt de mest ustabile scripts i en Selenium suite, fordi de er afhængige af præcise musekoordinater og DOM-parathed. Følgende fremgangsmåder sikrer dem pålidelige:

  • Vent på elementer: Brug WebDriverWait med ExpectedConditions.elementToBeClickable før trækket aktiveres.
  • Foretrækker træk og slip frem for JavaScript-hacks: Native HTML5-trækhændelser kræver nogle gange en JavaScript-fallback, men brug først Actions API'en.
  • Rul målet ind i syne: En destination uden for skærmen forårsager lydløse fejl. Actions.scrollToElement eller JavaScriptrulning før træk.
  • Bekræft resultatet: Angiv altid en målbar tilstandsændring (tekst, attribut, antal) efter drop'et i stedet for at stole på den udførte handling.
  • Kør på en stabil opløsning: Pixel-offset-træk afbrydes, hvis viewport-størrelsen afviger fra den, der bruges til at beregne forskydningerne.

Ofte Stillede Spørgsmål

Træk og slip ind Selenium er en automatiseret musebevægelse, der opfanger et kildeelement og frigiver det på et mål. Den udføres via Actions-klassen ved hjælp af dragAndDrop eller dragAndDropBy.

DragAndDrop accepterer kilde- og destinations-WebElements. DragAndDropBy tager kilden plus x- og y-pixelforskydninger, hvilket giver præcis kontrol, når destinationen ikke er et diskret element.

build() kompilerer de sammenkædede interaktioner til en enkelt sammensat handling, og perform() udfører den. Uden perform() kører de køsatte trin aldrig mod browseren.

Mange HTML5-websteder bruger native trækhændelser, som Actions API'en ikke altid udløser. I disse tilfælde skal du sende dragstart-, dragover- og drop-hændelserne via executeScript som en JavaScript-reserve.

Åbn browserens DevTools, hold musen over destinationen, og læs elementets getBoundingClientRect-værdier.tracÆndre kildepositionen fra målpositionen for at få x- og y-forskydningerne i pixels.

Ja. Indpak kilde- og målopslagene i WebDriverWait med ExpectedConditions.elementToBeClickable, så trækket kun kører, når begge elementer er interaktive, hvilket reducerer ustabilisering i CI-kørsler.

AI-værktøjer leverer selvreparerende locators, der tilpasser sig, når XPaths ændres, og anbefaler stabile selektorer til kilde- og målelementer. Dette reducerer vedligeholdelsen af ​​træk-og-slip-suiter, der kører på tværs af udgivelser.

Ja. AI-kodningsassistenter forvandler et letforståeligt scenarie som "træk BANK til debetsiden og hæv totalen" til en komplet handlingskæde med træk og slip, opbygning, udførelse og et verifikationstrin.

Opsummer dette indlæg med: