Trong bài tutorial Soát lỗi chính tả sử dụng Ginger và Selenium, chúng ta đã cùng tìm hiểu về Selenium và sử dụng Selenium để trích xuất các thông tin cần thiết. Selenium tương tác với các phần tử web (web elements) bằng hai phương pháp chính là CSS Selector và XPath. Mỗi một phương pháp đều có ưu nhược điểm riêng và việc lựa chọn sử dụng phương pháp nào cũng là một trong những chủ đề tranh luận của cộng đồng Selenium. Trong bài này chúng ta sẽ tìm hiểu sự khác nhau giữa CSS Selector và XPath đồng thời viết chương trình thực hành sử dụng hai phương pháp trên.

CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để mô tả style của một HTML document và CSS Selector được sử dụng để xác định các phần tử trong document đó (các bạn có thể tham khảo thêm cách sử dụng CSS Selector tại bài tutorial Soát lỗi chính tả sử dụng Ginger và Selenium hoặc Viết chương trình sử dụng Jsoup).

Xpath là tên viết tắt của XML Path Language với việc sử dụng các syntax tương tự như các ‘path’ (đường dẫn) để xác định các nodes trong một XML document (các bạn có thể tham khảo thêm về XPath cũng như các syntax sử dụng trong XPath tại đây).

Bảng sau đây liệt kê một số điểm khác nhau cơ bản giữa CSS Selector và XPath:

CSS Selector XPath
Có syntax đơn giản hơn và nhanh hơn so với XPath (xem thêm tại đây). Các query thường phức tạp hơn so với CS Selector khi cùng thực hiện một nhiệm vụ và có tốc độ chậm hơn
Các browser khác nhau đều có CSS Selector giống nhau Mỗi một browser có Xpath engine khác nhau nên chúng ta thường phải sử dụng các path khác nhau cho từng browser
Trong một số trường hợp, không thể tìm được phần tử web bằng CSS Selector (ví dụ như các phần tử không có id, name, class,..) Linh động hơn so với CSS Selector và có thể tìm được nhiều phần tử hơn. Ví dụ như tìm phần tử với nội dung text:

//div/p[contains(text(), ‘a few words of the paragraph’)]

Chỉ tìm được phần tử web theo hướng forward Tìm phần tử theo cả hai hướng backward và forward do đó có thể tìm được cả parent node và child node

Như vậy, cả CSS Selector và XPath đều có những ưu nhược điểm của riêng mình. Do đó cách tốt nhất là chúng ta nên sử dụng kết hợp cả hai phương pháp trên. Trong phần lớn trường hợp chúng ta nên sử dụng CSS Selector vì tính đơn giản và tốc độ nhanh của nó. Tuy nhiên, trong một số trường hợp chúng ta buộc phải sử dụng XPath để có thể xác định được phần tử Web mà CSS Selector không thể xác định được.

Đoạn code sau mô tả việc sử dụng XPath với các bước tương tự như trong bài Soát lỗi chính tả sử dụng Ginger và Selenium(sử dụng CSS Selector). Ở đây các bạn có thể tìm Xpath của một web element bằng cách nhấn chuột phải vào phần tử đó, chọn Inspect. Cửa sổ Elements hiện ra, các bạn tiếp tục nhấn chuột phải, chọn Copy => Copy Xpath. Ngoài ra các bạn cũng có thể tìm Xpath bằng sử dụng các add on hoặc extension như Xpath Helper, FirePath,…

Tháng Một 22, 2019
ITechSeeker