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

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

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

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

ปัจจุบัน มีปลั๊กอินมากมายที่สามารถนำไปใช้กับการสร้างทูลทิปได้ ทูลทิปขั้นสูงที่มีทั้งการจัดรูปแบบ การแสดงผล รูปภาพ และลิงก์ สามารถสร้างได้โดยใช้... Javaสามารถใช้สคริปต์หรือปลั๊กอิน jQuery หรือใช้คำแนะนำเครื่องมือ (tooltip) ที่ใช้ CSS เพียงอย่างเดียวก็ได้

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

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

API การโต้ตอบกับผู้ใช้ขั้นสูง (Advanced User Interactions API) เปิดเผยการกระทำของผู้ใช้ เช่น การลากและวาง การวางเมาส์เหนือวัตถุ การเลือกหลายรายการ การกดและปล่อยปุ่ม และการกระทำอื่นๆ ด้วยแป้นพิมพ์หรือเมาส์บนหน้าเว็บ

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

ก่อนกระโดดping มาดูสถานการณ์ต่างๆ กัน เราจะมาดูคลาสและเมธอดที่จำเป็นในการเลื่อนองค์ประกอบสไลเดอร์โดยใช้ค่าออฟเซ็ตกัน

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

ขั้นตอน 2) สร้างอ็อบเจ็กต์ของคลาส “Actions” และสร้างลำดับการกระทำของผู้ใช้ คลาส Actions สร้างการกระทำแบบต่อเนื่อง เช่น moveToElement() และ dragAndDrop() โดยส่งอ็อบเจ็กต์ไดรเวอร์เป็นพารามิเตอร์ไปยังคอนสตรัคเตอร์ของคลาสนี้

ขั้นตอน 3) สร้างอ็อบเจ็กต์ Action โดยใช้เมธอด build() ของคลาส “Actions” จากนั้นเรียกเมธอด perform() เพื่อดำเนินการแอ็กชันทั้งหมดที่อยู่ในคิวของตัวสร้าง

เราได้เห็นวิธีการใช้งานเมธอด Action ของผู้ใช้บางส่วนที่ API มีให้แล้ว เช่น clickAndHold(element), moveByOffset(10, 0) และ release() แต่ API ยังมีเมธอดอื่นๆ อีกมากมายให้ใช้งาน

การใช้งาน Tooltip เทียบกับ Selenium แนวทางการตรวจสอบ

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

เราจะมาดูวิธีการเข้าถึงและตรวจสอบคำแนะนำเครื่องมือ (tooltip) ในสองสถานการณ์ทั่วไปกัน:

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

สถานการณ์ที่ 1: คุณสมบัติ “title” ใน HTML

ในกรณีนี้ เราจะใช้เว็บไซต์ตัวอย่าง https://demo.guru99.com/test/social-icon.html และตรวจสอบคำอธิบายเพิ่มเติม (tooltip) ของไอคอน "github" ที่มุมบนขวาของหน้าเว็บ

ขั้นแรก เราจะค้นหาองค์ประกอบนั้น จากนั้นอ่านแอตทริบิวต์ "title" ขององค์ประกอบนั้น และเปรียบเทียบกับข้อความ tooltip ที่คาดหวังไว้

เนื่องจาก tooltip อยู่ในแอตทริบิวต์ “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]"));

        // Read the "title" attribute value of the Github icon
        String actualTooltip = github.getAttribute("title");

        // Assert that the tooltip value matches the expected one
        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. ตรวจสอบค่าที่ได้เทียบกับข้อความคำแนะนำที่คาดไว้

Selenium 4 เคล็ดลับ: ชอบ getDomAttribute("title") สำหรับแอตทริบิวต์ HTML ตามตัวอักษร และปล่อยให้ Selenium ผู้จัดการแก้ไขปัญหาไดรเวอร์แทนการเขียนโค้ดแบบตายตัว chromedriver.exe.

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

ปลั๊กอิน jQuery หลายตัวมีฟังก์ชันแสดงคำแนะนำเครื่องมือ (tooltip) และแต่ละตัวก็แสดงผลแตกต่างกันเล็กน้อย

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

สำหรับการสาธิตนี้ เราใช้สไตล์ “jQuery Tools Tooltip”

จุดเปิด https://demo.guru99.com/test/tooltip.htmlเมื่อเลื่อนเมาส์ไปวางเหนือ “ดาวน์โหลดเลย” จะแสดงคำแนะนำขั้นสูงพร้อมรูปภาพ พื้นหลังคำอธิบาย ตารางขนาดเล็ก และลิงก์ที่คลิกได้

หากคุณตรวจสอบโค้ดต้นฉบับ จะเห็นว่า div ที่แสดง tooltip นั้นอยู่ติดกับลิงก์ “ดาวน์โหลดเลย” อยู่แล้ว แท็ก script ด้านล่างจะควบคุมว่า tooltip จะปรากฏขึ้นเมื่อใด

ต่อไปเราจะตรวจสอบข้อความลิงก์ที่แสดงอยู่ภายในคำแนะนำ (tooltip)

ขั้นแรก ค้นหา WebElement สำหรับ “ดาวน์โหลดเลย” ใช้ Interactions API เพื่อย้ายไปยังองค์ประกอบนั้น (เมื่อวางเมาส์เหนือ) จากนั้น ค้นหา WebElement ที่เชื่อมโยงกับลิงก์ภายใน tooltip ที่แสดง และตรวจสอบข้อความว่าตรงกับค่าที่คาดไว้หรือไม่

นี่คือรหัส:

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);

        // Hover over the "Download now" link to reveal the tooltip
        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();
    }
}

Code คำอธิบาย:

1. ค้นหา WebElement ที่ตรงกับองค์ประกอบ “ดาวน์โหลดเดี๋ยวนี้” ที่คุณจะวางเมาส์เหนือองค์ประกอบนั้น
2. ใช้ Interactions API เพื่อเลื่อนเคอร์เซอร์ไปที่ “ดาวน์โหลดเลย”
3. เมื่อคำแนะนำปรากฏขึ้น ให้ค้นหา WebElement ที่แสดงถึงลิงก์ภายในคำแนะนำ (แท็ก “a”)
4. อ่านข้อความคำแนะนำด้วย getText() และเปรียบเทียบกับค่าที่คาดหวังซึ่งถูกจัดเก็บไว้ expectedTooltip.

คำถามที่พบบ่อย