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

⚡ ملخص ذكي

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

  • 🎓 استخدم فئة Actions لإنشاء إيماءات لوحة المفاتيح والماوس، ثم قم باستدعاء build() و perform() لتنفيذها على الصفحة.
  • 🌟 اختر dragAndDrop(source, target) عندما يكون لديك كلا العنصرين، و dragAndDropBy(source, xOffset, yOffset) عندما تحتاج إلى دقة على مستوى البكسل.
  • 🚀 انتظر دائمًا حتى تتواجد عناصر المصدر والهدف قبل استدعاء عملية السحب لتجنب الاختبارات غير المستقرة.
  • 🎖️ تحقق من عملية الإسقاط بصريًا أو عن طريق تأكيد تغييرات السمات على الهدف بحيث يؤكد الاختبار التفاعل الحقيقي، وليس مجرد إجراء في قائمة الانتظار.
  • 🏆 تعمل أدوات تحديد المواقع المدعومة بالذكاء الاصطناعي على إصلاح مسارات XPath المعطلة بعد تحديثات واجهة المستخدم، مما يقلل من الصيانة لمجموعات السحب والإفلات التي تعمل في خطوط أنابيب التكامل المستمر.

اسحب وأفلت Selenium

ما هي خاصية السحب والإفلات في Selenium?

اسحب وأفلت Selenium هي تفاعلية آلية تحاكي النقر مع الاستمرار على عنصر مصدر، وتحريكه عبر الصفحة، ثم إفلاته في موقع الهدف. وهي تُستخدم على نطاق واسع لاختبار تطبيقات الويب الحديثة التي تعتمد على واجهات السحب والإفلات، مثل أدوات تحميل الملفات، ولوحات كانبان، والمتاجر الإلكترونية.ping عربات التسوق، وأدوات إنشاء لوحات التحكم.

In Selenium يتم تنفيذ عملية السحب والإفلات عبر WebDriver. الإجراءات فئة توفر طرقًا متخصصة لربط إيماءات الماوس وتنفيذها كإجراء مركب واحد.

اسحب وأفلت 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

توضح السيناريوهات الثلاثة التالية عملية التشغيل الآلي بالسحب والإفلات على Guruصفحة العرض التوضيحي 99 https://demo.guru99.com/test/drag_drop.htmlالهدف هو تحريك BANK عنصر الخصم في الحساب منطقة الجانب المدين بحيث يتم احتساب مبلغ 5000 دولار بشكل صحيح كمعاملة مدينة.

السيناريو 1: السحب والإفلات باستخدام طريقة السحب والإفلات

في هذا السيناريو، يتم سحب عنصر المصدر (BANK) إلى الوجهة (جانب الخصم من الحساب) باستخدام 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();
    }
}

بعد تشغيل البرنامج النصي، BANK ينتقل البلاط إلى الحساب منطقة الخصم وتم تسجيل مبلغ 5000 دولار كخصم.

Eclipse تشغيل برنامج السحب والإفلات

تبدو النتيجة المرئية على صفحة العرض التوضيحي كما يلي:

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

السيناريو الثاني: السحب والإفلات باستخدام طريقة 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قم بتمرير البرنامج النصي قبل السحب.
  • تحقق من النتيجة: قم دائمًا بتأكيد حدوث تغيير قابل للقياس في الحالة (النص، السمة، العدد) بعد الإسقاط بدلاً من الوثوق بأن الإجراء قد تم تنفيذه.
  • تشغيل بدقة ثابتة: تتعطل عمليات السحب بإزاحة البكسل إذا اختلف حجم منفذ العرض عن الحجم المستخدم لحساب الإزاحات.

الأسئلة الشائعة

اسحب وأفلت Selenium هي إيماءة آلية للفأرة تقوم بالتقاط عنصر مصدر وإفلاته على عنصر هدف. يتم تنفيذها من خلال فئة الإجراءات باستخدام دحرجة وإفلات أو دحرجة وإفلات بواسطة.

تقبل دالة dragAndDrop عناصر الويب المصدر والوجهة. أما دالة dragAndDropBy فتأخذ المصدر بالإضافة إلى إزاحات البكسل x و y، مما يوفر تحكمًا دقيقًا عندما لا تكون الوجهة عنصرًا منفصلاً.

تقوم الدالة build() بتجميع التفاعلات المتسلسلة في إجراء مركب واحد، وتقوم الدالة perform() بتنفيذه. بدون الدالة perform()، لن يتم تنفيذ الخطوات الموجودة في قائمة الانتظار على المتصفح.

تستخدم العديد من مواقع HTML5 أحداث السحب الأصلية التي لا يتم تشغيلها دائمًا بواسطة واجهة برمجة تطبيقات الإجراءات. في هذه الحالات، قم بإرسال أحداث dragstart و dragover و drop من خلال executeScript كـ Javaخيار بديل للبرنامج النصي.

افتح أدوات مطوري المتصفح، مرر مؤشر الماوس فوق الوجهة، واقرأ قيم getBoundingClientRect الخاصة بالعنصر. Subtract موضع المصدر من موضع الهدف للحصول على إزاحات x و y بالبكسل.

نعم. قم بتغليف عمليات البحث عن المصدر والهدف في WebDriverWait مع ExpectedConditions.elementToBeClickable بحيث يتم تشغيل السحب فقط بعد أن يصبح كلا العنصرين تفاعليين، مما يقلل من عدم الاستقرار في عمليات التكامل المستمر.

توفر أدوات الذكاء الاصطناعي محددات مواقع ذاتية الإصلاح تتكيف مع تغيرات XPath، وتوصي بمحددات ثابتة لعناصر المصدر والهدف. هذا يقلل من الصيانة اللازمة لمجموعات السحب والإفلات التي تعمل عبر الإصدارات المختلفة.

نعم. يقوم مساعدو البرمجة بالذكاء الاصطناعي بتحويل سيناريو باللغة الإنجليزية البسيطة مثل "اسحب BANK إلى جانب المدين وقم بتأكيد الإجمالي" إلى سلسلة إجراءات كاملة مع السحب والإفلات والبناء والتنفيذ وخطوة التحقق.

تلخيص هذه التدوينة بـ: