कैसे खींचें और छोड़ें Selenium (उदाहरण)
⚡ स्मार्ट सारांश
खींचकर छोड़ें Selenium WebDriver माउस-आधारित अंतःक्रियाओं का स्वचालित अनुकरण सक्षम बनाता है, जिसमें स्रोत तत्व को स्थानांतरित करना और उसे परिभाषित लक्ष्य पर छोड़ना शामिल है। Actions क्लास dragAndDrop और dragAndDropBy विधियों के माध्यम से इन इशारों को शक्ति प्रदान करती है, जिससे सटीक और दोहराने योग्य ब्राउज़र स्वचालन संभव होता है।

ड्रैग एंड ड्रॉप क्या है? Selenium?
खींचकर छोड़ें Selenium यह एक स्वचालित इंटरैक्शन है जो किसी स्रोत तत्व पर क्लिक करके उसे दबाए रखने, उसे पृष्ठ पर स्थानांतरित करने और लक्ष्य स्थान पर छोड़ने का अनुकरण करता है। इसका व्यापक रूप से उपयोग आधुनिक वेब अनुप्रयोगों के परीक्षण के लिए किया जाता है जो ड्रैग-एंड-ड्रॉप इंटरफेस पर निर्भर करते हैं, जैसे कि फ़ाइल अपलोडर, कानबन बोर्ड, शॉपिंग मॉल आदि।ping कार्ट और डैशबोर्ड बिल्डर।
In Selenium वेबड्राइवर में, ड्रैग एंड ड्रॉप का कार्य वेबड्राइवर के माध्यम से किया जाता है। क्रियाएँ यह क्लास माउस जेस्चर को आपस में जोड़ने और उन्हें एक ही समग्र क्रिया के रूप में निष्पादित करने के लिए विशेष विधियाँ प्रदान करती है।
एक्शन क्लास ड्रैग-एंड-ड्रॉप ऑटोमेशन के लिए दो प्राथमिक मेथड प्रदान करती है:
सिंटेक्स:
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();
यहाँ, dragAndDrop() स्रोत और गंतव्य वेबएलिमेंट्स लेता है, जबकि dragAndDropBy() यह स्रोत तत्व और उसे स्थानांतरित करने के लिए आवश्यक x/y पिक्सेल ऑफसेट लेता है।
कैसे खींचें और छोड़ें Selenium
निम्नलिखित तीन परिदृश्य ड्रैग-एंड-ड्रॉप स्वचालन को व्यावहारिक रूप से प्रदर्शित करते हैं। Guru99 डेमो पेज https://demo.guru99.com/test/drag_drop.htmlलक्ष्य है आगे बढ़ना बैंक डेबिट तत्व को इसमें शामिल किया गया है लेखा डेबिट पक्ष क्षेत्र ताकि 5000 डॉलर की राशि को डेबिट लेनदेन के रूप में सही ढंग से दर्ज किया जा सके।
परिदृश्य 1: dragAndDrop विधि का उपयोग करके ड्रैग और ड्रॉप करना
इस परिदृश्य में, स्रोत तत्व (बैंक) को गंतव्य (खाता डेबिट पक्ष) पर ड्रैग किया जाता है। dragAndDrop(source, target) यह विधि स्रोत और गंतव्य वेबएलिमेंट्स को सीधे स्वीकार करती है।
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();
}
}
स्क्रिप्ट चलने के बाद, बैंक टाइल अंदर चली जाती है लेखा डेबिट क्षेत्र में 5000 डॉलर की राशि डेबिट के रूप में दर्ज की गई है।
डेमो पेज पर दृश्य परिणाम कुछ इस प्रकार दिखता है:
परिदृश्य 2: dragAndDropBy विधि का उपयोग करके ड्रैग और ड्रॉप करना
RSI dragAndDropBy(source, xOffset, yOffset) यह विधि पिक्सेल-स्तर की सटीकता प्रदान करती है। ड्रॉप के बजायping किसी लक्ष्य तत्व पर, यह स्रोत को X और Y अक्षों के अनुदिश निर्दिष्ट संख्या में पिक्सेल द्वारा स्थानांतरित करता है।
ऑफसेट निर्धारित करने के लिए, अपने ब्राउज़र में गंतव्य क्षेत्र पर माउस ले जाएं और इंस्पेक्टर रूलर या स्क्रीन-कोऑर्डिनेट एक्सटेंशन जैसे टूल का उपयोग करके पिक्सेल निर्देशांक पढ़ें।
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();
}
}
स्क्रिप्ट बैंक टाइल को दिए गए ऑफसेट द्वारा स्थानांतरित करती है और इसे खाता डेबिट पक्ष पर छोड़ देती है, जिससे परिदृश्य 1 के समान वित्तीय परिणाम प्राप्त होता है।
परिदृश्य 3: एकाधिक तत्वों को खींचें, छोड़ें और सत्यापित करें
इस परिदृश्य में कई ड्रैग-एंड-ड्रॉप ऑपरेशन एक साथ किए जाते हैं और लक्ष्य पर अंतिम राशि दर्ज करके परिणाम की पुष्टि की जाती है। कई स्रोत तत्व (बैंक, बिक्री, 5000, 500) अपने-अपने डेबिट और क्रेडिट ज़ोन में स्थानांतरित किए जाते हैं, और स्क्रिप्ट पुष्टि करती है कि कुल योग अपेक्षित शेष राशि से मेल खाता है।
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);
}
}
}
यह पैटर्न दर्शाता है कि ड्रैग-एंड-ड्रॉप को अभिकथन के साथ कैसे जोड़ा जा सकता है ताकि न केवल दृश्य गति बल्कि कार्यात्मक व्यवहार को भी मान्य किया जा सके।
ड्रैग एंड ड्रॉप ऑटोमेशन के लिए सर्वोत्तम अभ्यास
ड्रैग-एंड-ड्रॉप परीक्षण स्क्रिप्ट में सबसे अस्थिर स्क्रिप्ट में से एक हैं। Selenium क्योंकि सूट सटीक माउस निर्देशांक और DOM तत्परता पर निर्भर करते हैं। निम्नलिखित उपाय उन्हें विश्वसनीय बनाए रखते हैं:
- तत्वों की प्रतीक्षा करें: उपयोग
WebDriverWaitसाथ मेंExpectedConditions.elementToBeClickableड्रैग को लागू करने से पहले। - ड्रैग एंड ड्रॉप को प्राथमिकता दें Javaस्क्रिप्ट हैक्स: नेटिव HTML5 ड्रैग इवेंट्स को कभी-कभी आवश्यकता होती है Javaस्क्रिप्ट फॉलबैक का विकल्प है, लेकिन पहले एक्शन एपीआई पर भरोसा करें।
- लक्ष्य को स्क्रॉल करके दृश्य में लाएं: स्क्रीन से बाहर का गंतव्य मौन विफलता का कारण बनता है। उपयोग करें
Actions.scrollToElementया एक Javaड्रैग करने से पहले स्क्रिप्ट स्क्रॉल करें। - परिणाम की पुष्टि करें: ड्रॉप के बाद हमेशा मापने योग्य स्थिति परिवर्तन (पाठ, विशेषता, संख्या) की पुष्टि करें, न कि यह मान लें कि कार्रवाई सफल रही।
- स्थिर रिज़ॉल्यूशन पर चलाएँ: यदि व्यूपोर्ट का आकार ऑफसेट की गणना के लिए उपयोग किए गए आकार से भिन्न होता है, तो पिक्सेल-ऑफसेट ड्रैग विफल हो जाते हैं।





