Chào các bạn đã đến với chủ đề tiếp theo của mình Hôm nay, mình sẽ tiếp tục giới thiệu về ToolTip. Tooltip là một chú thích xuất hiện khi bạn hover 1 control nào đó như button, label, link … Nội dung của nó sẽ nói cho người dùng biết đối tượng này dùng để làm gì hoặc hiển thị thêm thông tin. Chúng ra rất dễ dàng thấy nó trên các site thương mại điện tử. Tooltip thường hiển thị thêm các thông tin về hình ảnh, thông số kỹ thuật, giá cả của sản phẩm mà bạn đang xem. Ưu điểm lớn nhất của tooltip không chỉ là hiển thị được thêm nhiều thông tin của đối tượng mà còn tiết kiệm được diện tích trên giao diện.
Ví dụ như hình trên, khi bạn hover vào button Action, 1 tooltip sẽ hiển thị “Info about the action“. Như mình nói ở trên, thì flow nó như sau:
- Hover vào button Action
- Get nội dung của tooltip
- Verify tooltip hiển thị có đúng không?
Thật ra về cách verify tooltip không khó. Nó chỉ khó đối với các bạn mới bắt đầu học automation, không biết làm thế nào để bắt xpath của nó. Bởi vì khi mình hover vào button, thì element của tootip mới xuất hiện trong DOM. Sau đó khi mouse out, element tooltip đó lại biến mất.
Bây giờ, mình sẽ đi vào nội dung chính luôn nhé.
1. Hover to control to show tooltip
- Như mình đã nói ở trên, để show tooltip, chúng ta cần phải hover chuột vào control đó. Ví dụ như hình trên, chúng ta sẽ hover chuột lên button Action. Lúc này, tooltip “Info about the action” sẽ hiện ra.
- Để hover lên control trong Selenium, chúng ta sẽ sử dụng hàm moveToElement()
// Hover to button Action
Actions action = new Actions(driver);
WebElement element_tooltip = driver.findElement(By.xpath("//tooltip-overview-example/button"));
action.moveToElement(element_tooltip).perform();2. Tip to find xpath of tooltip
Thông thường khi bắt xpath với tooltip sẽ khó khăn hơn bắt xpath ở các loại control khác. Vì nó là element động, khi bạn hover chuột vào control này, thì element sẽ xuất hiện trong DOM. Nhưng nếu bạn focus chuột ở 1 nơi khác, thì những element này sẽ mất đi. Vì vậy để bắt xpath của nó, mình sẽ làm các bước sau đây:
- Open Dev tool (F12) -> select tab Console
- Input setTimeout ( function () { debugger }, 5000). (Số 5000 ở đây chính là thời gian timeout. Ví dụ dụ khi bạn chạy câu lệnh này, sau 5s nó sẽ chuyển sang chế độ debug)
- Mouse hover to control to show element tooltip
- Switch to Elements tab and find xpath
3. Ví dụ
Sample test case:
- Open url: https://material.angular.io/components/tooltip/overview
- Hover vào button Action
- Get tooltip text
- Verify tooltip “Info about the action” displayed
Sample code:
@Test
public void TC_01_Tooltip(){
driver.get("https://material.angular.io/components/tooltip/overview");
// Hover to button Action
Actions action = new Actions(driver);
WebElement element_tooltip = driver.findElement(By.xpath("//tooltip-overview-example/button"));
action.moveToElement(element_tooltip).perform();
// Get tooltip
String tooltip = driver.findElement(By.cssSelector(".mdc-tooltip__surface")).getText();
// Verify tooltip "Info about the action" displayed
Assert.assertEquals(tooltip, "Info about the action");
}Kết quả:
4. Kết
Như vậy mình đã giới thiệu qua cách xử lý cho tooltip trong Selenium. Cảm ơn các bạn đã theo dõi bài viết của mình. Chúc các bạn thành công. Hẹn gặp lại các bạn ở những chủ đề tiếp theo.