Jak přetáhnout a pustit Selenium (Příklad)
Krishna Rungta
⚡ Chytré shrnutí
Přetáhněte a vložte Selenium WebDriver umožňuje automatizovanou simulaci interakcí myši, které přesouvají zdrojový prvek a uvolňují ho na definovaném cíli. Třída Actions tato gesta realizuje pomocí metod dragAndDrop a dragAndDropBy pro přesnou a opakovatelnou automatizaci prohlížeče.
Co je Drag and Drop v Selenium?
Přetáhněte a vložte Selenium je automatizovaná interakce, která simuluje kliknutí a podržení zdrojového prvku, jeho přesun po stránce a jeho uvolnění na cílovém místě. Široce se používá k testování moderních webových aplikací, které se spoléhají na rozhraní typu drag-and-drop, jako jsou například nástroje pro nahrávání souborů, kanbanové nástěnky, obchody.ping vozíky a nástroje pro tvorbu dashboardů.
In Selenium WebDriver, drag and drop se provádí přes Akce třída, která poskytuje specializované metody pro řetězení gest myši a jejich provádění jako jedné složené akce.
Třída Actions nabízí dvě primární metody pro automatizaci drag-and-drop:
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();Zde, dragAndDrop() bere zdrojové a cílové WebElements, zatímco dragAndDropBy() bere zdrojový element a jeho posuny o osy x/y.
Jak přetáhnout a pustit Selenium
Následující tři scénáře demonstrují praktickou automatizaci drag-and-drop na Guru99 demo stránek https://demo.guru99.com/test/drag_drop.htmlCílem je posunout BANK debetní prvek do Účet oblast debetní strany, aby částka 5 000 USD byla správně zaúčtována jako debetní transakce.
Scénář 1: Přetažení pomocí metody dragAndDrop
V tomto scénáři je zdrojový element (BANK) přetažen do cíle (strana debetu účtu) pomocí dragAndDrop(source, target) metoda, která přímo přijímá zdrojové a cílové WebElements.
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 spuštění skriptu, BANK dlaždice se přesune do Účet debetní oblast a částka 5 000 USD je zaregistrována jako debet.
Vizuální výsledek na demo stránce vypadá takto:
Scénář 2: Přetažení pomocí metody dragAndDropBy
Jedno dragAndDropBy(source, xOffset, yOffset) metoda nabízí přesnost na úrovni pixelů. Místo dropuping na cílovém prvku posune zdroj o zadaný počet pixelů podél os X a Y.
Chcete-li určit odsazení, najeďte myší na cílovou oblast v prohlížeči a přečtěte si souřadnice pixelů pomocí nástroje, jako je inspektor pravítko nebo rozšíření screen-coordinates.
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();
}
}Skript posune dlaždici BANKA o zadaný offset a umístí ji na stranu debetu účtu, čímž dosáhne stejného finančního výsledku jako ve scénáři 1.
Scénář 3: Přetažení a ověření více prvků
Tento scénář propojuje několik operací přetažení a ověřuje výsledek stanovením konečné částky v cíli. Několik zdrojových prvků (BANK, SALES, 5000, 500) je přesunuto do příslušných debetních a kreditních zón a skript potvrzuje, že celkové částky odpovídají očekávanému zůstatku.
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);
}
}
}Tento vzor ukazuje, jak lze drag-and-drop kombinovat s asercemi k ověření funkčního chování, nejen vizuálního pohybu.
Nejlepší postupy pro automatizaci drag and drop
Testy typu drag-and-drop patří mezi nejnespolehlivější skripty v Selenium sady, protože závisí na přesných souřadnicích myši a připravenosti DOM. Následující postupy zajišťují jejich spolehlivost:
- Čekání na prvky: Použijte
WebDriverWaitsExpectedConditions.elementToBeClickablepřed vyvoláním přetažení. - Upřednostňovat dragAndDrop před JavaTriky pro skripty: Nativní události přetahování HTML5 někdy potřebují JavaZáložní skript, ale nejprve se spolehněte na rozhraní Actions API.
- Posuňte cíl do zobrazení: Cíl mimo obrazovku způsobuje tiché selhání. Použití
Actions.scrollToElementnebo JavaPřed přetažením posouvejte skript. - Ověřte výsledek: Vždy po odstranění prohlaste měřitelnou změnu stavu (text, atribut, počet) místo toho, abyste se spoléhali na spuštění akce.
- Spustit na stabilním rozlišení: Přetahování s odsazením pixelů se přeruší, pokud se velikost zobrazovacího okna liší od velikosti použité k výpočtu odsazení.
