Tech

Verify Tooltip sử dụng Selenium WebDriver

Tooltip trong Selenium

Tooltip trong Selenium là một text xuất hiện khi di chuột lên một đối tượng trên một trang web. Đối tượng có thể là một liên kết, một hình ảnh, một button, một vùng văn bản,… tooltip text thường cung cấp thêm thông tin về đối tượng code người dùng di chuột qua con trỏ chuột.

Tooltips theo truyền thống được triển khai dưới dạng thuộc tính ‘tiêu đề’ cho một phần tử. Giá trị của thuộc tính này được hiển thị dưới dạng Tooltips khi di chuột. Đây là một văn bản tĩnh cung cấp thông tin của phần tử không có kiểu dáng.

Hiện nay, có rất nhiều plugin có sẵn để triển khai ‘tooltips’. Tooltips nâng cao với tạo kiểu, kết xuất, hình ảnh và liên kết đang được triển khai bằng cách sử dụng các plugin JavaScript / JQuery hoặc sử dụng Tooltips CSS.

  • Để truy cập hoặc xác minh các Tooltips tĩnh được triển khai bằng thuộc tính HTML “title”, chúng ta có thể chỉ cần sử dụng phương thức getAttribute (“title”) của WebElement. Giá trị trả về của phương pháp này (là tooltip text) được so sánh với giá trị mong đợi để xác minh.
  • Đối với các dạng triển khai Tooltips khác, chúng tôi sẽ phải sử dụng “API tương tác người dùng nâng cao” do Web Driver cung cấp để tạo hiệu ứng di chuột và sau đó truy xuất Tooltips cho phần tử.

Tóm tắt về API tương tác người dùng nâng cao:

API tương tác người dùng nâng cao cung cấp API cho các Action của người dùng như kéo và thả, di chuột, chọn nhiều lần, nhấn và thả phím và các Action khác bằng bàn phím hoặc chuột trên trang web.

Bạn có thể tham khảo liên kết này để biết thêm chi tiết về API : https://seleniumhq.github.io/selenium/docs/api/java/index.html?org/openqa/selenium/interaction/Actions.html

Ở đây, chúng ta hãy xem cách sử dụng một vài class và phương thức code chúng ta sẽ cần để di chuyển một phần tử thanh trượt bằng một phần tử bù đắp.

Bước 1) Để sử dụng API, các package / class sau cần được nhập:

Bước 2) Tạo một đối tượng của class “Action” và xây dựng Chuỗi Action của người dùng. class Actions được sử dụng để xây dựng chuỗi các Action của người dùng như moveToElement (), dragAndDrop (), v.v. Các phương thức khác nhau liên quan đến Action của người dùng được cung cấp bởi API.

Đối tượng Driver được cung cấp như một tham số cho phương thức khởi tạo của nó.

Bước 3) Tạo một Đối tượng Action bằng cách sử dụng phương thức build () của class “Action”. package phương thức Perform () để thực thi tất cả các Action được xây dựng bởi đối tượng Action (trình tạo ở đây).

Chúng ta đã thấy cách sử dụng một số phương thức Action của người dùng do API cung cấp – clickAndHold (phần tử), moveByOffset (10,0), release (). API cung cấp nhiều phương pháp như vậy.

Cách lấy tooltip text trong Selenium Webdriver

Chúng ta hãy xem trình diễn về cách truy cập và xác minh các tooltips trong tình huống đơn giản

  • Tình huống 1: Tooltips được triển khai bằng thuộc tính “title”
  • Tình huống 2: Tooltips được triển khai bằng plugin jQuery.

Tình huống 1: Thuộc tính HTML ‘title’

Đối với trường hợp này, hãy lấy trang web ví dụ – http://demo.guru99.com/test/social-icon.html .

Chúng tôi sẽ cố gắng xác minh Tooltips của biểu tượng “github” ở trên cùng bên phải của trang.

Để làm điều đó, trước tiên chúng tôi sẽ tìm phần tử và lấy thuộc tính ‘title’ của nó và xác minh bằng văn bản tooltips dự kiến.

Vì chúng tôi đang giả sử tooltips nằm trong thuộc tính “title”, chúng tôi thậm chí không tự động hóa hiệu ứng di chuột code chỉ đơn giản là truy xuất giá trị của thuộc tính bằng phương thức “getAttribute ()”.

