कैसे खींचें और छोड़ें Selenium (उदाहरण)

⚡ स्मार्ट सारांश

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

  • 🎓 कीबोर्ड और माउस जेस्चर बनाने के लिए Actions क्लास का उपयोग करें, फिर उन्हें पेज पर निष्पादित करने के लिए build() और perform() फ़ंक्शन को कॉल करें।
  • 🌟 जब आपके पास दोनों तत्व हों तो dragAndDrop(source, target) चुनें, और जब आपको पिक्सेल-स्तर की सटीकता की आवश्यकता हो तो dragAndDropBy(source, xOffset, yOffset) चुनें।
  • 🚀 परीक्षण में गड़बड़ी से बचने के लिए, ड्रैग ऑपरेशन शुरू करने से पहले हमेशा स्रोत और लक्ष्य तत्वों के मौजूद होने की प्रतीक्षा करें।
  • 🎖️ ड्रॉप की पुष्टि दृष्टिगत रूप से करें या लक्ष्य पर विशेषता परिवर्तनों की पुष्टि करके करें ताकि परीक्षण वास्तविक अंतःक्रिया की पुष्टि करे, न कि केवल कतारबद्ध क्रिया की।
  • 🏆 एआई-सहायता प्राप्त लोकेटर यूआई अपडेट के बाद टूटे हुए एक्सपाथ को ठीक करते हैं, जिससे सीआई पाइपलाइन में चल रहे ड्रैग-एंड-ड्रॉप सूट के रखरखाव में कमी आती है।

खींचकर छोड़ें Selenium

ड्रैग एंड ड्रॉप क्या है? Selenium?

खींचकर छोड़ें Selenium यह एक स्वचालित इंटरैक्शन है जो किसी स्रोत तत्व पर क्लिक करके उसे दबाए रखने, उसे पृष्ठ पर स्थानांतरित करने और लक्ष्य स्थान पर छोड़ने का अनुकरण करता है। इसका व्यापक रूप से उपयोग आधुनिक वेब अनुप्रयोगों के परीक्षण के लिए किया जाता है जो ड्रैग-एंड-ड्रॉप इंटरफेस पर निर्भर करते हैं, जैसे कि फ़ाइल अपलोडर, कानबन बोर्ड, शॉपिंग मॉल आदि।ping कार्ट और डैशबोर्ड बिल्डर।

In Selenium वेबड्राइवर में, ड्रैग एंड ड्रॉप का कार्य वेबड्राइवर के माध्यम से किया जाता है। क्रियाएँ यह क्लास माउस जेस्चर को आपस में जोड़ने और उन्हें एक ही समग्र क्रिया के रूप में निष्पादित करने के लिए विशेष विधियाँ प्रदान करती है।

खींचकर छोड़ें 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) यह विधि स्रोत और गंतव्य वेबएलिमेंट्स को सीधे स्वीकार करती है।

ड्रैग एंड ड्रॉप सिनेरियो 1 सेटअप

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 डॉलर की राशि डेबिट के रूप में दर्ज की गई है।

Eclipse ड्रैग एंड ड्रॉप स्क्रिप्ट चलाना

डेमो पेज पर दृश्य परिणाम कुछ इस प्रकार दिखता है:

ड्रैग एंड ड्रॉप आउटपुट एनीमेशन

परिदृश्य 2: dragAndDropBy विधि का उपयोग करके ड्रैग और ड्रॉप करना

RSI dragAndDropBy(source, xOffset, yOffset) यह विधि पिक्सेल-स्तर की सटीकता प्रदान करती है। ड्रॉप के बजायping किसी लक्ष्य तत्व पर, यह स्रोत को X और Y अक्षों के अनुदिश निर्दिष्ट संख्या में पिक्सेल द्वारा स्थानांतरित करता है।

