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

द्वारा: Krishna रूंगटा Krishna रूंगटा
Hours Updated

सेलेनियम में खींचें और छोड़ें

कुछ वेब एप्लीकेशन में वेब तत्वों को खींचने और उन्हें परिभाषित क्षेत्र या तत्व पर छोड़ने की कार्यक्षमता होती है। हम ऐसे तत्वों को खींचने और छोड़ने की प्रक्रिया को स्वचालित कर सकते हैं Selenium वेबड्राइवर.

ड्रैग और ड्रॉप सिंटैक्स

Actions क्लास में दो विधियाँ हैं जो ड्रैग और ड्रॉप का समर्थन करती हैं। आइए उनका अध्ययन करें-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

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

यहाँ बताया गया है कि किसी तत्व को कैसे खींचें और छोड़ें Selenium वेबड्राइवर

ड्रैगएंडड्रॉप विधि में, हम दो पैरामीटर पास करते हैं –

  1. पहला पैरामीटर “सोर्सलोकेटर” वह तत्व है जिसे हमें खींचने की आवश्यकता है
  2. दूसरा पैरामीटर “डेस्टिनेशनलोकेटर” वह तत्व है जिस पर हमें पहला तत्व छोड़ना होगा
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy विधि में हम 3 पैरामीटर पास करते हैं –

  1. पहला पैरामीटर “सोर्सलोकेटर” वह तत्व है जिसे हमें खींचने की आवश्यकता है
  2. दूसरा पैरामीटर x-अक्ष पिक्सेल मान है 2nd वह तत्व जिस पर हमें पहला तत्व छोड़ना है।
  3. तीसरा पैरामीटर दूसरे तत्व का y-अक्ष पिक्सेल मान है जिस पर हमें पहला तत्व छोड़ना है।

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

आइए हम आपको निम्नलिखित 3 परिदृश्यों के साथ सेलेनियम वेबड्राइवर का उपयोग करके एक तत्व को खींचने और छोड़ने का व्यावहारिक तरीका दिखाते हैं

परिदृश्य 1: DragAndDrop विधि द्वारा BANK तत्व को विशिष्ट कक्ष पर खींचा और छोड़ा जाता है।

निम्नलिखित कोड में, हम दिए गए URL को लॉन्च करते हैं Firefox ब्राउज़र पर जाएँ और फिर बैंक तत्व को खींचें और ड्रैगएंडड्रॉप विधि के माध्यम से डेबिट साइड ब्लॉक पर छोड़ दें।

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

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;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			

    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe ");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
         
		//Element which needs to drag.    		
        	WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
         //Element on which need to drop.		
         WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));					
         		
         //Using Action class for drag and drop.		
         Actions act=new Actions(driver);					

	//Dragged and dropped.		
         act.dragAndDrop(From, To).build().perform();		
	}		
}

कोड स्पष्टीकरण: उपरोक्त कोड में हम दिए गए URL को लॉन्च करते हैं Firefox ब्राउज़र पर जाएँ और फिर बैंक तत्व को ड्रैग करें और ड्रैगएंडड्रॉप विधि के माध्यम से डेबिट साइड ब्लॉक पर छोड़ दें। नीचे संक्षेप में समझाया गया है:

सबसे पहले, हम 1 को कैप्चर करते हैंst तत्व जिसे हमें चर “From” में खींचने की आवश्यकता है।

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

दूसरा, हम दूसरे तत्व को कैप्चर करते हैं जिस पर हमें वेरिएबल “To” में पहला तत्व छोड़ना होता है।

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

तीसरा, हम Actions वर्ग का ऑब्जेक्ट बनाते हैं क्योंकि हम Actions वर्ग की विधियों का उपयोग करते हैं।

Actions act=new Actions(driver);

ड्रैग और ड्रॉप एलिमेंट के लिए हम Actions क्लास के dragAndDrop मेथड का इस्तेमाल करते हैं और पैरामीटर्स को पहले एलिमेंट (Sourcelocator) “From” और दूसरे एलिमेंट (Destinationlocator) “To” के रूप में पास करते हैं। नीचे की लाइन 1 को ड्रैग करेगीst तत्व और इसे 2 पर छोड़ देंnd तत्व।

act.dragAndDrop(From, To).build().perform();

स्क्रिप्ट का निष्पादन.

अब आप उपरोक्त स्क्रिप्ट को एक-एक करके एक्लिप्स से निष्पादित कर सकते हैं जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है।

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

जब आप स्क्रिप्ट चलाते हैं तो आउटपुट यह है

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

संबंधित आलेख

परिदृश्य 2: DragAndDropBy विधि द्वारा BANK तत्व को विशिष्ट कक्ष पर खींचा और छोड़ा जाता है।

इस परिदृश्य में, हम ब्राउज़र में दिए गए URL को लॉन्च करते हैं और फिर बैंक तत्व को ड्रैग करते हैं और ड्रैगएंडड्रॉपबाय विधि के माध्यम से डेबिट साइड ब्लॉक पर छोड़ देते हैं। ड्रैगएंडड्रॉपबाय करने के लिए, हमें तत्व का पिक्सेल ढूंढना होगा।

पिक्सेल कैसे खोजें?

क्रोम या फायर में URL खोलेंFox और नीले रंग के तीर पर क्लिक करें।

इसके बाद किसी भी तत्व पर क्लिक करें जिसका पिक्सेल आप जानना चाहते हैं।

आपको पिक्सेल तत्व के ऊपर मिलेगा जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है।

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

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;		
import org.testng.annotations.Test;		


public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
        WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));					
      
        //Using Action class for drag and drop.		
        Actions act=new Actions(driver);					
      
        //Drag and Drop by Offset.		
        act.dragAndDropBy(From,135, 40).build().perform();		
 }		
}

नोट: पिक्सेल मान स्क्रीन रिज़ॉल्यूशन और ब्राउज़र आकार के साथ बदलते हैं। इसलिए यह विधि विश्वसनीय नहीं है और व्यापक रूप से उपयोग नहीं की जाती है।

परिदृश्य 3: कुछ तत्वों को खींचकर गिराया जाता है और फिर सत्यापित किया जाता है कि संदेश प्रदर्शित हुआ है या नहीं।

निम्नलिखित कोड में, हम ब्राउज़र में दिए गए URL को लॉन्च करते हैं और फिर BANK, SALES, 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;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
    	 System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
     	 WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
     	//Element(DEBIT SIDE) on which need to drop.		
     	WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li"));					
      
	//Element(SALES) which need to drag.		
     	WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a"));
        
	//Element(CREDIT SIDE) on which need to drop.  		
     	WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li"));					
     
     	//Element(500) which need to drag.		
        WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(DEBIT SIDE) on which need to drop.		
     	WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li"));					
         
	//Element(500) which need to drag.		
        WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(CREDIT SIDE) on which need to drop.		
     	WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li"));					
      
	//Using Action class for drag and drop.		
     	Actions act=new Actions(driver);					

	//BANK drag and drop.		
     	act.dragAndDrop(From1, To1).build().perform();
        
	//SALES drag and drop.		
     	act.dragAndDrop(From2, To2).build().perform();
        
	//500 drag and drop debit side.		
     	act.dragAndDrop(From3, To3).build().perform();	
        
	//500 drag and drop credit side. 		
     	act.dragAndDrop(From4, To4).build().perform();		
      
	//Verifying the Perfect! message.		
	if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed())							
     	{		
         	System.out.println("Perfect Displayed !!!");					
     	}
		else
     	{
        	System.out.println("Perfect not Displayed !!!");					
     	}		
}

आउटपुट विश्लेषण

आउटपुट में, आप देख सकते हैं कि तत्व को परिभाषित तत्व पर खींचा और गिराया गया है। आप आउटपुट का GIF देख सकते हैं।

सारांश

  • उपरोक्त ट्यूटोरियल में, हम वेबड्राइवर में एक्शन विधियों के माध्यम से वेब एप्लिकेशन की ड्रैग और ड्रॉप कार्यक्षमता को चित्रित करते हैं:
  • ड्रैगएंडड्रॉप(सोर्सलोकेटर, डेस्टिनेशनलोकेटर)
  • dragAndDropBy(स्रोत लोकेटर, गंतव्य लोकेटर का x-अक्ष पिक्सेल, गंतव्य लोकेटर का y-अक्ष पिक्सेल)
  • तत्व को खींचने और छोड़ने के लिए सबसे पहले हमने Actions क्लास से DragAndDrop विधि का उपयोग किया जिसमें हमने 2 पैरामीटर पास किए, 1st पैरामीटर वह तत्व है जिसे हमें खींचने की आवश्यकता है, और 2nd पैरामीटर वह तत्व है जिस पर हमें 1 छोड़ना होगाst तत्व।
  • दूसरा, हमने Actions क्लास से dragAndDropBy विधि का उपयोग किया जिसमें हम 3 पैरामीटर पास करते हैं, पहला पैरामीटर वह तत्व है जिसे हमें खींचने की आवश्यकता है, 1nd पैरामीटर 2 का x-अक्ष पिक्सेल मान हैnd तत्व, 3rd पैरामीटर 2 का y-अक्ष पिक्सेल मान हैnd तत्व।