كيفية السحب والإفلات Selenium (مثال)
⚡ ملخص ذكي
اسحب وأفلت Selenium يُمكّن WebDriver من محاكاة تفاعلات الماوس تلقائيًا، والتي تُحرّك عنصرًا مصدريًا وتُفلته على هدف مُحدد. وتُشغّل فئة Actions هذه الإيماءات من خلال طريقتي dragAndDrop و dragAndDropBy، مما يُتيح أتمتة دقيقة وقابلة للتكرار في المتصفح.

ما هي خاصية السحب والإفلات في Selenium?
اسحب وأفلت Selenium هي تفاعلية آلية تحاكي النقر مع الاستمرار على عنصر مصدر، وتحريكه عبر الصفحة، ثم إفلاته في موقع الهدف. وهي تُستخدم على نطاق واسع لاختبار تطبيقات الويب الحديثة التي تعتمد على واجهات السحب والإفلات، مثل أدوات تحميل الملفات، ولوحات كانبان، والمتاجر الإلكترونية.ping عربات التسوق، وأدوات إنشاء لوحات التحكم.
In Selenium يتم تنفيذ عملية السحب والإفلات عبر WebDriver. الإجراءات فئة توفر طرقًا متخصصة لربط إيماءات الماوس وتنفيذها كإجراء مركب واحد.
تُتيح فئة الإجراءات طريقتين أساسيتين لأتمتة السحب والإفلات:
بناء الجملة:
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
توضح السيناريوهات الثلاثة التالية عملية التشغيل الآلي بالسحب والإفلات على Guruصفحة العرض التوضيحي 99 https://demo.guru99.com/test/drag_drop.htmlالهدف هو تحريك BANK عنصر الخصم في الحساب منطقة الجانب المدين بحيث يتم احتساب مبلغ 5000 دولار بشكل صحيح كمعاملة مدينة.
السيناريو 1: السحب والإفلات باستخدام طريقة السحب والإفلات
في هذا السيناريو، يتم سحب عنصر المصدر (BANK) إلى الوجهة (جانب الخصم من الحساب) باستخدام 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();
}
}
بعد تشغيل البرنامج النصي، BANK ينتقل البلاط إلى الحساب منطقة الخصم وتم تسجيل مبلغ 5000 دولار كخصم.
تبدو النتيجة المرئية على صفحة العرض التوضيحي كما يلي:
السيناريو الثاني: السحب والإفلات باستخدام طريقة dragAndDropBy
استخدم 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 API أولاً.
- قم بتمرير الشاشة لعرض الهدف: يؤدي اختيار وجهة خارج الشاشة إلى حدوث أعطال صامتة. استخدم
Actions.scrollToElementأو Javaقم بتمرير البرنامج النصي قبل السحب. - تحقق من النتيجة: قم دائمًا بتأكيد حدوث تغيير قابل للقياس في الحالة (النص، السمة، العدد) بعد الإسقاط بدلاً من الوثوق بأن الإجراء قد تم تنفيذه.
- تشغيل بدقة ثابتة: تتعطل عمليات السحب بإزاحة البكسل إذا اختلف حجم منفذ العرض عن الحجم المستخدم لحساب الإزاحات.





