Kako povući i ispustiti Selenium (Primjer)

By: Krishna Rungta Krishna Rungta
Hours Ažurirano

⚡ Pametni sažetak

Povuci i ispusti Selenium WebDriver omogućuje automatiziranu simulaciju interakcija mišem koje pomiču izvorni element i otpuštaju ga na definiranom cilju. Klasa Actions pokreće ove geste putem metoda dragAndDrop i dragAndDropBy za preciznu i ponovljivu automatizaciju preglednika.

  • 🎓 Koristite klasu Actions za izradu gesta tipkovnice i miša, a zatim pozovite build() i perform() za njihovo izvršavanje na stranici.
  • 🌟 Odaberite dragAndDrop(source, target) kada imate oba elementa i dragAndDropBy(source, xOffset, yOffset) kada vam je potrebna preciznost na razini piksela.
  • 🚀 Uvijek pričekajte da izvorni i ciljni elementi budu prisutni prije pozivanja operacije povlačenja kako biste izbjegli nestabilne testove.
  • 🎖️ Provjerite pad vizualno ili potvrđivanjem promjena atributa na cilju kako bi test potvrdio stvarnu interakciju, a ne samo radnju u redu čekanja.
  • 🏆 Lokatori potpomognuti umjetnom inteligencijom ispravljaju oštećene XPath-ove nakon ažuriranja korisničkog sučelja, smanjujući održavanje za drag-and-drop pakete koji se izvode u CI cjevovodima.
Pročitaj više

Povuci i ispusti Selenium

Što je "povuci i ispusti" Selenium?

Povuci i ispusti Selenium je automatizirana interakcija koja simulira klik i držanje izvornog elementa, njegovo pomicanje po stranici i otpuštanje na ciljnoj lokaciji. Široko se koristi za testiranje modernih web aplikacija koje se oslanjaju na sučelja s funkcijom "povuci i ispusti", kao što su programi za prijenos datoteka, kanban ploče, trgovineping kolica i alate za izradu nadzornih ploča.

In Selenium WebDriver, povlačenje i ispuštanje se izvodi putem Akcije klasa koja pruža specijalizirane metode za lančanje gesti miša i njihovo izvršavanje kao jedne složene akcije.

Povuci i ispusti Selenium

Klasa Actions otkriva dvije primarne metode za automatizaciju povlačenja i ispuštanja:

Sintaksa:

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

Ovdje, dragAndDrop() uzima izvorne i odredišne ​​WebElemente, dok dragAndDropBy() uzima izvorni element i x/y pomake piksela za koje ga pomiče.

Kako povući i ispustiti Selenium

Sljedeća tri scenarija demonstriraju praktičnu automatizaciju povlačenja i ispuštanja na Guru99 demo stranica https://demo.guru99.com/test/drag_drop.htmlCilj je pomaknuti BANKE teretni element u Korisnički račun područje zaduženja kako bi se iznos od 5000 USD ispravno evidentirao kao zadužena transakcija.

Scenarij 1: Povlačenje i ispuštanje pomoću metode dragAndDrop

U ovom scenariju, izvorni element (BANK) se povlači na odredište (debitna strana računa) pomoću dragAndDrop(source, target) metoda koja izravno prihvaća izvorne i odredišne ​​WebElemente.

Postavljanje scenarija 1 povlačenja i ispuštanja

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

Nakon što se skripta pokrene, BANKE pločica se pomiče u Korisnički račun područje zaduženja i iznos od 5000 USD registriran je kao zaduženje.

Eclipse pokretanje skripte za povlačenje i ispuštanje

Vizualni rezultat na demo stranici izgleda ovako:

Animacija izlaza povlačenjem i ispuštanjem

POVEZANI ČLANCI

Scenarij 2: Povlačenje i ispuštanje pomoću metode dragAndDropBy

The dragAndDropBy(source, xOffset, yOffset) metoda nudi preciznost na razini piksela. Umjesto padaping na ciljnom elementu pomiče izvor za određeni broj piksela duž X i Y osi.

Za određivanje pomaka, zadržite pokazivač iznad odredišnog područja u pregledniku i očitajte koordinate piksela alatom poput inspektorskog ravnala ili proširenja za koordinate zaslona.

