Cara Menarik dan Melepaskan Selenium (Contoh)

Apa itu Drag and Drop? Selenium?

Seret dan lepas Selenium adalah interaksi otomatis yang mensimulasikan mengklik dan menahan elemen sumber, memindahkannya di halaman, dan melepaskannya di lokasi target. Ini banyak digunakan untuk menguji aplikasi web modern yang mengandalkan antarmuka seret dan lepas, seperti pengunggah file, papan kanban, toko online, dan lain-lain.ping keranjang belanja, dan pembuat dasbor.

In Selenium WebDriver, fungsi seret dan lepas dilakukan melalui tindakan kelas ini menyediakan metode khusus untuk menggabungkan gerakan mouse dan mengeksekusinya sebagai satu tindakan gabungan.

Kelas Actions mengekspos dua metode utama untuk otomatisasi seret dan lepas:

sintaks:

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

Di sini, dragAndDrop() mengambil WebElements sumber dan tujuan, sementara dragAndDropBy() mengambil elemen sumber dan offset piksel x/y untuk memindahkannya.

Cara Menarik dan Melepaskan Selenium

Tiga skenario berikut mendemonstrasikan otomatisasi seret dan lepas praktis pada GuruHalaman demo 99 https://demo.guru99.com/test/drag_drop.htmlTujuannya adalah untuk memindahkan BANK elemen debit ke dalam Akun area sisi debit sehingga jumlah $5000 dicatat dengan benar sebagai transaksi debit.

Skenario 1: Seret dan Lepas menggunakan metode dragAndDrop

Dalam skenario ini, elemen sumber (BANK) diseret ke tujuan (sisi debit Rekening) menggunakan dragAndDrop(source, target) Metode ini menerima WebElements sumber dan tujuan secara langsung.

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

Setelah skrip dijalankan, maka... BANK ubin bergerak ke dalam Akun area debit dan jumlah $5000 terdaftar sebagai debit.

Hasil visual pada halaman demo terlihat seperti ini:

Skenario 2: Seret dan Lepas menggunakan metode dragAndDropBy

The dragAndDropBy(source, xOffset, yOffset) Metode ini menawarkan presisi tingkat piksel. Alih-alih menjatuhkanping Pada elemen target, ia menggeser sumber sebanyak sejumlah piksel tertentu di sepanjang sumbu X dan Y.

Untuk menentukan offset, arahkan kursor ke area tujuan di browser Anda dan baca koordinat piksel dengan alat seperti penggaris inspektur atau ekstensi koordinat layar.

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

Skrip tersebut memindahkan ubin BANK dengan offset yang diberikan dan menempatkannya di sisi debit Akun, menghasilkan hasil keuangan yang sama seperti Skenario 1.

Skenario 3: Seret, lepas, dan verifikasi beberapa elemen

Skenario ini menggabungkan beberapa operasi seret dan lepas (drag-and-drop) dan memverifikasi hasilnya dengan menegaskan jumlah akhir pada target. Beberapa elemen sumber (BANK, SALES, 5000, 500) dipindahkan ke zona debit dan kredit masing-masing, dan skrip mengkonfirmasi bahwa totalnya sesuai dengan saldo yang diharapkan.

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

Pola ini menunjukkan bagaimana fungsi seret dan lepas (drag-and-drop) dapat dikombinasikan dengan pernyataan (assertions) untuk memvalidasi perilaku fungsional, bukan hanya pergerakan visual.

Praktik Terbaik untuk Otomatisasi Seret dan Lepas

Pengujian seret dan lepas termasuk di antara skrip yang paling tidak stabil. Selenium Suite ini kurang andal karena bergantung pada koordinat mouse yang tepat dan kesiapan DOM. Praktik-praktik berikut menjaga keandalannya:

• Tunggu hingga elemen-elemen tersedia: penggunaan WebDriverWait dengan ExpectedConditions.elementToBeClickable sebelum melakukan drag.
• Lebih suka fitur seret dan lepas daripada JavaTrik skrip: Peristiwa seret (drag) HTML5 asli terkadang membutuhkan JavaSkrip cadangan, tetapi utamakan API Actions.
• Gulir target hingga terlihat: Tujuan yang tidak ditampilkan di layar menyebabkan kegagalan tanpa pemberitahuan. Gunakan Actions.scrollToElement atau JavaGulir skrip sebelum menyeret.
• Verifikasi hasilnya: Selalu pastikan adanya perubahan status yang terukur (teks, atribut, jumlah) setelah penghapusan, alih-alih hanya mengandalkan bahwa aksi telah dijalankan.
• Jalankan pada resolusi yang stabil: Pergeseran piksel akan gagal jika ukuran viewport berbeda dari ukuran yang digunakan untuk menghitung offset.

Pertanyaan Umum Demo Slot