كيفية الضغط على الصورة في Selenium برنامج تشغيل الويب

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

الوصول إلى روابط الصور

روابط الصور هي روابط مرجعية على صفحات الويب يتم تمثيلها بصورة، وعند النقر عليها، يتم توجيه المتصفح إلى نافذة أو صفحة مختلفة.

لأنها صور، لا يمكننا استخدام طريقتي By.linkText() و By.partialLinkText() لأن روابط الصور لا تحتوي على نص رابط على الإطلاق.

في هذه الحالة، ينبغي اللجوء إلى استخدام إما By.cssSelector أو By.xpath. ويُفضّل عمومًا استخدام الطريقة الأولى لبساطتها وسهولة قراءتها.

في المثال أدناه، سنصل إلى شعار "Facebook" الموجود في الجزء العلوي الأيسر من صفحة استرداد كلمة المرور الخاصة بـ Facebook.

سنستخدم By.cssSelector وسمة "title" للعنصر للوصول إلى رابط الصورة. ثم سنتحقق من أن المتصفح قد تم توجيهه إلى الصفحة الرئيسية لفيسبوك.

Java Code مثال

ما يلي Selenium يقوم جزء WebDriver بتشغيل متصفح Chrome، وفتح صفحة استعادة كلمة مرور Facebook، والنقر على صورة شعار Facebook، والتحقق من عنوان الصفحة الناتج.

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);
        // click on the "Facebook" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // verify that we are now back on Facebook's homepage
        if (driver.getTitle().equals("Facebook - log in or sign up")) {
            System.out.println("We are back at Facebook's homepage");
        } else {
            System.out.println("We are NOT in Facebook's homepage");
        }
        driver.close();
    }
}

نتيجة

أفضل الممارسات للنقر على الصور

بعض العادات تجعل أتمتة النقر على الصور أكثر موثوقية عبر المتصفحات وأحجام الشاشات المختلفة.

• يفضل استخدام سمة ثابتة مثل title أو alt أو aria-label أو data-* بدلاً من مسارات CSS المتداخلة بعمق.
• أضف أمر WebDriverWait صريحًا لـ ElementToBeClickable قبل إصدار أمر النقر.
• بالنسبة للصور التي يتم تحميلها عند الحاجة، قم بتمرير العنصر إلى العرض باستخدام Javascriptالمنفذ أولاً.
• إذا اعترضت طبقة شفافة النقرة، فارجع إلى Javaانقر باستخدام البرنامج النصي على العنصر الأساسي.
• تحقق من صحة التنقل باستخدام driver.getTitle() أو عنصر فريد في صفحة الوجهة.

كيف يُحسّن الذكاء الاصطناعي استراتيجيات تحديد مواقع الصور

أدوات الاختبار المدعومة بالذكاء الاصطناعي مثل Testimتقوم كل من Mabl وHealenium بتحليل بنية DOM المحيطة بالصورة واقتراح محددات مواقع ذاتية الإصلاح. عند تغيير اسم فئة أو سمة بعد إصدار جديد، يقوم الإطار باستبدالها تلقائيًا بالبديل الأكثر استقرارًا، مما يقلل من حالات الفشل غير المتوقعة في التنقل القائم على الأيقونات.

يمكن للمهندسين أيضًا استخدام ChatGPT أو GitHub Copilot لإنشاء مقتطفات برمجية لـ WebDriver، واقتراح تعابير CSS أو XPath قوية للصورة، وصياغة تأكيدات للصفحة التي يتم تحميلها بعد النقر. مع ذلك، يجب مراجعة الكود المُنشأ للتأكد من صحته ومعالجة حالات الانتظار والتراكب.

خاتمة

النقر على روابط الصور في Selenium يُعدّ WebDriver سهل الاستخدام بمجرد اختيار مُحدِّد موقع ثابت. يُعتبر By.cssSelector مع سمة العنوان أو النص البديل الطريقة الأكثر وضوحًا، بينما يُستخدم By.xpath كخيار احتياطي عندما يكون الترميز غير مُناسب، وتضمن عمليات الانتظار الصريحة موثوقية البرنامج النصي في جميع عمليات التشغيل.

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