كيفية التحقق من تلميح الأدوات في Selenium WebDriver

تلميح الأدوات في السيلينيوم

A تلميح الأدوات في السيلينيوم هو النص الذي يظهر عند تحريك الماوس فوق كائن ما في صفحة الويب. يمكن أن يكون الكائن رابطًا، أو صورة، أو زرًا، أو منطقة نصية، وما إلى ذلك. غالبًا ما يوفر نص تلميح الأداة مزيدًا من المعلومات حول الكائن الذي يقوم المستخدم بتمرير مؤشر الماوس فوقه.

تم تنفيذ تلميحات الأدوات بشكل تقليدي كسمة "عنوان" لعنصر ما. تم عرض قيمة هذه السمة كتلميح أداة عند تمرير الماوس. هذا نص ثابت يقدم معلومات عن العنصر بدون أي تصميم.

يوجد الآن العديد من المكونات الإضافية المتاحة لتنفيذ "نصائح الأدوات". يتم تنفيذ تلميحات الأدوات المتقدمة مع التصميم والعرض والصور والروابط باستخدام مكونات JavaScript/JQuery الإضافية أو باستخدام تلميحات أدوات CSS.

  • للوصول إلى تلميحات الأدوات الثابتة التي يتم تنفيذها باستخدام سمة "العنوان" في HTML أو التحقق منها، يمكننا ببساطة استخدام طريقة getAttribute("title") الخاصة بـ WebElement. تتم مقارنة القيمة التي تم إرجاعها لهذه الطريقة (وهي نص تلميح الأداة) بالقيمة المتوقعة للتحقق.
  • بالنسبة للأشكال الأخرى من تطبيقات تلميحات الأدوات، سيتعين علينا استخدام "واجهة برمجة تطبيقات تفاعلات المستخدم المتقدمة" التي يوفرها برنامج تشغيل الويب لإنشاء تأثير تمرير الماوس ثم استرداد تلميح الأدوات الخاص بالعنصر.

ملخص لواجهة برمجة تطبيقات تفاعلات المستخدم المتقدمة

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

يمكنك الرجوع إلى هذا الصفحة لمزيد من ديtails على واجهة برمجة التطبيقات.

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

الخطوة 1) من أجل استخدام API، اتبع الخطوات التاليةwing يجب استيراد الحزم/الفئات:

واجهة برمجة تطبيقات تفاعلات المستخدم المتقدمة

الخطوة 2) قم بإنشاء كائن من فئة "الإجراءات" وقم ببناء تسلسل إجراءات المستخدم. يتم استخدام فئة الإجراءات لبناء تسلسل إجراءات المستخدم مثل moveToElement() و DragAndDrop() وما إلى ذلك. يتم توفير طرق مختلفة تتعلق بإجراءات المستخدم بواسطة API.

يتم توفير كائن برنامج التشغيل كمعلمة لمنشئه.

واجهة برمجة تطبيقات تفاعلات المستخدم المتقدمة

الخطوة 3) قم بإنشاء كائن إجراء باستخدام طريقة build() لفئة "الإجراءات". قم باستدعاء طريقة الأداء () لتنفيذ جميع الإجراءات التي تم إنشاؤها بواسطة كائن الإجراءات (المنشئ هنا).

واجهة برمجة تطبيقات تفاعلات المستخدم المتقدمة

لقد رأينا كيفية استخدام بعض أساليب إجراءات المستخدم التي توفرها واجهة برمجة التطبيقات - clickAndHold(element)، وmoveByOffset(10,0)، وrelease(). توفر واجهة برمجة التطبيقات (API) العديد من هذه الأساليب.

الرجوع إلى الصفحة لمزيد من التفاصيل.

كيفية التحقق من (التعامل) مع تلميح الأدوات في السيلينيوم

دعونا نرى العرض التوضيحي للوصول إلى تلميحات الأداة والتحقق منها في السيناريو البسيط

  • السيناريو 1: يتم تنفيذ تلميح الأداة باستخدام سمة "العنوان".
  • السيناريو 2: يتم تنفيذ تلميح الأدوات باستخدام مكون jQuery الإضافي.

السيناريو 1: سمة "عنوان" HTML

في هذه الحالة، لنأخذ مثال الموقع – https://demo.guru99.com/test/social-icon.html.

سنحاول التحقق من تلميح الأدوات الخاص بأيقونة "github" في أعلى يمين الصفحة.

سمة "عنوان" HTML

من أجل القيام بذلك، سنبحث أولاً عن العنصر ونحصل على سمة "العنوان" الخاصة به ونتحقق من ذلك باستخدام نص تلميح الأداة المتوقع.

نظرًا لأننا نفترض أن تلميح الأداة موجود في سمة "العنوان"، فإننا لا نقوم حتى بأتمتة تأثير تمرير الماوس ولكننا ببساطة نسترد قيمة السمة باستخدام طريقة "getAttribute()".

سمة "عنوان" HTML

ها هو الكود

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

public class ToolTip {				
    public static void main(String[] args) {									
     
        String baseUrl = "https://demo.guru99.com/test/social-icon.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        driver.get(baseUrl);					
        String expectedTooltip = "Github";	
        
        // Find the Github icon at the top right of the header		
        WebElement github = driver.findElement(By.xpath(".//*[@class='soc-ico show-round']/a[4]"));	
        
        //get the value of the "title" attribute of the github icon		
        String actualTooltip = github.getAttribute("title");	
        
        //Assert the tooltip's value is as expected 		
        System.out.println("Actual Title of Tool Tip"+actualTooltip);							
        if(actualTooltip.equals(expectedTooltip)) {							
            System.out.println("Test Case Passed");					
        }		
        driver.close();			
   }		
}		

