Cách bấm vào hình ảnh trong Selenium webdriver

⚡ Tóm tắt thông minh

Nhấp chuột vào hình ảnh trong Selenium WebDriver yêu cầu sử dụng bộ chọn CSS hoặc chiến lược XPath vì các phần tử hình ảnh không hiển thị văn bản liên kết. Bài viết này giải thích cách định vị hình ảnh, kích hoạt hành động nhấp chuột và xác minh rằng việc điều hướng thành công.

  • 🖱️ Hành động cốt lõi: Sử dụng driver.findElement(By.cssSelector(…)).click() để thực hiện thao tác nhấp chuột vào bất kỳ phần tử hình ảnh nào được hiển thị bên trong thẻ neo.
  • 🎯 Lựa chọn định vị: Các thuộc tính By.linkText và By.partialLinkText không hoạt động với hình ảnh, vì vậy cần sử dụng By.cssSelector hoặc By.xpath.
  • 🧪 Bước xác minh: Xác nhận thao tác nhấp chuột thành công bằng cách kiểm tra tiêu đề trang mới bằng cách sử dụng driver.getTitle() so với chuỗi đích dự kiến.
  • 🤖 Hỗ trợ AI: Các plugin AI hiện đại đề xuất các bộ chọn CSS ổn định và tự động sửa lỗi định vị khi mã đánh dấu ứng dụng hoặc giá trị thuộc tính thay đổi.
  • 🛠️ Những cạm bẫy phổ biến: Hình ảnh bị ẩn, tải chậm hoặc chồng chéo thường yêu cầu phải chờ đợi rõ ràng, cuộn vào khung hình hoặc JavaNhấp chuột vào tập lệnh để đăng ký đúng cách.

Bấm vào Hình ảnh trong Selenium

Nhấp chuột vào hình ảnh trong Selenium WebDriver là một công việc phổ biến khi biểu tượng, logo hoặc hình thu nhỏ hoạt động như một liên kết điều hướng. Vì hình ảnh không chứa văn bản hiển thị, các bộ định vị văn bản liên kết truyền thống sẽ không hiệu quả và cần một chiến lược chọn lọc đáng tin cậy hơn.

Truy cập liên kết hình ảnh

Liên kết hình ảnh là các điểm neo trên trang web được biểu thị bằng hình ảnh, khi nhấp vào sẽ điều hướng trình duyệt đến một cửa sổ hoặc trang khác.

Vì chúng là hình ảnh, chúng ta không thể sử dụng các phương thức By.linkText() và By.partialLinkText() vì các liên kết hình ảnh không có văn bản liên kết nào cả.

Trong trường hợp này, chúng ta nên sử dụng By.cssSelector hoặc By.xpath. Phương pháp đầu tiên thường được ưu tiên hơn vì tính đơn giản và dễ đọc của nó.

Trong ví dụ bên dưới, chúng ta sẽ truy cập vào logo “Facebook” ở phần trên bên trái của trang Khôi phục mật khẩu của Facebook.

Truy cập liên kết hình ảnh

Chúng ta sẽ sử dụng By.cssSelector và thuộc tính “title” của phần tử để truy cập liên kết hình ảnh. Sau đó, chúng ta sẽ kiểm tra xem trình duyệt đã được chuyển đến trang chủ của Facebook hay chưa.

Java Code Ví dụ

Sau đây Selenium Đoạn mã WebDriver này khởi chạy Chrome, mở trang khôi phục mật khẩu Facebook, nhấp vào hình ảnh biểu tượng Facebook và xác nhận tiêu đề trang hiển thị.

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);
        // click on the "Facebook" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // verify that we are now back on Facebook's homepage
        if (driver.getTitle().equals("Facebook - log in or sign up")) {
            System.out.println("We are back at Facebook's homepage");
        } else {
            System.out.println("We are NOT in Facebook's homepage");
        }
        driver.close();
    }
}

Kết quả

Bấm vào Hình ảnh trong Selenium webdriver

Các phương pháp tốt nhất để chụp ảnh

