Cách xử lý bảng Web trong Selenium

Đọc bảng HTML trên web

Có rất nhiều trường hợp người kiểm thử cần truy cập các phần tử, thường là các giá trị văn bản, nằm bên trong các bảng HTML. Tuy nhiên, các nhà thiết kế web hiếm khi cung cấp thuộc tính id hoặc name cho từng ô riêng lẻ. Do đó, các phương thức như By.id(), By.name() hoặc By.cssSelector() hiếm khi hoạt động. Trong trường hợp này, lựa chọn đáng tin cậy nhất là By.xpath() vì nó duyệt qua các mối quan hệ cha-con bên trong thẻ bảng.

Cách xử lý bảng Web trong Selenium

Hãy xem xét mã HTML bên dưới để xử lý các bảng web trong Selenium.

Chúng tôi sẽ sử dụng Xpath để lấy văn bản bên trong ô chứa văn bản “ô thứ tư”.

Bước 1 – Đặt phần tử gốc (bảng)

Bộ định vị XPath trong WebDriver luôn bắt đầu bằng dấu gạch chéo kép “//” theo sau là phần tử cha.. Vì chúng ta đang làm việc với các bảng web trong Selenium, phần tử cha phải luôn là nhãn. Phần đầu tiên của chúng tôi Selenium Do đó, bộ định vị bảng XPath phải bắt đầu bằng “//table”.

Bước 2 – Thêm các phần tử con

Phần tử nằm ngay bên dưới là , Vì thế là con của Ngược lại, là cha mẹ của Tất cả các phần tử con trong XPath được đặt ở bên phải phần tử cha, được phân tách bởi một dấu gạch chéo “/” như hình bên dưới.

Bước 3 – Thêm vị từ

Cái phần tử chứa hai thẻ. Hai cái này thẻ là con của , Vì thế là cha mẹ của cả hai. Hai Các phần tử là anh chị em ruột. Anh chị em ruột là những phần tử con có chung cha mẹ..

Để đến được Để chứa “ô thứ tư”, trước tiên chúng ta phải truy cập vào 2 Không phải cái đầu tiên. Chỉ cần viết “//table/tbody/tr” sẽ nhắm đến cái đầu tiên. nhãn.

Vậy làm thế nào để chúng ta truy cập vào cái thứ hai? Câu trả lời là sử dụng Dự đoán. Vị ngữ là các số hoặc thuộc tính HTML được đặt trong dấu ngoặc vuông “[ ]” dùng để phân biệt một phần tử con với các phần tử con khác của nó.Vì hàng chúng ta cần là hàng thứ hai, nên chúng ta sử dụng “[2]” làm vị ngữ.

Nếu bỏ qua mệnh đề điều kiện, XPath sẽ trả về phần tử anh em ruột đầu tiên. Do đó, một trong hai đoạn mã XPath dưới đây sẽ tìm thấy phần tử anh em ruột đầu tiên. .

Bước 4 – Thêm các phần tử con thành công bằng cách sử dụng các vị từ thích hợp

Yếu tố tiếp theo chúng ta cần là yếu tố thứ hai. Áp dụng các quy tắc từ Bước 2 và 3, ta thu được XPath như hình bên dưới.

Giờ đây, khi đã có bộ định vị XPath chính xác, chúng ta có thể truy cập vào ô và đọc nội dung bên trong bằng đoạn mã dưới đây. Điều này giả định rằng bạn đã lưu trang HTML dưới dạng “newhtml.html” trong ổ C của mình.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/write-xpath-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

Truy cập các bảng lồng nhau

Các nguyên tắc tương tự cũng áp dụng cho các bảng lồng nhau. Bảng lồng nhau là bảng được đặt bên trong một bảng khác.. Một ví dụ đã được biểu diễn ở dưới.

Để truy cập vào ô chứa văn bản “4-5-6” bằng cách sử dụng các ý tưởng về quan hệ cha/con và điều kiện từ phần trước, chúng ta có thể tạo XPath như hình bên dưới.

Đoạn mã WebDriver bên dưới truy xuất nội dung văn bản bên trong ô được chọn.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/accessing-nested-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

Kết quả bên dưới xác nhận rằng bảng bên trong đã được truy cập thành công.

Sử dụng thuộc tính làm vị ngữ

Nếu phần tử nằm sâu bên trong HTML, khiến việc đếm các phần tử cùng cấp trở nên khó khăn, chúng ta có thể sử dụng thuộc tính duy nhất của phần tử đó thay thế.

Trong ví dụ bên dưới, ô "New York đến Chicago" được đặt sâu bên trong. Mercury Trang chủ các tour du lịch.

Chúng ta có thể sử dụng thuộc tính duy nhất của bảng (width=”270″) làm vị ngữ. Các thuộc tính được sử dụng làm vị từ bằng cách thêm ký hiệu @ vào trước chúngTrong ví dụ trên, ô “New York đến Chicago” nằm ở vị trí đầu tiên. của thứ tư Vì vậy, XPath của chúng ta sẽ trông giống như hình bên dưới.

Hãy nhớ rằng khi bạn đặt XPath vào bên trong JavaHãy sử dụng dấu gạch chéo ngược để thoát khỏi dấu ngoặc kép xung quanh "270" để chuỗi By.xpath() không bị kết thúc sớm.

Bây giờ chúng ta đã sẵn sàng truy cập vào ô đó bằng mã bên dưới.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

Phím tắt: Sử dụng Kiểm tra phần tử để truy cập các bảng trong Selenium

Nếu khó lấy chỉ mục hoặc thuộc tính của một phần tử, cách nhanh nhất để tạo XPath là sử dụng chức năng Kiểm tra phần tử (Inspect Element) trong công cụ dành cho nhà phát triển của các trình duyệt hiện đại.

Hãy xem xét ví dụ dưới đây từ... Mercury Trang chủ các tour du lịch.

Bước 1

Nhấp chuột phải vào ô cần chọn và chọn "Kiểm tra" để xem đường dẫn DOM, sau đó sao chép toàn bộ XPath.

Bước 2

Tìm phần tử cha “bảng” đầu tiên và xóa mọi thứ ở bên trái của nó.

Bước 3

Thêm tiền tố "//" vào phần XPath còn lại và sao chép nó vào mã WebDriver của bạn.

Đoạn mã WebDriver bên dưới truy xuất văn bản bên trong của phần tử lồng sâu.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table/tbody/tr/td[2]"
        + "//table/tbody/tr[4]/td/"
        + "table/tbody/tr/td[2]/"
        + "table/tbody/tr[2]/td[1]/"
        + "table[2]/tbody/tr[3]/td[2]/font"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

Cách đếm số hàng và cột trong bảng web động

Các bảng dữ liệu động trên web, chẳng hạn như bảng điều khiển hoặc kết quả tìm kiếm, hiển thị số lượng hàng khác nhau mỗi khi tải trang. Để xử lý chúng, hãy sử dụng findElements để lấy mọi thứ vào một List, sau đó lặp qua để đọc từng ô. Đoạn mã bên dưới đếm số hàng và đọc từng ô trong một bảng có id là “customers”.

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

Bọc thiết bị định vị bằng một WebDriverWait với visibilityOfAllElementsLocatedBy Khi bảng được tải bằng AJAX, điều này giúp ngăn ngừa tình trạng tham chiếu phần tử lỗi thời trên các lưới hiển thị chậm.

Selenium 4 Bộ định vị tương đối cho bảng trên web

Selenium Phiên bản 4 giới thiệu các bộ định vị tương đối nhắm mục tiêu các phần tử theo vị trí trực quan. Chúng hữu ích khi chỉ mục XPath bị lỗi do các hàng được sắp xếp lại. Các phương thức above(), below(), toLeftOf(), toRightOf()và near() Tất cả đều chấp nhận một WebElement neo.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

Các bộ định vị tương đối vẫn dễ đọc ngay cả khi thứ tự cột thay đổi. Kết hợp chúng với các lệnh chờ rõ ràng để đạt được hiệu quả tốt nhất trên các trang dựa trên dữ liệu.

Công cụ AI để xử lý bảng dữ liệu động trên web

Các nền tảng kiểm thử hỗ trợ bởi AI giúp giảm thiểu việc bảo trì thiết bị định vị trên các lưới điện thường xuyên thay đổi. Các công cụ như Testim, mablvà Chức năng hóa Chúng sử dụng thị giác máy tính kết hợp với mô hình DOM để phát hiện sự dịch chuyển cột và định vị tự phục hồi. Chúng xác định các hàng dựa trên văn bản tiêu đề và sự tương đồng giữa các ô thay vì các chỉ mục XPath cố định.

Cho tinh khiết Selenium các dự án, thư viện như Healenium Bọc WebDriver và viết lại các bộ định vị bị lỗi trong quá trình chạy. Kết hợp các công cụ này với WebDriverWait để giữ cho các tập lệnh bảng động ổn định mà không cần viết lại các bộ chọn sau mỗi lần thay đổi giao diện người dùng.

Tổng kết

• By.xpath() là cách đáng tin cậy nhất để truy cập các ô của Bảng Web. Selenium.
• Nếu việc đếm số anh chị em ruột khó khăn, hãy sử dụng một thuộc tính duy nhất làm vị ngữ, được đặt tiền tố bằng ký hiệu @.
• findElements trả về một List Hỗ trợ việc đếm số hàng trong các bảng động.
• Selenium 4 bộ định vị tương đối (trên, dưới, gần) giúp giảm sự phụ thuộc vào XPath vị trí.
• Chức năng "Kiểm tra phần tử" trong DevTools giúp tăng tốc quá trình tạo XPath cho các ô nằm sâu bên trong.
• Các công cụ AI như TestimCác thiết bị định vị tự phục hồi Mabl và Healenium dùng để thay đổi lưới điện.

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