ऑफसेट निर्धारित करने के लिए, अपने ब्राउज़र में गंतव्य क्षेत्र पर माउस ले जाएं और इंस्पेक्टर रूलर या स्क्रीन-कोऑर्डिनेट एक्सटेंशन जैसे टूल का उपयोग करके पिक्सेल निर्देशांक पढ़ें।

dragAndDropBy के लिए पिक्सेल ऑफ़सेट की पहचान करना

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ड्रैग करने से पहले स्क्रिप्ट स्क्रॉल करें।
  • परिणाम की पुष्टि करें: ड्रॉप के बाद हमेशा मापने योग्य स्थिति परिवर्तन (पाठ, विशेषता, संख्या) की पुष्टि करें, न कि यह मान लें कि कार्रवाई सफल रही।
  • स्थिर रिज़ॉल्यूशन पर चलाएँ: यदि व्यूपोर्ट का आकार ऑफसेट की गणना के लिए उपयोग किए गए आकार से भिन्न होता है, तो पिक्सेल-ऑफसेट ड्रैग विफल हो जाते हैं।

अक्सर पूछे जाने वाले प्रश्न

खींचकर छोड़ें Selenium यह एक स्वचालित माउस जेस्चर है जो एक स्रोत तत्व को उठाता है और उसे लक्ष्य पर छोड़ देता है। इसे ड्रैगएंडड्रॉप या ड्रैगएंडड्रॉपबाय का उपयोग करके एक्शन क्लास के माध्यम से निष्पादित किया जाता है।

dragAndDrop फ़ंक्शन स्रोत और गंतव्य वेब तत्वों को स्वीकार करता है। dragAndDropBy फ़ंक्शन स्रोत के साथ-साथ x और y पिक्सेल ऑफ़सेट भी लेता है, जिससे गंतव्य तत्व के अलग न होने पर सटीक नियंत्रण मिलता है।

build() फ़ंक्शन श्रृंखलाबद्ध अंतःक्रियाओं को एक एकल समग्र क्रिया में संकलित करता है, और perform() फ़ंक्शन इसे निष्पादित करता है। perform() फ़ंक्शन के बिना, कतारबद्ध चरण ब्राउज़र पर कभी नहीं चलते।

कई HTML5 साइटें नेटिव ड्रैग इवेंट्स का उपयोग करती हैं जिन्हें एक्शन API हमेशा ट्रिगर नहीं करता है। ऐसे मामलों में, executeScript के माध्यम से dragstart, dragover और drop इवेंट्स को डिस्पैच करें। Javaस्क्रिप्ट फ़ॉलबैक।

ब्राउज़र के DevTools खोलें, गंतव्य पर होवर करें और तत्व के getBoundingClientRect मान पढ़ें।tracलक्ष्य स्थिति से स्रोत स्थिति की दूरी मापकर पिक्सेल में x और y ऑफसेट प्राप्त करें।

हाँ। सोर्स और टारगेट लुकअप को WebDriverWait में ExpectedConditions.elementToBeClickable के साथ रैप करें ताकि ड्रैग तभी चले जब दोनों एलिमेंट इंटरैक्टिव हों, जिससे CI रन में अस्थिरता कम हो।

एआई उपकरण स्व-उपचारक लोकेटर प्रदान करते हैं जो एक्सपाथ में परिवर्तन होने पर अनुकूलित हो जाते हैं, और स्रोत और लक्ष्य तत्वों के लिए स्थिर चयनकर्ताओं की अनुशंसा करते हैं। इससे विभिन्न रिलीज़ में चलने वाले ड्रैग-एंड-ड्रॉप सूट के रखरखाव में कमी आती है।

जी हां। एआई कोडिंग सहायक "बैंक को डेबिट साइड में खींचें और कुल राशि की पुष्टि करें" जैसे सरल अंग्रेजी परिदृश्य को ड्रैग एंड ड्रॉप, बिल्ड, परफॉर्म और सत्यापन चरण सहित एक पूर्ण क्रिया श्रृंखला में बदल देते हैं।

इस पोस्ट को संक्षेप में इस प्रकार लिखें: