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

Bảng Web là gì Selenium?

A Bảng Web in Selenium là một WebElement được sử dụng để biểu diễn dữ liệu hoặc thông tin dưới dạng bảng. Dữ liệu hoặc thông tin được hiển thị có thể ở dạng tĩnh hoặc động. Bảng Web và các thành phần của nó có thể được truy cập bằng cách sử dụng các hàm và bộ định vị WebElement trong Selenium. Một ví dụ điển hình về bảng web sẽ là thông số kỹ thuật của sản phẩm được hiển thị trên nền tảng Thương mại điện tử.

Đọc bảng web HTML

Đôi khi chúng ta cần truy cập các phần tử (thường là văn bản) trong bảng HTML. Tuy nhiên, rất hiếm khi người thiết kế web cung cấp thuộc tính id hoặc name cho một ô nhất định trong bảng. Do đó, chúng tôi 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 bằng phương thức “By.xpath()”.

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.

Cách viết XPath cho Table 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ư”.

Cách viết XPath cho Table trong Selenium

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

Trình định vị XPath trong WebDriver luôn bắt đầu bằng dấu gạch chéo kép “//” và sau đó 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ử ngay dưới là vì vậy chúng ta có thể nói rằng là “đứa con” của . Và ngoài ra, 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ủa chúng, được phân tách bằng một dấu gạch chéo lên “/” giống như mã được hiển thị bên dưới.

Selenium Ví dụ về bảng Web

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

Các phần tử chứa hai thẻ. Bây giờ chúng ta có thể nói rằng hai điều này thẻ là "con" của . Theo đó, chúng ta có thể nói rằng là cha mẹ của cả hai các phần tử.

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

Để có được chúng ta muốn truy cập (ô có dòng chữ “ô thứ tư”), trước tiên chúng ta phải truy cập vào 2 và không phải là người đầu tiên. Nếu chúng ta chỉ viết “//table/tbody/tr”, thì chúng ta sẽ truy cập vào phần đầu tiên nhãn.

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

Các vị ngữ là các số hoặc thuộc tính HTML được đặt trong cặp dấu ngoặc vuông “[ ]” để phân biệt phần tử con với các phần tử cùng cấp. Kể từ khi 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ữ.

Selenium Ví dụ về bảng Web

Nếu chúng ta không sử dụng bất kỳ vị từ nào, XPath sẽ truy cập phần tử anh em đầu tiên. Vì vậy, chúng ta có thể truy cập đầu tiên bằng cách sử dụng một trong các mã XPath này.

Selenium Bảng Web sử dụng Xpath

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

Phần tử tiếp theo chúng ta cần truy cập là phần tử thứ hai . Áp dụng các nguyên tắc đã 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ư mã được hiển thị bên dưới.

Bây giờ chúng ta đã có bộ định vị 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ó bằ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.

Bảng Web trong Selenium sử dụng Xpath

public static void main(String[] args) {
	String baseUrl = "http://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();
	}
}

Bảng Web trong Selenium sử dụng Xpath

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

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

Cách truy cập các bảng lồng nhau trong Selenium

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

Cách truy cập các bảng lồng nhau trong Selenium

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

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

public static void main(String[] args) {
	String baseUrl = "http://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.

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

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

Nếu phần tử được viết sâu bên trong mã HTML sao cho rất khó xác định số dùng cho vị từ thì 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 to Chicago” nằm sâu trong Mercury Mã HTML của trang chủ chuyến tham quan.

Selenium Ví dụ về bảng web sử dụng Thuộc tính làm Vị ngữ

Trong trường hợp này, 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úng. Trong ví dụ trên, ô “New York tới Chicago” nằm ở ô đầu tiên của thứ tư , và do đó XPath của chúng ta sẽ như hiển thị bên dưới.

Hãy nhớ rằng khi chúng ta đặt mã XPath vào Java, chúng ta nên sử dụng ký tự thoát là dấu gạch chéo ngược “\” 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ị chấm dứt sớm.