Hogyan húzz be és vidd be Selenium (Példa)
Krishna Rungta
⚡ Okos összefoglaló
Húzd be Selenium A WebDriver lehetővé teszi az egér alapú interakciók automatikus szimulációját, amelyek egy forráselemet mozgatnak, majd egy meghatározott célponton elengedik. Az Actions osztály ezeket a gesztusokat a dragAndDrop és a dragAndDropBy metódusokon keresztül hajtja végre a precíz, megismételhető böngészőautomatizálás érdekében.
Mi a húzás és ejtés funkció? Selenium?
Húzd be Selenium egy automatizált interakció, amely szimulálja egy forráselemre kattintást és nyomva tartását, az oldalon való mozgatását, majd egy célhelyen való elengedését. Széles körben használják modern webes alkalmazások tesztelésére, amelyek drag-and-drop felületeken alapulnak, mint például a fájlfeltöltők, kanban táblák, shop.ping bevásárlókocsik és műszerfal-készítők.
In Selenium WebDriver, a húzás és elengedés műveletet a Hozzászólások osztály, amely specializált metódusokat biztosít egérgesztusok láncolásához és egyetlen összetett műveletként történő végrehajtásához.
Az Actions osztály két fő módszert kínál a drag-and-drop automatizáláshoz:
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();Itt, dragAndDrop() veszi a forrás és a cél webelemeket, míg dragAndDropBy() a forráselemet és az x/y pixel eltolásokat veszi figyelembe az elmozdításához.
Hogyan húzz be és vidd be Selenium
A következő három forgatókönyv a gyakorlati drag-and-drop automatizálást mutatja be a következőn: Guru99 demóoldal https://demo.guru99.com/test/drag_drop.htmlA cél az, hogy elmozdítsuk a BANK terhelési elem a Fiók terhelési oldali területet, hogy az 5000 dolláros összeg helyesen legyen elszámolva terhelési tranzakcióként.
1. forgatókönyv: Húzd és vidd módszerrel húzd át a mappát a dragAndDrop metódussal
Ebben az esetben a forráselemet (BANK) a célelemre (Számla terhelendő oldala) húzzuk a dragAndDrop(source, target) metódus, amely közvetlenül elfogadja a forrás és a cél webelemeket.
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();
}
}A szkript lefutása után a BANK a csempe bemozdul a Fiók terhelési területen, és az 5000 dolláros összeg terhelésként van regisztrálva.
A demóoldalon látható vizuális eredmény így néz ki:
2. forgatókönyv: Húzd és vidd módszer a dragAndDropBy metódussal
Az dragAndDropBy(source, xOffset, yOffset) a módszer pixel szintű pontosságot kínál. A csepegés helyettping egy célelemen a forrást egy megadott számú pixellel mozgatja az X és Y tengelyek mentén.
Az eltolás meghatározásához vigye az egérmutatót a böngésző célterülete fölé, és olvassa le a pixelkoordinátákat egy eszközzel, például az inspector vonalzóval vagy egy képernyőkoordináták-bővítménnyel.
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();
}
}A szkript a megadott eltolással elmozdítja a BANK csempét, és a Számla tartozik oldalára helyezi, ugyanazt a pénzügyi eredményt produkálva, mint az 1. forgatókönyvben.
3. forgatókönyv: Több elem áthúzása, elengedése és ellenőrzése
Ez a forgatókönyv több drag-and-drop műveletet láncol össze, és az eredményt a végső összeg célra történő rögzítésével ellenőrzi. Több forráselem (BANK, SALES, 5000, 500) átkerül a megfelelő terhelési és jóváírási zónákba, és a szkript megerősíti, hogy az összegek megegyeznek a várt egyenleggel.
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);
}
}
}Ez a minta bemutatja, hogyan kombinálható a drag and drop (fogd és vidd) más állításokkal a funkcionális viselkedés, nem csak a vizuális mozgás validálására.
A drag and drop automatizálás bevált gyakorlatai
A drag-and-drop tesztek a legbizonytalanabb szkriptek közé tartoznak. Selenium csomagban, mivel pontos egérkoordinátáktól és DOM-készültségtől függenek. A következő gyakorlatok biztosítják a megbízhatóságukat:
- Várjon az elemekre: Felhasználás
WebDriverWaitaholExpectedConditions.elementToBeClickablemielőtt meghívná a húzást. - Inkább a dragAndDrop módszert részesítem előnyben JavaSzkript trükkök: A natív HTML5 húzási eseményekhez néha szükség van egy JavaSzkript tartalék, de először az Actions API-ra kell támaszkodni.
- Görgesd a célt a látómezőbe: A képernyőn kívüli célhelyek csendes hibákat okoznak.
Actions.scrollToElementvagy JavaSzkript görgetése húzás előtt. - Az eredmény ellenőrzése: Mindig mérhető állapotváltozást (szöveg, attribútum, darabszám) állíts be a drop után ahelyett, hogy a művelet lefuttatásában bíznál.
- Stabil felbontáson futtatás: A pixel-eltolásos húzások megszakadnak, ha a nézetablak mérete eltér az eltolások kiszámításához használtól.
