Xử lý web table trong Selenium WebDriver

Web table trong Selenium là gì?

Web table trong Selenium là một WebElement sử dụng cho các đại diện table dữ liệu hoặc thông tin. Dữ liệu hoặc thông tin được hiển thị có thể là tĩnh hoặc động. web table và các phần tử của nó có thể được truy cập table cách sử dụng các hàm và trình định vị WebElement trong Selenium. Ví dụ điển hình của web table sẽ là thông số sản phẩm được hiển thị trên nền tảng Thương mại điện tử.

Đọc web table HTML

Đôi khi chúng ta cần truy cập các phần tử (thường là văn bản) nằm trong table HTML. Tuy nhiên, rất hiếm khi nhà thiết kế web cung cấp thuộc tính id hoặc name cho một ô nhất định trong table. Do đó, chúng ta không thể sử dụng các phương thức thông thường như “By.id ()”, “By.name ()”, hoặc “By.cssSelector ()”. Trong trường hợp này, tùy chọn đáng tin cậy nhất là truy cập chúng table phương thức “By.xpath ()”.

Cách viết XPath cho Table trong Selenium

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

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

Bước 1 – Đặt Phần tử gốc (table)

Các trình định vị XPath trong WebDriver luôn bắt đầu table dấu gạch chéo kép “//” và sau đó là phần tử mẹ . Vì chúng ta đang xử lý các web table trong Selenium, nên phần tử mẹ phải luôn là thẻ <table>. Do đó, phần đầu tiên của Locator table Selenium XPath của chúng ta phải bắt đầu table “// table”.

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

Phần tử ngay dưới <table> là <tbody> nên chúng ta có thể nói rằng <tbody> là “con” của <table>. Và ngoài ra, <table> là “cha” của <tbody>. Tất cả các phần tử con trong XPath được đặt ở bên phải phần tử mẹ của chúng, được phân tách table một dấu gạch chéo “/” về phía trước như đoạn mã được hiển thị bên dưới.

Bước 3 – Thêm dự đoán

Phần tử <tbody> chứa hai thẻ <tr>. Bây giờ chúng ta có thể nói rằng hai thẻ <tr> này là “con” của <tbody>. Do đó, chúng ta có thể nói rằng <tbody> là cha của cả hai phần tử <tr>.

Một điều khác mà chúng ta có thể kết luận là hai phần tử <tr> là anh em ruột. Anh chị em ruột đề cập đến các phần tử con có cùng cha mẹ .

Để truy cập vào <td> mà chúng ta muốn truy cập (ô có văn bản “ô thứ tư”), trước tiên chúng ta phải truy cập vào <tr> thứ hai chứ không phải ô đầu tiên. Nếu chúng ta chỉ viết “// table / tbody / tr”, thì chúng ta sẽ truy cập thẻ <tr> đầu tiên.

Vì vậy, làm thế nào để chúng ta truy cập <tr> thứ hai sau đó? Câu trả lời cho điều này là sử dụng Predicates .

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

Nếu chúng ta không sử dụng bất kỳ vị ngữ nào, XPath sẽ truy cập vào vị ngữ đầu tiên. Do đó, chúng ta có thể truy cập <tr> đầu tiên table cách sử dụng một trong hai mã XPath này.

Bước 4 – Thêm các yếu tố con thành công table cách sử dụng các dự đoán thích hợp

Phần tử tiếp theo chúng ta cần truy cập là <td> thứ hai. Áp dụng các nguyên tắc chúng ta đã học được từ bước 2 và 3, chúng ta sẽ hoàn thiện mã XPath của mình giống như hình bên dưới.

Bây giờ chúng ta đã có Locator XPath chính xác, chúng ta đã có thể truy cập vào ô mà chúng ta muốn và lấy văn bản bên trong của nó table cách sử dụng mã bên dưới. Nó giả định rằng bạn đã lưu mã HTML ở trên dưới dạng “newhtml.html” trong Ổ C của mình.

