عنصر الويب في Selenium: نصBox، زر، مفاتيح الإرسال ()، انقر فوق ()

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

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

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

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

Selenium يقوم Web Driver بتغليف عنصر نموذج بسيط ككائن WebElement.

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

يوفر Web Driver طريقتي WebElement التاليتين للعثور على العناصر.

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

دعونا نرى مقتطفات التعليمات البرمجية للحصول على عنصر واحد - حقل النص في صفحة ويب ككائن من WebElement باستخدام طريقة findElement(). سنغطي طريقة findElements()‎ للعثور على عناصر متعددة في البرامج التعليمية اللاحقة.

الخطوة 1) نحتاج إلى استيراد هذه الحزمة لإنشاء كائنات من عناصر الويب

مقدمة إلى WebElement FindElement، FindElements

الخطوة 2) نحتاج إلى استدعاء طريقة findElement() المتوفرة في فئة WebDriver والحصول على كائن WebElement.

راجع أدناه لمعرفة كيف يتم ذلك.

Selenium أدخل نصآ

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

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

    Selenium أدخل نصآ

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

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

يمكنك استخدام المكونات الإضافية مثل Fire path للحصول على مساعدة في الحصول على المعرف وxpath وما إلى ذلك للعناصر.

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

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

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

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

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

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

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

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

نص في Selenium

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

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

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

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

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

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

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

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

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

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

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

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

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

كود كامل

هنا هو رمز العمل الكامل

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() أثناء البحث عن العناصر، فهذا يعني أنه لم يتم العثور على العنصر في الصفحة عند وصول برنامج تشغيل الويب إلى الصفحة.

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

الملخص

  • يوضح الجدول أدناه ملخصًا للأوامر اللازمة للوصول إلى كل نوع من العناصر المذكورة أعلاه
العنصر أمر الوصف
إدخال Box SendKeys () يستخدم لإدخال القيم في مربعات النص
واضح() يستخدم لمسح مربعات النص من قيمتها الحالية
روابط انقر() يستخدم للنقر على الرابط والانتظار حتى يكتمل تحميل الصفحة قبل المتابعة إلى الأمر التالي.
إرسال زر يُقدِّم()
  • يسمح WebDriver بتحديد أكثر من خيار في عنصر تحديد متعدد.
  • يمكنك استخدام طريقة الإرسال () على أي عنصر داخل النموذج. سيقوم WebDriver تلقائيًا بتشغيل وظيفة الإرسال للنموذج الذي ينتمي إليه هذا العنصر.