Hur man drar och släpper in Selenium (Exempel)
Krishna Rungta
⚡ Smart sammanfattning
Dra och släpp in Selenium WebDriver möjliggör automatiserad simulering av musbaserade interaktioner som flyttar ett källelement och släpper det på ett definierat mål. Klassen Actions driver dessa gester genom dragAndDrop- och dragAndDropBy-metoder för exakt, repeterbar webbläsarautomation.
Vad är dra och släpp? Selenium?
Dra och släpp in Selenium är en automatiserad interaktion som simulerar att man klickar och håller ett källelement, flyttar det över sidan och släpper det på en målplats. Det används ofta för att testa moderna webbapplikationer som använder dra-och-släpp-gränssnitt, såsom filuppladdare, kanban-tavlor, butikerping vagnar och instrumentpanelsbyggare.
In Selenium WebDriver, dra och släpp utförs via Actions klass, som tillhandahåller specialiserade metoder för att kedja musgester och utföra dem som en enda sammansatt åtgärd.
Klassen Actions visar två primära metoder för dra-och-släpp-automatisering:
Syntax:
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();Här, dragAndDrop() tar käll- och destinations-WebElements, medan dragAndDropBy() tar källelementet och x/y-pixelförskjutningarna för att flytta det.
Hur man drar och släpper in Selenium
Följande tre scenarier demonstrerar praktisk dra-och-släpp-automatisering på Guru99 demosida https://demo.guru99.com/test/drag_drop.htmlMålet är att flytta BANK debetelementet in i Min sida debetsidan så att beloppet på 5 000 USD korrekt redovisas som en debettransaktion.
Scenario 1: Dra och släpp med dra-och-släpp-metoden
I det här scenariot dras källelementet (BANK) till destinationen (kontots debetsida) med hjälp av dragAndDrop(source, target) metod, som accepterar käll- och destinations-WebElements direkt.
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 att skriptet körts, BANK kakel flyttas in i Min sida debetområdet och beloppet på 5 000 USD registreras som en debet.
Det visuella resultatet på demosidan ser ut så här:
Scenario 2: Dra och släpp med dragAndDropBy-metoden
Ocuco-landskapet dragAndDropBy(source, xOffset, yOffset) Metoden erbjuder precision på pixelnivå. Istället för att släppaping På ett målelement flyttas källan med ett angivet antal pixlar längs X- och Y-axlarna.
För att bestämma offseten, håll muspekaren över destinationsområdet i din webbläsare och läs pixelkoordinaterna med ett verktyg som inspektörslinjalen eller ett skärmkoordinattillägg.
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();
}
}Skriptet flyttar BANK-panelen med den angivna förskjutningen och släpper den på kontots debetsida, vilket ger samma ekonomiska resultat som scenario 1.
Scenario 3: Dra, släpp och verifiera flera element
Det här scenariot kedjar flera dra-och-släpp-operationer och verifierar resultatet genom att bekräfta slutbeloppet på målet. Flera källelement (BANK, FÖRSÄLJNING, 5000, 500) flyttas till sina respektive debet- och kreditzoner, och skriptet bekräftar att summorna matchar det förväntade saldot.
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);
}
}
}Detta mönster visar hur dra-och-släpp kan kombineras med påståenden för att validera funktionellt beteende, inte bara visuell rörelse.
Bästa praxis för dra-och-släpp-automatisering
Dra-och-släpp-tester är bland de mest osäkra skripten i en Selenium sviten eftersom de är beroende av exakta muskoordinater och DOM-beredskap. Följande metoder gör dem tillförlitliga:
- Vänta på element: Använda
WebDriverWaitmedExpectedConditions.elementToBeClickableinnan dragningen anropas. - Föredra dra och släpp framför JavaSkriptknep: Inbyggda HTML5-draghändelser behöver ibland en JavaSkriptreserv, men förlita dig först på Actions API.
- Scrolla målet till sikt: En destination utanför skärmen orsakar tysta fel.
Actions.scrollToElementeller ett JavaSkriptskrollning innan dra. - Verifiera resultatet: Ange alltid en mätbar tillståndsändring (text, attribut, antal) efter att åtgärden har släppts istället för att lita på att åtgärden kördes.
- Kör på en stabil upplösning: Pixelförskjutningsdragningar bryts om visningsportstorleken skiljer sig från den som används för att beräkna förskjutningarna.
