วิธีการตรวจสอบคำแนะนำเครื่องมือใน Selenium ไดรเวอร์เว็บ

เคล็ดลับเครื่องมือใน Selenium

A เคล็ดลับเครื่องมือใน Selenium เป็นข้อความที่ปรากฏขึ้นเมื่อเมาส์เลื่อนเมาส์ไปเหนือวัตถุบนหน้าเว็บ วัตถุอาจเป็นลิงก์ รูปภาพ ปุ่ม พื้นที่ข้อความ ฯลฯ ข้อความคำแนะนำเครื่องมือมักจะให้ข้อมูลเพิ่มเติมเกี่ยวกับวัตถุที่ผู้ใช้เลื่อนเมาส์ไว้เหนือเคอร์เซอร์

คำแนะนำเครื่องมือถูกนำมาใช้แบบดั้งเดิมเป็นแอตทริบิวต์ 'ชื่อ' ให้กับองค์ประกอบ ค่าของแอตทริบิวต์นี้แสดงเป็นคำแนะนำเครื่องมือเมื่อวางเมาส์เหนือ นี่คือข้อความคงที่ที่ให้ข้อมูลขององค์ประกอบโดยไม่มีการจัดรูปแบบ

ขณะนี้มีปลั๊กอินมากมายสำหรับการติดตั้ง 'เคล็ดลับเครื่องมือ' คำแนะนำเครื่องมือขั้นสูงพร้อมสไตล์ การเรนเดอร์ รูปภาพ และลิงก์กำลังถูกนำมาใช้ Javaปลั๊กอินสคริปต์/JQuery หรือใช้ CSS Tooltips

• สำหรับการเข้าถึงหรือตรวจสอบคำแนะนำเครื่องมือคงที่ซึ่งใช้งานโดยใช้แอตทริบิวต์ HTML “title” เราสามารถใช้เมธอด getAttribute (“title”) ของ WebElement ได้ ค่าที่ส่งคืนของวิธีนี้ (ซึ่งเป็นข้อความคำแนะนำเครื่องมือ) จะถูกเปรียบเทียบกับค่าที่คาดหวังสำหรับการตรวจสอบ
• สำหรับการใช้งานคำแนะนำเครื่องมือในรูปแบบอื่น เราจะต้องใช้ "Advanced User Interactions API" ที่ Web Driver มอบให้เพื่อสร้างเอฟเฟกต์การเลื่อนเมาส์ จากนั้นดึงคำแนะนำเครื่องมือสำหรับองค์ประกอบ

ข้อมูลสรุปของ API การโต้ตอบของผู้ใช้ขั้นสูง

API การโต้ตอบผู้ใช้ขั้นสูงมี API สำหรับการดำเนินการของผู้ใช้ เช่น การลากและวาง การโฮเวอร์ การเลือกหลายรายการ การกดปุ่มและปล่อย และการดำเนินการอื่นๆ โดยใช้แป้นพิมพ์หรือเมาส์บนเว็บเพจ

คุณสามารถอ้างอิงสิ่งนี้ได้ ลิงค์ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ API

ที่นี่ เรามาดูวิธีการใช้คลาสและวิธีการที่เราต้องการเพื่อย้ายองค์ประกอบตัวเลื่อนด้วยการชดเชย

ขั้นตอน 1) เพื่อที่จะใช้ API จำเป็นต้องนำเข้าแพ็คเกจ/คลาสต่อไปนี้:

ขั้นตอน 2) สร้างวัตถุของคลาส "การกระทำ" และสร้างลำดับการกระทำของผู้ใช้ คลาส Actions ใช้เพื่อสร้างลำดับการกระทำของผู้ใช้ เช่น moveToElement(), DragAndDrop() เป็นต้น API จัดเตรียมวิธีการต่างๆ ที่เกี่ยวข้องกับการกระทำของผู้ใช้

วัตถุไดรเวอร์ถูกจัดเตรียมไว้เป็นพารามิเตอร์ให้กับตัวสร้าง

ขั้นตอน 3) สร้างวัตถุการดำเนินการโดยใช้เมธอด build() ของคลาส "การกระทำ" เรียกเมธอดดำเนินการ () เพื่อดำเนินการการกระทำทั้งหมดที่สร้างโดยวัตถุ Actions (ตัวสร้างที่นี่)

