Comment glisser-déposer Selenium (Exemple)

Qu'est-ce que le glisser-déposer ? Selenium?

Glisser-déposer dans Selenium Il s'agit d'une interaction automatisée qui simule le clic maintenu sur un élément source, son déplacement sur la page et son relâchement à un emplacement cible. Elle est largement utilisée pour tester les applications web modernes qui reposent sur des interfaces de type glisser-déposer, telles que les modules de téléchargement de fichiers, les tableaux Kanban et les boutiques en ligne.ping paniers et outils de création de tableaux de bord.

In Selenium WebDriver, le glisser-déposer s'effectue via le Action classe, qui fournit des méthodes spécialisées pour enchaîner les gestes de la souris et les exécuter comme une seule action composite.

La classe Actions expose deux méthodes principales pour l'automatisation du glisser-déposer :

syntaxe:

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

Ici, dragAndDrop() prend les éléments Web source et destination, tandis que dragAndDropBy() prend l'élément source et les décalages en pixels x/y de lequel le déplacer.

Comment glisser-déposer Selenium

Les trois scénarios suivants illustrent l'automatisation pratique par glisser-déposer sur le Gurupage de démonstration 99 https://demo.guru99.com/test/drag_drop.htmlL'objectif est de déplacer le BANQUE élément de débit dans le Compte zone du côté débit afin que le montant de 5000 $ soit correctement comptabilisé comme une transaction au débit.

Scénario 1 : Glisser-déposer à l’aide de la méthode dragAndDrop

Dans ce scénario, l'élément source (BANQUE) est glissé vers la destination (Débit du compte) à l'aide de dragAndDrop(source, target) méthode qui accepte directement les WebElements source et destination.

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

Une fois le script exécuté, le BANQUE La tuile se déplace dans le Compte zone débit et le montant de 5000 $ est enregistré comme un débit.

Le résultat visuel sur la page de démonstration ressemble à ceci :

Scénario 2 : Glisser-déposer à l’aide de la méthode dragAndDropBy

Le dragAndDropBy(source, xOffset, yOffset) Cette méthode offre une précision au niveau du pixel. Au lieu de la chuteping Sur un élément cible, il déplace la source d'un nombre spécifié de pixels le long des axes X et Y.

Pour déterminer le décalage, survolez la zone de destination dans votre navigateur et lisez les coordonnées en pixels à l'aide d'un outil comme la règle de l'inspecteur ou une extension de coordonnées d'écran.

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

Le script déplace la tuile BANQUE selon le décalage fourni et la dépose du côté débit du compte, produisant le même résultat financier que le scénario 1.

Scénario 3 : Glisser-déposer et vérifier plusieurs éléments

Ce scénario enchaîne plusieurs opérations de glisser-déposer et vérifie le résultat en affichant le montant final sur la cible. Plusieurs éléments sources (BANQUE, VENTES, 5000, 500) sont déplacés vers leurs zones de débit et de crédit respectives, et le script confirme que les totaux correspondent au solde attendu.

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

Ce modèle illustre comment le glisser-déposer peut être combiné à des assertions pour valider un comportement fonctionnel, et pas seulement un mouvement visuel.

Meilleures pratiques pour l'automatisation du glisser-déposer

Les tests par glisser-déposer figurent parmi les scripts les plus instables. Selenium Ces suites logicielles dépendent de coordonnées précises de la souris et de la disponibilité du DOM. Les pratiques suivantes garantissent leur fiabilité :

• Attendez les éléments : Utilisez le WebDriverWait au ExpectedConditions.elementToBeClickable avant d'invoquer le drag.
• Je préfère glisser-déposer JavaAstuces de script : Les événements de glisser-déposer HTML5 natifs nécessitent parfois un JavaUtilisation d'un script de repli, mais privilégiez d'abord l'API Actions.
• Faites défiler la cible pour la rendre visible : Une destination hors écran provoque des erreurs silencieuses. Utilisez Actions.scrollToElement JavaDéfilez le script avant de le faire glisser.
• Vérifier le résultat : Toujours exiger une modification d'état mesurable (texte, attribut, nombre) après l'opération au lieu de se fier à l'exécution de l'action.
• Exécuter sur une résolution stable : Le décalage en pixels ne fonctionne plus si la taille de la fenêtre d'affichage diffère de celle utilisée pour calculer les décalages.

FAQ