public static void main (String [] args) { 

String baseUrl = “http://demo.guru99.com/test/write-xpath-table.html”; 

Trình điều khiển WebDriver = 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 table lồng nhau

Các nguyên tắc tương tự đã thảo luận ở trên áp dụng cho các table lồng nhau. table lồng nhau là các table nằm trong một table khác . Một ví dụ đã được biểu diễn ở dưới.

Để truy cập ô có văn bản “4-5-6” table cách sử dụng “// parent / child” và các khái niệm vị ngữ trong phần trước, chúng ta có thể tìm ra mã XPath bên dưới.

Mã WebDriver bên dưới sẽ có thể truy xuất văn bản bên trong của ô mà chúng ta đang truy cập.

public static void main (String [] args) { 

String baseUrl = “http://demo.guru99.com/test/accessing-nested-table.html”; 

Trình điều khiển WebDriver = 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 table bên trong đã được truy cập thành công.

Sử dụng thuộc tính làm dự đoán

Nếu phần tử được viết sâu bên trong mã HTML để số lượng sử dụng cho vị ngữ rất khó xác định, 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ụ dưới đây, ô “New York đến Chicago” nằm sâu trong mã HTML của trang chủ Mercury Tours.

Trong trường hợp này, chúng ta có thể sử dụng thuộc tính duy nhất của table (width = “270”) làm vị ngữ. Các thuộc tính được sử dụng làm vị ngữ table cách đặt tiền tố chúng table ký hiệu @ . Trong ví dụ trên, ô “New York to Chicago” nằm ở <td> đầu tiên của <tr> thứ tư, và vì vậy XPath của chúng ta sẽ như hình dưới đây.

Hãy nhớ rằng khi chúng ta đặt mã XPath trong Java, chúng ta nên sử dụng dấu gạch chéo ngược của ký tự thoát “\” cho dấu ngoặc kép ở cả hai bên của “270” để đối số chuỗi của By.xpath () sẽ không bị kết thúc sớm .

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

public static void main (String [] args) { 

String baseUrl = “http://demo.guru99.com/test/newtours/”; 

Trình điều khiển WebDriver = new FirefoxDriver (); 

driver.get (baseUrl); 

String innerText = driver.findElement (Bởi 

.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 table trong Selenium

Nếu số lượng hoặc thuộc tính của một phần tử cực kỳ khó hoặc không thể lấy được, thì cách nhanh nhất để tạo mã XPath là sử dụng Kiểm tra phần tử.

Hãy xem xét ví dụ dưới đây từ trang chủ Mercury Tours.

Bước 1

Sử dụng Firebug để lấy mã XPath.

Bước 2

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

Bước 3

Bắt đầu phần còn lại của mã table dấu gạch chéo kép “//” và sao chép nó sang mã WebDriver của bạn.

Đoạn mã WebDriver bên dưới sẽ có thể lấy thành công văn bản bên trong của phần tử mà chúng ta đang truy cập.

public static void main (String [] args) { 

String baseUrl = “http://demo.guru99.com/test/newtours/”; 

Trình điều khiển WebDriver = new FirefoxDriver (); 

driver.get (baseUrl); 

String innerText = driver.findElement (Bởi 

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

}

Bản tóm tắt

  • By.xpath () thường được sử dụng để truy cập các phần tử của WebTable trong Selenium.
  • Nếu phần tử được viết sâu bên trong mã HTML sao cho số lượng sử dụng cho vị ngữ rất khó xác định, chúng ta có thể sử dụng thuộc tính duy nhất của phần tử đó thay thế cho phần tử table Selenium get.
  • Các thuộc tính được sử dụng làm vị ngữ table cách đặt tiền tố chúng table ký hiệu @.
  • Sử dụng phần tử Kiểm tra để truy cập WebTable trong Selenium
Back to top button