Đây là code

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 codein(String[] args) {

        String baseUrl = “http://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”;

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

   }

}

Giải thích code

  1. Tìm WebElement đại diện cho biểu tượng “github”.
  2. Lấy thuộc tính “title” của nó bằng phương thức getAttribute ().
  3. Khẳng định giá trị so với giá trị Tooltips dự kiến.

Tình huống 2: Plugin JQuery:

Có rất nhiều plugin JQuery có sẵn để triển khai các Tooltips và mỗi plugin có một hình thức triển khai hơi khác nhau.

Một số plugin mong muốn HTML của Tooltips luôn hiện diện bên cạnh phần tử code Tooltips có thể áp dụng trong khi các plugin khác tạo thẻ “div” động, xuất hiện nhanh khi di chuột qua phần tử.

Đối với phần trình diễn của chúng tôi, hãy xem xét cách triển khai Tooltips “jQuery Tools Tooltip”.

Tại đây trong URL – http://demo.guru99.com/test/tooltip.html, bạn có thể xem bản trình diễn khi di chuột qua “Tải xuống ngay”, chúng tôi nhận được Tooltips nâng cao với hình ảnh, nền chú thích, bảng và một liên kết bên trong nó có thể nhấp được.

Nếu bạn nhìn vào nguồn bên dưới, bạn có thể thấy rằng thẻ div đại diện cho Tooltips luôn xuất hiện bên cạnh thẻ của liên kết “Tải xuống ngay bây giờ”. Tuy nhiên, code bên trong thẻ script bên dưới sẽ kiểm soát thời điểm nó cần bật lên.

Hãy thử xác minh chỉ văn bản liên kết trong Tooltips cho phần trình diễn của chúng tôi ở đây.

Đầu tiên chúng ta sẽ tìm thấy WebElement tương ứng với “Tải xuống ngay bây giờ”. Sau đó, sử dụng API tương tác, chúng tôi sẽ chuyển đến phần tử (di chuột). Tiếp theo, chúng ta sẽ tìm thấy WebElement tương ứng với liên kết bên trong Tooltips được hiển thị và xác minh nó với văn bản mong đợi.

Đây là code

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 = “http://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();

   }

}

Giải thích code

  1. Tìm WebElement tương ứng với phần tử “tải xuống ngay bây giờ” code chúng ta sẽ di chuột.
  2. Sử dụng API tương tác, di chuột đến “Tải xuống ngay bây giờ”.
  3. Giả sử Tooltips được hiển thị, hãy tìm WebElement tương ứng với liên kết bên trong Tooltips, tức là thẻ “a”.
  4. Xác minh tooltip text của liên kết được truy xuất bằng cách sử dụng getText () so với giá trị mong đợi code chúng tôi đã lưu trữ trong “worthyToolTip “

Bản tóm tắt:

Trong hướng dẫn này, bạn đã học cách truy cập Tooltips bằng Web Driver Selenium.

  • Mẹo về Công cụ được thực hiện theo nhiều cách khác nhau –
    • Việc triển khai cơ bản dựa trên thuộc tính “title” của HTML. getAttribute (title) nhận giá trị của Tooltips.
    • Triển khai tooltips khác như JQuery, Tooltips CSS yêu cầu API tương tác để tạo hiệu ứng di chuột
  • API tương tác người dùng nâng cao
    • moveToElement (phần tử) của class Actions được sử dụng để di chuột qua phần tử.
    • Phương thức Build () của class Actions xây dựng chuỗi các Action của người dùng thành một đối tượng Action.
    • class Perform () of Action thực thi tất cả chuỗi Action của người dùng cùng một lúc.
  • Để xác minh Tooltips, trước tiên chúng ta phải di chuột qua phần tử, sau đó tìm phần tử tương ứng với đầu công cụ và lấy văn bản hoặc các giá trị khác của nó để xác minh so với các giá trị mong đợi.

Blog Tiền Điện Tử

Blog tiền điện tử công thông tin tổng hợp uy tín nhất tất cả các mảng xã hội, giáo dục , công nghệ số. Với khả năng số hóa mạnh mẽ hy vọng sẽ mang lại cho quý bạn đọc những thông tin chính xác nhất 24/24
Back to top button