Một vài thói quen giúp tự động hóa nhấp chuột vào hình ảnh hoạt động đáng tin cậy hơn trên nhiều trình duyệt và kích thước màn hình khác nhau.

  • Nên ưu tiên sử dụng các thuộc tính ổn định như title, alt, aria-label hoặc data-* thay vì các đường dẫn CSS lồng nhau quá sâu.
  • Thêm lệnh WebDriverWait rõ ràng cho sự kiện ElementToBeClickable trước khi thực hiện thao tác nhấp chuột.
  • Đối với hình ảnh được tải chậm, hãy cuộn phần tử vào tầm nhìn bằng JavascriptNgười thi hành án trước.
  • Nếu một lớp phủ trong suốt chặn cú nhấp chuột, hãy chuyển sang phương án dự phòng. JavaNhấp chuột vào phần tử bên dưới bằng đoạn mã.
  • Xác thực điều hướng bằng cách sử dụng driver.getTitle() hoặc một phần tử duy nhất trên trang đích.

Cách trí tuệ nhân tạo cải thiện các chiến lược định vị hình ảnh

các công cụ kiểm thử hỗ trợ bởi trí tuệ nhân tạo như TestimMabl và Healenium phân tích DOM xung quanh một hình ảnh và đề xuất các bộ định vị tự phục hồi. Khi tên lớp hoặc thuộc tính thay đổi sau khi phát hành, khung phần mềm sẽ tự động thay thế bằng phương án ổn định nhất, giúp giảm thiểu các lỗi không ổn định trong điều hướng dựa trên biểu tượng.

Các kỹ sư cũng có thể sử dụng ChatGPT hoặc GitHub Copilot để tạo các đoạn mã WebDriver, đề xuất các biểu thức CSS hoặc XPath mạnh mẽ cho hình ảnh và soạn thảo các khẳng định cho trang tải sau khi nhấp chuột. Mã được tạo ra vẫn cần được xem xét lại về tính chính xác và khả năng xử lý các thao tác chờ và lớp phủ.

Kết luận

Nhấp vào các liên kết hình ảnh trong Selenium WebDriver khá đơn giản một khi bạn đã chọn được một bộ định vị ổn định. Sử dụng `By.cssSelector` với thuộc tính `title` hoặc `alt` là cách dễ đọc nhất, `By.xpath` là phương án dự phòng khi mã HTML phức tạp, và việc sử dụng các lệnh chờ rõ ràng giúp cho script hoạt động đáng tin cậy trong các lần chạy khác nhau.

Câu Hỏi Thường Gặp

Tìm hình ảnh bằng By.cssSelector hoặc By.xpath sử dụng thuộc tính ổn định như title, alt hoặc aria-label, sau đó gọi .click() trên WebElement được trả về. Xác minh kết quả bằng driver.getTitle() hoặc một phần tử duy nhất trên trang đích.

Đúng vậy. Các công cụ như... TestimMabl và ChatGPT kiểm tra DOM xung quanh và đề xuất một bộ chọn ổn định dựa trên các thuộc tính title, alt, aria-label hoặc data. Các kỹ sư vẫn nên xem xét lại bộ định vị được tạo ra để đảm bảo tính duy nhất và khả năng phục hồi.

Bộ định vị tự phục hồi là một tính năng AI tự động thay thế bộ chọn ban đầu khi bộ chọn đó gặp sự cố. Các framework như Healenium và Mabl theo dõi sự thay đổi thuộc tính xung quanh hình ảnh và chọn bộ chọn thay thế ổn định nhất, giúp giảm thiểu các lỗi kiểm thử không ổn định sau khi làm mới giao diện người dùng.

Cả hai bộ định vị đều khớp với văn bản hiển thị bên trong thẻ neo. Liên kết hình ảnh bao bọc thẻ img và không hiển thị nút văn bản nào, vì vậy kết quả khớp luôn trả về rỗng. Thay vào đó, hãy sử dụng By.cssSelector hoặc By.xpath với title, alt hoặc aria-label.

Nếu lớp phủ, cửa sổ bật lên hoặc chú thích che khuất hình ảnh, hãy cuộn nó vào tầm nhìn bằng cách sử dụng JavascriptThêm trình thực thi và sử dụng WebDriverWait cho sự kiện ElementToBeClickable. Trong trường hợp dự phòng, hãy thực thi một phương thức khác. JavaNhấp chuột vào WebElement bằng script để bỏ qua phần chồng chéo.ping lớp.

Xác nhận tiêu đề trang mới bằng cách sử dụng driver.getTitle(), tiêu đề hiện tại URL Sử dụng driver.getCurrentUrl() hoặc sự hiện diện của một phần tử duy nhất trên trang đích. Sự kết hợp của các kiểm tra này giúp bài kiểm tra tin tưởng rằng cú nhấp chuột thực sự đã kích hoạt điều hướng.

Tóm tắt bài viết này với: