عنصر الويب في Selenium

عنصر الويب في Selenium

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

يشرح هذا البرنامج التعليمي كيفية الوصول إلى كل عنصر من عناصر النموذج باستخدام Selenium برنامج تشغيل الويب مع Java. Selenium يقوم بتغليف كل عنصر نموذج ككائن من WebElement. يوفر هذا النظام واجهة برمجة تطبيقات (API) لتحديد العناصر والتفاعل معها، بما في ذلك إدخال النصوص، والنقر على الأزرار، وإرسال النماذج. تتناول الأقسام التالية الطرق المتاحة لكل عنصر من عناصر النموذج.

مقدمة إلى WebElement، findElement()، findElements()

Selenium يمثل WebDriver عنصر نموذج بسيط ككائن من عنصر الويب.

يُحدد WebDriver عناصر النموذج باستخدام خصائص مختلفة لعنصر الويب، بما في ذلك المعرف والاسم والفئة. كسباث، اسم الوسم، ومحددات CSS، ونص الرابط.

يوفر WebDriver الطريقتين التاليتين لـ WebElement للعثور على العناصر:

• العثور على العنصر () - يعثر على عنصر ويب واحد ويعيده كعنصر ويب Selenium موضوع.
• العثور على العناصر () – إرجاع قائمة بكائنات WebElement المطابقة لمعايير محدد المواقع.

يوضح المثال أدناه كيفية استرجاع عنصر واحد، وهو حقل نصي في صفحة ويب، ككائن WebElement باستخدام دالة findElement(). وسيتم شرح دالة findElements() للبحث عن عناصر متعددة في دروس لاحقة.

الخطوة 1) قم باستيراد الحزمة المطلوبة لإنشاء كائنات WebElement.

الخطوة 2) قم باستدعاء طريقة findElement() المتوفرة في فئة WebDriver لاسترداد كائن WebElement، كما هو موضح أدناه.

Selenium أدخل نصآ

تشير مربعات الإدخال إلى أي من هذين النوعين:

1. حقول النص - Selenium مربعات إدخال نصية تقبل القيم المكتوبة وتعرضها تمامًا كما تم إدخالها.
2. حقول كلمة المرور – مربعات نص تقبل القيم المكتوبة ولكنها تخفيها كسلسلة من الأحرف الخاصة (عادةً النقاط أو النجوم) لإخفاء المدخلات الحساسة.

   

تحديد المواقع

تأخذ الدالة findElement() مُعاملًا واحدًا، وهو مُحدد موقع يُشير إلى العنصر. وتجد مُحددات المواقع المختلفة، بما في ذلك By.id() و By.name() و By.xpath() و By.cssSelector()، العناصر في الصفحة باستخدام خصائصها مثل id أو name أو path.

يمكنك استخدام إضافات مثل FirePath للحصول على المعرف و xpath وقيم محدد الموقع الأخرى للعناصر.

باستخدام موقع المثال https://demo.guru99.com/test/login.html، يحدد الكود أدناه حقل النص "عنوان البريد الإلكتروني" باستخدام محدد المعرف وحقل "كلمة المرور" باستخدام محدد الاسم.

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

مفاتيح الإرسال في Selenium

sendKeys() في Selenium هي طريقة تُستخدم لإدخال محتوى قابل للتعديل في حقول النص وكلمة المرور أثناء تنفيذ الاختبار. يتم تحديد هذه الحقول من خلال مُحدِّدات مثل الاسم والفئة والمعرّف. هذه الطريقة متاحة في كائن WebElement. على عكس طريقة النوع، لا تستبدل دالة sendKeys() النص الموجود في مربع النص.

كيفية إدخال النص في Selenium

لإدخال نص في حقول النص وحقول كلمات المرور، فإن الدالة sendKeys() هي الطريقة المتاحة في عنصر الويب (WebElement). Selenium.

باستخدام نفس المثال من https://demo.guru99.com/test/login.htmlيحدد المقتطف أدناه حقل النص وحقل كلمة المرور ويدخل النص فيهما Selenium.

1. ابحث عن حقل النص "عنوان البريد الإلكتروني" باستخدام محدد المعرف.
2. ابحث عن حقل "كلمة المرور" باستخدام محدد الاسم.
3. أدخل النص في "عنوان البريد الإلكتروني" باستخدام Selenium دالة إرسال المفاتيح.
4. أدخل كلمة المرور في حقل "كلمة المرور" باستخدام طريقة sendKeys().

حذف القيم في الإدخال Boxes

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

Selenium انقر فوق الأزرار

استخدم Selenium يتم الوصول إلى زر النقر باستخدام طريقة click().

في المثال أعلاه

1. ابحث عن زر تسجيل الدخول.
2. انقر على زر "تسجيل الدخول" في صفحة تسجيل الدخول بالموقع للتحقق من هويتك.

Selenium إرسال الأزرار

ترسل أزرار الإرسال النموذج بأكمله إلى الخادم. يمكنك إما استدعاء دالة click() على عنصر الويب، كما هو موضح أعلاه، أو استخدام دالة submit() على أي عنصر في النموذج أو على زر الإرسال نفسه.

عند استخدام submit()، يقوم WebDriver بالبحث في DOM لتحديد النموذج الذي ينتمي إليه العنصر ثم يقوم بتشغيل وظيفة الإرسال الخاصة به.

اكتملت Code

إليكم الكود الكامل الذي يعمل.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.*;

public class Form {
    public static void main(String[] args) {

        // declaration and instantiation of objects/variables
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        String baseUrl = "https://demo.guru99.com/test/login.html";
        driver.get(baseUrl);

        // Get the WebElement corresponding to the Email Address(TextField)
        WebElement email = driver.findElement(By.id("email"));

        // Get the WebElement corresponding to the Password Field
        WebElement password = driver.findElement(By.name("passwd"));

        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        System.out.println("Text Field Set");

        // Deleting values in the text box
        email.clear();
        password.clear();
        System.out.println("Text Field Cleared");

        // Find the submit button
        WebElement login = driver.findElement(By.id("SubmitLogin"));

        // Using click method to submit form
        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        login.click();
        System.out.println("Login Done with Click");

        // Using submit method to submit the form. Submit used on password field
        driver.get(baseUrl);
        driver.findElement(By.id("email")).sendKeys("abcd@gmail.com");
        driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl");
        driver.findElement(By.id("SubmitLogin")).submit();
        System.out.println("Login Done with Submit");

        // driver.close();
    }
}

فحص الجهاز

إذا واجهت خطأ NoSuchElementException() أثناء البحث عن العناصر، فهذا يعني أن العنصر غير موجود في الصفحة في اللحظة التي قام فيها WebDriver بالوصول إليه.

1. أعد التحقق من محدد الموقع باستخدام FirePath أو خيار فحص العنصر في Chrome.
2. تحقق مما إذا كانت القيمة المستخدمة في الكود تختلف عن القيمة الحالية للعنصر المعروض في FirePath.
3. بعض الخصائص ديناميكية لبعض العناصر. إذا تغيرت قيمة ما بشكل ديناميكي، فاستخدم By.xpath() أو By.cssSelector()، فهما أكثر موثوقية ولكنهما أكثر تعقيدًا بعض الشيء.
4. في بعض الأحيان تكون المشكلة هي حالة انتظار؛ فقد يقوم WebDriver بتنفيذ التعليمات البرمجية قبل أن تنتهي الصفحة من التحميل.
5. أضف انتظارًا قبل findElement() باستخدام الانتظار الضمني أو الصريح.

ملخص

• يلخص الجدول أدناه الأوامر اللازمة للوصول إلى كل نوع من أنواع العناصر التي تمت مناقشتها أعلاه.

• يسمح WebDriver بتحديد أكثر من خيار في عنصر تحديد متعدد.
• يمكنك استخدام دالة submit() على أي عنصر داخل النموذج. يقوم WebDriver تلقائيًا بتشغيل دالة submit الخاصة بالنموذج الذي ينتمي إليه العنصر.

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