Identificiranje pomaka piksela za 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();
    }
}

Skripta pomiče pločicu BANK za zadani pomak i spušta je na terećenje računa, proizvodeći isti financijski rezultat kao u scenariju 1.

Scenarij 3: Povucite, ispustite i provjerite više elemenata

Ovaj scenarij povezuje više operacija povlačenja i ispuštanja te provjerava rezultat potvrđivanjem konačnog iznosa na cilju. Nekoliko izvornih elemenata (BANK, SALES, 5000, 500) premješta se u odgovarajuće debitne i kreditne zone, a skripta potvrđuje da ukupni iznosi odgovaraju očekivanom stanju.

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

Ovaj uzorak pokazuje kako se povlačenje i ispuštanje može kombinirati s tvrdnjama za validaciju funkcionalnog ponašanja, ne samo vizualnog kretanja.

Najbolje prakse za automatizaciju povlačenja i ispuštanja

Testovi "drag-and-drop" su među najnepouzdanijim skriptama u Selenium paketa jer ovise o preciznim koordinatama miša i spremnosti DOM-a. Sljedeće prakse ih održavaju pouzdanima:

  • Pričekajte elemente: Koristiti WebDriverWait sa ExpectedConditions.elementToBeClickable prije pozivanja povlačenja.
  • Preferiraj dragAndDrop u odnosu na JavaTrikovi za skripte: Izvorni HTML5 događaji povlačenja ponekad trebaju JavaRezervna skripta, ali se prvo oslonite na Actions API.
  • Pomaknite cilj u prikaz: Odredište izvan zaslona uzrokuje tihe pogreške. Koristite Actions.scrollToElement ili JavaPomicanje skripte prije povlačenja.
  • Provjerite ishod: Uvijek potvrdite mjerljivu promjenu stanja (tekst, atribut, broj) nakon ispuštanja umjesto da vjerujete da je akcija izvršena.
  • Pokreni na stabilnoj rezoluciji: Povlačenje pomaka piksela prekida se ako se veličina prikaza razlikuje od one koja se koristi za izračun pomaka.

Pitanja i odgovori

Povucite i ispustite Selenium je automatizirana gesta miša koja podiže izvorni element i otpušta ga na cilju. Izvodi se putem klase Actions pomoću dragAndDrop ili dragAndDropBy.

dragAndDrop prihvaća izvorne i odredišne ​​WebElemente. dragAndDropBy uzima izvor plus x i y pomake piksela, dajući preciznu kontrolu kada odredište nije diskretni element.

build() kompilira ulančane interakcije u jednu složenu Action, a perform() je izvršava. Bez perform(), koraci u redu čekanja nikada se ne izvršavaju u pregledniku.

Mnoge HTML5 stranice koriste izvorne događaje povlačenja koje Actions API ne pokreće uvijek. U tim slučajevima, događaje dragstart, dragover i drop pošaljite putem executeScript-a kao JavaRezervna skripta.

Otvorite DevTools u pregledniku, zadržite pokazivač miša iznad odredišta i pročitajte vrijednosti getBoundingClientRect elementa.tracOdvojite izvorni položaj od ciljnog položaja kako biste dobili x i y pomake u pikselima.

Da. Omotajte izvorne i ciljne pretrage u WebDriverWait s ExpectedConditions.elementToBeClickable tako da se povlačenje izvršava tek nakon što su oba elementa interaktivna, smanjujući nestabilnost u CI izvršavanjima.

Alati umjetne inteligencije pružaju lokatore s mogućnošću samoobnavljanja koji se prilagođavaju promjeni XPath-ova i preporučuju stabilne selektore za izvorne i ciljne elemente. To smanjuje održavanje za drag-and-drop pakete koji se izvode u različitim izdanjima.

Da. AI kodirajući asistenti pretvaraju jednostavan scenarij poput "povuci BANKU na debitnu stranu i potvrdi ukupan iznos" u cjeloviti lanac akcija s povlačenjem i ispuštanjem, izgradnjom, izvršavanjem i korakom provjere.

Sažmite ovu objavu uz: