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:
- Sử dụng phương thức getAttribute()
- 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ụ:
- Mở trình duyệt Chrome, truy cập vào trang web devopsify.co,
- 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?”
- In tooltip text của Selenium ở console
- Đó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:
- Xác định element có tooltip khi hover chuột lên
- Sử dụng Action class để thực hiện mouse hover
- Xác định element có chứa tooltip text
- 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é!
Comments 1