كيفية السحب والإفلات Selenium (مثال)

السحب والإسقاط selenium

تحتوي بعض تطبيقات الويب على وظيفة سحب عناصر الويب وإسقاطها في منطقة أو عنصر محدد. يمكننا أتمتة عملية السحب والإفلات لهذه العناصر باستخدام Selenium برنامج تشغيل الويب.

سحب وإسقاط بناء الجملة

تحتوي فئة الإجراءات على طريقتين تدعمان السحب والإسقاط. دعونا ندرسهم-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

كيفية السحب والإفلات Selenium

إليك كيفية سحب وإسقاط عنصر باستخدام Selenium برنامج تشغيل الويب

في طريقة السحب والإسقاط، نقوم بتمرير المعلمتين –

  1. المعلمة الأولى "Sourcelocator" هي العنصر الذي نحتاج إلى سحبه
  2. المعلمة الثانية "Destinationlocator" هي العنصر الذي نحتاج إلى إسقاط العنصر الأول عليه
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

طريقة DragAndDropBy نقوم بتمرير المعلمات الثلاثة –

  1. المعلمة الأولى "Sourcelocator" هي العنصر الذي نحتاج إلى سحبه
  2. المعلمة الثانية هي قيمة بكسل المحور السيني للقيمة 2nd العنصر الذي نحتاج إلى إسقاط العنصر الأول عليه.
  3. المعلمة الثالثة هي قيمة بكسل المحور y للعنصر الثاني الذي نحتاج إلى إسقاط العنصر الأول عليه.

    السحب والإسقاط Selenium

دعنا نوضح لك عملية السحب والإسقاط للعنصر باستخدام selenium برنامج تشغيل الويب مع following سيناريوهات 3

السيناريو 1: يتم سحب عنصر البنك وإسقاطه في الخلية المحددة بواسطة طريقة DragAndDrop.

في فولوwing الكود، نقوم بتشغيل عنوان URL المحدد فيه Firefox browser ثم اسحب عنصر البنك وقم بإسقاطه على كتلة DEBIT SIDE من خلال طريقة السحب والإسقاط.

السحب والإسقاط 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("http://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 browser ثم اسحب عنصر البنك وقم بإسقاطه على كتلة DEBIT SIDE من خلال طريقة السحب والإسقاط. موضحة بإيجاز أدناه:

أولا، نحن التقاط 1st العنصر الذي نحتاج إلى سحبه في المتغير "من".

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

ثانيًا، نلتقط العنصر الثاني الذي نحتاج إلى إسقاط العنصر الأول فيه في المتغير "إلى".

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

ثالثًا، نقوم بإنشاء كائن من فئة الإجراءات حيث نستخدم أساليب فئة الإجراءات.

Actions act=new Actions(driver);

بالنسبة لعنصر السحب والإسقاط، نستخدم طريقة السحب والإفلات من فئة الإجراءات ونمرر المعلمات كعنصر أول (Sourcelocator) "من" والعنصر الثاني (Destinationlocator) "إلى". السطر أدناه سوف يسحب 1st العنصر وإسقاطه على 2nd جزء.

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

تنفيذ البرنامج النصي.

يمكنك الآن تنفيذ البرنامج النصي أعلاه واحدًا تلو الآخر من eclipse كما هو موضح في الصورة أدناه.

السحب والإسقاط Selenium

هنا هو الإخراج عند تشغيل البرنامج النصي

السحب والإسقاط Selenium

السيناريو 2: يتم سحب عنصر البنك وإسقاطه في الخلية المحددة باستخدام طريقة DragAndDropBy.

في هذا السيناريو، نقوم بتشغيل عنوان URL المحدد في المتصفح ثم نقوم بسحب عنصر البنك وإسقاطه على كتلة DEBIT SIDE من خلال طريقة DragAndDropBy. لسحب AndDropBy، نحتاج إلى العثور على بكسل العنصر.

كيف تجد بكسل؟

افتح عنوان URL في Chrome أو 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("http://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();		
 }		
}

NOTE: تتغير قيم البكسل مع دقة الشاشة وحجم المتصفح. وبالتالي فإن هذه الطريقة غير موثوقة وغير مستخدمة على نطاق واسع.

السيناريو 3: يتم سحب عدد قليل من العناصر وإسقاطها ثم التحقق من عرض الرسالةyed أم لا.

في فولوwing الكود، نقوم بتشغيل عنوان 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("http://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 للإخراج.

نبذة عامة

  • في الدروس المذكورة أعلاه، نوضح وظيفة السحب والإفلات لتطبيق الويب من خلال أساليب العمل في Webdriver:
  • السحب والإفلات (محدد المصدر، محدد موقع الوجهة)
  • DragAndDropBy(Sourcelocator، بكسل المحور السيني لمحدد موقع الوجهة، وبكسل المحور الصادي لمحدد موقع الوجهة)
  • لسحب وإفلات العنصر أولاً استخدمنا طريقة DragAndDrop من فئة Actions التي نمرر فيها المعلمتين، 2st المعلمة هي العنصر الذي نحتاج إلى سحبه، و2nd المعلمة هي العنصر الذي نحتاج إلى إسقاط 1 عليهst جزء.
  • ثانيًا، استخدمنا طريقة DragAndDropBy من فئة Actions التي نمرر فيها المعلمات الثلاثة، المعلمة الأولى هي العنصر الذي نحتاج إلى سحبه، 3nd المعلمة هي قيمة بكسل المحور السيني للقيمة 2nd العنصر، 3rd المعلمة هي قيمة بكسل المحور y للقيمة 2nd جزء.