Jak przeciągnąć i upuścić Selenium (Przykład)

Czym jest funkcja „przeciągnij i upuść” Selenium?

Przeciągnij i upuść Selenium To zautomatyzowana interakcja symulująca kliknięcie i przytrzymanie elementu źródłowego, przesunięcie go po stronie i zwolnienie w miejscu docelowym. Jest szeroko stosowana do testowania nowoczesnych aplikacji internetowych, które opierają się na interfejsach typu „przeciągnij i upuść”, takich jak programy do przesyłania plików, tablice kanban, sklepy.ping koszyki i narzędzia do tworzenia pulpitów nawigacyjnych.

In Selenium WebDriver, przeciąganie i upuszczanie odbywa się za pomocą Akcje Klasa, która zapewnia specjalistyczne metody umożliwiające łączenie gestów myszy i wykonywanie ich jako pojedynczej, złożonej akcji.

Klasa Actions udostępnia dwie podstawowe metody automatyzacji operacji „przeciągnij i upuść”:

Składnia:

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

Tutaj, dragAndDrop() pobiera źródłowe i docelowe elementy WebElements, podczas gdy dragAndDropBy() pobiera element źródłowy i przesunięcie pikseli x/y, o które ma zostać przesunięty.

Jak przeciągnąć i upuścić Selenium

Poniższe trzy scenariusze przedstawiają praktyczną automatyzację przeciągania i upuszczania na komputerze. Guru99 strona demonstracyjna https://demo.guru99.com/test/drag_drop.htmlCelem jest przesunięcie BANK element debetowy do Konto obszar strony debetowej, aby kwota 5000 USD została prawidłowo zaksięgowana jako transakcja debetowa.

Scenariusz 1: Przeciąganie i upuszczanie za pomocą metody dragAndDrop

W tym scenariuszu element źródłowy (BANK) jest przeciągany do miejsca docelowego (strona debetowa konta) za pomocą dragAndDrop(source, target) metoda, która bezpośrednio akceptuje źródłowe i docelowe elementy WebElement.

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

Po uruchomieniu skryptu BANK kafelek przesuwa się do Konto obszar debetowy, a kwota 5000 USD rejestrowana jest jako debet.

Efekt wizualny na stronie demonstracyjnej wygląda następująco:

Scenariusz 2: Przeciąganie i upuszczanie za pomocą metody dragAndDropBy

dragAndDropBy(source, xOffset, yOffset) Metoda ta oferuje precyzję na poziomie pikseli. Zamiast upuszczaniaping na elemencie docelowym przesuwa źródło o określoną liczbę pikseli wzdłuż osi X i Y.

Aby ustalić przesunięcie, najedź kursorem na obszar docelowy w przeglądarce i odczytaj współrzędne pikseli za pomocą narzędzia, takiego jak linijka inspektora lub rozszerzenie współrzędnych ekranowych.

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

Skrypt przesuwa kafelek BANK o podaną wartość przesunięcia i umieszcza go po stronie debetu konta, generując taki sam wynik finansowy jak w scenariuszu 1.

Scenariusz 3: Przeciągnij, upuść i zweryfikuj wiele elementów

Ten scenariusz łączy wiele operacji „przeciągnij i upuść” i weryfikuje wynik, podając kwotę końcową dla celu. Kilka elementów źródłowych (BANK, SPRZEDAŻ, 5000, 500) zostaje przeniesionych do odpowiednich stref debetowych i kredytowych, a skrypt potwierdza, że ​​sumy są zgodne z oczekiwanym saldem.

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

Ten wzorzec pokazuje, jak można połączyć przeciąganie i upuszczanie z asercjami w celu sprawdzenia zachowania funkcjonalnego, a nie tylko ruchu wizualnego.

Najlepsze praktyki automatyzacji metodą „przeciągnij i upuść”

Testy typu „przeciągnij i upuść” należą do najbardziej niestabilnych skryptów w Selenium Suite, ponieważ zależą od precyzyjnych współrzędnych myszy i gotowości DOM. Poniższe praktyki zapewniają ich niezawodność:

• Poczekaj na elementy: Zastosowanie WebDriverWait w ExpectedConditions.elementToBeClickable przed wywołaniem przeciągania.
• Wolę przeciąganie i upuszczanie niż JavaSztuczki skryptowe: Natywne zdarzenia przeciągania HTML5 czasami wymagają JavaSkrypt awaryjny, ale najpierw należy skorzystać z interfejsu API działań.
• Przewiń cel do widoku: Cel poza ekranem powoduje ciche awarie. Użyj Actions.scrollToElement lub JavaSkrypt przewijania przed przeciąganiem.
• Sprawdź wynik: Zawsze potwierdzaj mierzalną zmianę stanu (tekst, atrybut, liczba) po upuszczeniu zamiast ufać wykonanej akcji.
• Uruchom na stabilnej rozdzielczości: Przeciąganie z przesunięciem pikseli jest przerywane, jeśli rozmiar obszaru widoku różni się od rozmiaru użytego do obliczenia przesunięć.

FAQ