เราได้เห็นวิธีการใช้วิธีการดำเนินการบางอย่างของผู้ใช้ที่จัดทำโดย API แล้ว - clickAndHold(element), moveByOffset(10,0), release() API มีวิธีการดังกล่าวมากมาย

โปรดดูที่ ลิงค์ .

วิธีการตรวจสอบ (จัดการ) Tooltip ใน Selenium

เรามาดูการสาธิตการเข้าถึงและตรวจสอบเคล็ดลับเครื่องมือในสถานการณ์ง่ายๆ กัน

• สถานการณ์ที่ 1: คำแนะนำเครื่องมือถูกนำมาใช้โดยใช้แอตทริบิวต์ "title"
• สถานการณ์ที่ 2: คำแนะนำเครื่องมือถูกนำไปใช้โดยใช้ปลั๊กอิน jQuery

สถานการณ์ที่ 1: แอตทริบิวต์ HTML 'ชื่อ'

ในกรณีนี้ มาดูไซต์ตัวอย่างกัน https://demo.guru99.com/test/social-icon.html.

เราจะพยายามตรวจสอบคำแนะนำเครื่องมือของไอคอน “github” ที่มุมขวาบนของหน้า

ในการดำเนินการนี้ ก่อนอื่นเราจะค้นหาองค์ประกอบและรับแอตทริบิวต์ 'title' และตรวจสอบด้วยข้อความคำแนะนำเครื่องมือที่ต้องการ

เนื่องจากเราถือว่าเคล็ดลับเครื่องมืออยู่ในแอตทริบิวต์ "title" เราจึงไม่ได้ทำให้เอฟเฟกต์การเลื่อนเมาส์เป็นแบบอัตโนมัติด้วยซ้ำ แต่เพียงดึงค่าของแอตทริบิวต์โดยใช้เมธอด "getAttribute()"

นี่คือรหัส

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. รับแอตทริบิวต์ "title" โดยใช้เมธอด getAttribute()
3. ยืนยันค่าเทียบกับค่าคำแนะนำเครื่องมือที่คาดไว้

สถานการณ์ที่ 2: ปลั๊กอิน JQuery

มีปลั๊กอิน JQuery มากมายให้เลือกใช้คำแนะนำเครื่องมือ และแต่ละปลั๊กอินมีรูปแบบการใช้งานที่แตกต่างกันเล็กน้อย

ปลั๊กอินบางตัวคาดว่าคำแนะนำเครื่องมือ HTML จะปรากฏตลอดเวลาถัดจากองค์ประกอบที่สามารถใช้คำแนะนำเครื่องมือได้ ในขณะที่ปลั๊กอินอื่นๆ สร้างแท็ก "div" แบบไดนามิก ซึ่งปรากฏขึ้นทันทีขณะวางเมาส์เหนือองค์ประกอบ

สำหรับการสาธิตของเรา ลองพิจารณาวิธีการนำคำแนะนำเครื่องมือไปใช้ “jQuery Tools Tooltip”

ที่นี่ใน 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 ไดรเวอร์เว็บ

เคล็ดลับเครื่องมือมีการใช้งานในรูปแบบต่างๆ-

• การใช้งานขั้นพื้นฐานจะขึ้นอยู่กับแอตทริบิวต์ "title" ของ HTML getAttribute(title) รับค่าของคำแนะนำเครื่องมือ
• การใช้งานเคล็ดลับเครื่องมืออื่น ๆ เช่น JQuery คำแนะนำเครื่องมือ CSS ต้องใช้ API การโต้ตอบเพื่อสร้างเอฟเฟกต์การเลื่อนเมาส์

API การโต้ตอบของผู้ใช้ขั้นสูง-

• moveToElement(element) ของคลาส Actions ใช้เพื่อเลื่อนเมาส์ไปที่องค์ประกอบ
• วิธีการ Build() ของคลาส Actions สร้างลำดับการกระทำของผู้ใช้ลงในวัตถุ Action
• คลาส Perform() ของ Action ดำเนินการตามลำดับการกระทำของผู้ใช้ทั้งหมดในคราวเดียว

ในการตรวจสอบคำแนะนำเครื่องมือ เราต้องวางเมาส์เหนือองค์ประกอบก่อน จากนั้นค้นหาองค์ประกอบที่สอดคล้องกับคำแนะนำเครื่องมือ และรับข้อความหรือค่าอื่น ๆ เพื่อตรวจสอบเทียบกับค่าที่คาดหวัง