Làm việc với Tooltip trong Selenium WebDriver

Tooltip là gì?

Tooltip là một element hiển thị trên màn hình dạng text, nó được dùng để chú thích hoặc là cung cấp thêm thông tin cho user. Để hiển thị tooltip, user sẽ hover chuột vào phần tử đó có tooltip và nó sẽ biến mất khi chúng ta di chuyển chuột ra khỏi phần tử đó.

Tooltip có thể hiển thị ở trên , dưới, bên trái hoặc bên phải của phần tử như sau:

Làm việc với Tooltip trong Selenium WebDriver

Có hai cách:

1. Sử dụng phương thức getAttribute()
2. Sử dụng class Actions

Sử dụng Phương thức getAttribute()

Dựa vào html code chúng ta có thể xác minh tooltip bằng cách lấy giá trị của thuộc tính title bằng phương thức getAttribute().

Ví dụ:

1. Mở trình duyệt Chrome, truy cập vào trang web devopsify.co,
2. Click vào “Cho Phép” button để đóng pop-up “Bạn có muốn nhận cập nhật và hướng dẫn mới nhất về DevOps & Cloud?”
3. In tooltip text của Selenium ở console
4. Đóng trình duyệt

Lưu ý: Tai step 3, Khi bạn di chuyển chuột lên chữ Selenium, tooltip text “Tìm hiểu Selenium” được hiển thị như hình dưới.

HTML code

Như html code của element có tooltip như hình dưới, bạn sẽ thấy là tooltip text sẽ hiển thị giá trị của thuộc tính “title” của một phần tử.

Vậy cách lấy giá trị của thuộc tính title bằng phương thức getAttribute() như sau

WebElement seleniumTooltip=driver.findElement(By.linkText("Selenium"));
System.out.println("Tooltip text : "+ seleniumTooltip.getAttribute("title"));

Code example

package SeleniumWebDriverTutorial;

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;



public class Tooltip {
    public static void main (String[] args) throws InterruptedException {
        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://devopsify.co/tao-selenium-automation-test-voi-maven-intellij/");
        Thread.sleep(3000);


        driver.findElement(By.cssSelector("button.align-right.primary.slidedown-button")).click();
        WebElement seleniumTooltip=driver.findElement(By.linkText("Selenium"));

        System.out.println("Tooltip text : "+ seleniumTooltip.getAttribute("title"));
        driver.close();

    }
}

Sử dụng class Actions

Khồng phải lúc nào tooltip cũng được lấy từ giá trị của title , nếu không có thuộc tính title vậy lúc này chúng ta không thể dùng phương thức getAttribute() để lấy giá trị tooltip được, chúng ta sẽ sử dụng class Actions., tập trung vào việc bắt chước hành động di chuyển chuột hover lên chữ Selenium của người dùng.

Class Actions được dùng để xử lý các hành động từ bàn phím hay chuột khác nhau của người dùng

Ví dụ: như hình dưới đây bạn sẽ thấy khi người dùng hover chuột luôn “Hover over me”, tooltip text ” Display tooltip” được hiển thị trên UI. Nhưng khi xem HTML code thì bạn sẽ không tìm thấy thuộc tính title.

HTML Code

Note: Bạn có thể copy và save file HTML dưới đây, thay đường dẫn đến file HTML trong code Automation Test nhé.

Cũng giống như cách 1 sử dụng phương thức getAttribute(). Đoạn mã này chỉ cần viết lại sử dụng class Actions như sau:

1. Xác định element có tooltip khi hover chuột lên
2. Sử dụng Action class để thực hiện mouse hover
3. Xác định element có chứa tooltip text
4. In tooltip text ở console. Để lấy tooltip text, bạn sử dụng phương thức getText() nhé.

Code example

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class Main {
    public static void main (String[] args) throws InterruptedException {
        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("D:\\tooltipExample.html");
        Thread.sleep(3000);

        WebElement seleniumTooltip=driver.findElement(By.cssSelector(".tooltip"));

        //Instantiate Action Class
        Actions action = new Actions(driver);

        // Using the action class to mimic mouse hover
        action.moveToElement(seleniumTooltip).perform();
        Thread.sleep(3000);

        WebElement tooltipText=driver.findElement(By.cssSelector(".tooltiptext"));

        // To get and print the tool tip text 
        System.out.println("toolTipText-->"+  tooltipText.getText() );

        driver.close();

    }

}

Các bạn hãy thử nhé!