شرح الكود

  1. ابحث عن WebElement الذي يمثل أيقونة "github".
  2. احصل على سمة "العنوان" الخاصة بها باستخدام طريقة getAttribute().
  3. قم بتأكيد القيمة مقابل قيمة تلميح الأداة المتوقعة.

السيناريو 2: البرنامج المساعد JQuery

هناك الكثير من ملحقات JQuery المتاحة لتنفيذ تلميحات الأدوات، ولكل منها شكل مختلف قليلاً من التنفيذ.

تتوقع بعض المكونات الإضافية أن يكون تلميح الأداة HTML موجودًا طوال الوقت بجوار العنصر الذي ينطبق عليه تلميح الأداة، بينما تقوم المكونات الإضافية الأخرى بإنشاء علامة "div" ديناميكية، والتي تظهر بسرعة أثناء التمرير فوق العنصر.

في العرض التوضيحي الخاص بنا، دعونا نفكر في طريقة "تلميح أدوات أدوات jQuery" لتنفيذ تلميح الأدوات.

هنا في عنوان URL – https://demo.guru99.com/test/tooltip.html يمكنك مشاهدة العرض التوضيحي حيث عند تحريك الماوس فوق "التنزيل الآن"، نحصل على تلميح أداة متقدم يحتوي على صورة وخلفية وسيلة شرح وجدول ورابط بداخله يمكن النقر عليه.

البرنامج المساعد مسج

إذا نظرت إلى المصدر أدناه، يمكنك أن ترى أن علامة div التي تمثل تلميح الأداة موجودة دائمًا بجوار علامة الرابط "التنزيل الآن". لكن الكود الموجود داخل علامة البرنامج النصي أدناه يتحكم في الوقت الذي يحتاج فيه إلى الظهور في نافذة منبثقة.

البرنامج المساعد مسج

دعنا نحاول التحقق من نص الرابط فقط في تلميح الأداة الخاص بالعرض التوضيحي الخاص بنا هنا.

سنجد أولاً WebElement المطابق لـ "التنزيل الآن". ثم باستخدام Interactions API، سننتقل إلى العنصر (تحويم الماوس). بعد ذلك، سنجد WebElement الذي يتوافق مع الرابط داخل تلميح الأدوات المعروض ونتحقق منه مقابل النص المتوقع.

البرنامج المساعد مسج

ها هو الكود

import org.openqa.selenium.interactions.Action;		
import org.openqa.selenium.interactions.Actions;		
import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class JqueryToolTip {				
    public static void main(String[] args) {									
     
        String baseUrl = "https://demo.guru99.com/test/tooltip.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");	
        
        WebDriver driver = new ChromeDriver();					
        String expectedTooltip = "What's new in 3.2";					
        driver.get(baseUrl);					
        		
        WebElement download = driver.findElement(By.xpath(".//*[@id='download_now']"));							
        Actions builder = new Actions (driver);							

        builder.clickAndHold().moveToElement(download);					
        builder.moveToElement(download).build().perform(); 	
        
        WebElement toolTipElement = driver.findElement(By.xpath(".//*[@class='box']/div/a"));							
        String actualTooltip = toolTipElement.getText();			
        
        System.out.println("Actual Title of Tool Tip  "+actualTooltip);							
        if(actualTooltip.equals(expectedTooltip)) {							
            System.out.println("Test Case Passed");					
        }		
        driver.close();			
   }		
}		

شرح الكود

  1. ابحث عن WebElement الذي يتوافق مع عنصر "التنزيل الآن" الذي سنحركه بالماوس.
  2. باستخدام Interactions API، قم بتحريك الماوس إلى "التنزيل الآن".
  3. بافتراض أن تلميح الأداة معروض، ابحث عن WebElement الذي يتوافق مع الرابط الموجود داخل تلميح الأداة، أي العلامة "a".
  4. تحقق من استرداد نص تلميح أداة الرابط باستخدام getText() مقابل القيمة المتوقعة التي قمنا بتخزينها في "expectedToolTip"

نبذة عامة

في هذا البرنامج التعليمي، تعلمت كيفية الوصول إلى تلميحات الأدوات باستخدام برنامج تشغيل الويب Selenium.

يتم تنفيذ تلميحات الأداة بطرق مختلفة –

  • يعتمد التنفيذ الأساسي على سمة "العنوان" الخاصة بـ HTML. تحصل getAttribute(title) على قيمة تلميح الأداة.
  • تتطلب تطبيقات تلميحات الأدوات الأخرى، مثل JQuery وCSS، واجهة برمجة التطبيقات التفاعلية (Interactions API) لإنشاء تأثير تمرير الماوس

واجهة برمجة تطبيقات تفاعلات المستخدم المتقدمة –

  • يتم استخدام moveToElement(element) من فئة Actions لتحريك الماوس فوق عنصر ما.
  • تقوم طريقة Build() لفئة الإجراءات ببناء تسلسل إجراءات المستخدم في كائن الإجراء.
  • تنفيذ () من فئة الإجراء ينفذ كل تسلسل إجراءات المستخدم مرة واحدة.

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