Giới thiệu Xpath (Phần 2)

Chào mọi người, lại là mình đây. Ở bài viết “Xpath (Phần 1)” mình có hẹn sẽ nói chi tiết hơn về Xpath tương đối nên giờ mình tiếp tục cho phần 2 đây này!

Vẫn với format cũ Xpath=//tagname[@attribute=’value’] thì chưa đủ, vì đôi khi bạn cần tối ưu hơn, và có khi bạn sẽ gặp phải trường hợp các phần tử có thẻ và thuộc tính giống nhau, lúc đó bạn sẽ cần đến những phần mình chia sẻ tiếp theo bên dưới đây nè. Bắt đầu vào luôn nhé!

1. contains

contains cho phép chúng ta chỉ cần tìm với một phần nội dung giá trị của thuộc tính. Vẫn tiếp tục sử dụng ví dụ ở bài viết phần 1 cho phần hiển thị “Thanh Hoa Trần“, nếu dùng cấu trúc contains ta sẽ viết như sau:

//h2[contains(@class, 'about-me')]

Bạn thấy đó, ở ví dụ trên mình không cần ghi chính xác hoàn toàn “about-me-heading” nhưng vẫn có thể tìm ra thẻ xpath cho phần hiển thị “Thanh Hoa Trần“.

Thêm 1 ví dụ với nút “Submit” nữa nhé:

Sử dụng cấu trúc với contains, ta có thể tìm chỉ với “sub” thay vì đầy đủ chính xác là “submit”:

//input[contains(@id, 'sub')]

Ngoài ra, ta cũng có thể sử dụng dấu * thay cho tag name khi không biết chính xác đó là thẻ gì như sau:

//*[contains(@class, 'about-me')]

//*[contains(@id, 'sub')

2. text()

Còn cấu trúc với text() thì sao? Là ta sẽ tìm với đoạn text của phần tử đó. Với ví dụ trên nếu viết theo cấu trúc text() sẽ như sau:

//h2[text()='Thanh Hoa Trần']

Mình vừa giới thiệu qua contains và text(), ngoài ra còn có thể sử dụng toán tử AND, OR để kết hợp điều kiện tìm kiếm:

//*[contains(@class, 'about') and text()='Thanh Hoa Trần']

AND sẽ sử dụng khi thoả cả điều kiện của 2 vế (Cả 2 phải đều đúng)
OR thì sử dụng khi thoả điều kiện của 1 trong 2 vế (Hoặc A đúng, hoặc B đúng, hoặc cả 2 đều đúng)

Hướng dẫn như vậy nhưng chắc bạn cũng sẽ lo lắng không biết liệu bạn đã bắt thẻ xpath đúng chính xác phần tử muốn lấy đó chưa? Làm thế nào để nhận biết được? Như bạn đã thấy ở các hình ảnh kèm theo ví dụ trên, mình có sử dụng Add-on có tên là Xpath Helper. Bạn có thể download về trình duyệt theo link bên dưới:
https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl

Sau khi cài thì bạn sẽ thấy Xpath Helper được thêm vào góc trên bên phải của trình duyệt. Click vào thì sẽ hiển thị pop-up màu đen như trong ảnh dưới.

Phần mình khoanh tròn màu xanh bên trái sẽ là nơi bạn viết nội dung bạn tìm thẻ xpath. Khi đó phần màu xanh bên phải sẽ kiểm tra real-time cho kết quả dựa vào nội dung bạn nhập vào. Và ở phần kết quả sẽ hiển thị số kết quả tìm được là bao nhiêu (hình minh hoạ phía dưới cho thấy có 4 kết quả tìm được dựa vào thẻ xpath mình đã nhập: //*[contains(@class,’about’)] )

Đồng thời ở phần mình khoanh đỏ ở ảnh trước đó cũng sẽ có thêm dòng chữ “xh-highlight”, đồng thời phần tử đó cũng sẽ được highlight lên.

Một cách khác không sử dụng Xpath Helper, bạn có thể Ctrl+F sẽ hiển thị ô tìm kiếm ở góc dưới và gõ thẻ xpath vào cũng sẽ trả về số kết quả tìm được và highlight dòng code của phần tử đó lên.

Riêng mình thì mình thích sử dụng Xpath Helper hơn vì thấy nó khá tiện. Còn bạn thì sao? Hãy chọn cho mình cách phù hợp để dùng nhé!

Vậy là qua bài viết này mình đã chia sẻ một số cách tìm Xpath tương đối và tool sử dụng. Thật sự thì việc truyền đạt qua văn bản không diễn tả hết ý được, nhất là với đứa mới tập tành viết blog như mình. Nên có gì góp ý thì để lại bình luận mình giải thích rõ hơn nhé. Hi vọng các bạn đọc qua bài viết này sẽ hiểu hơn về Xpath. Cảm ơn bạn đã theo dõi bài viết. Cùng đón đọc những bài chia sẻ khác của mình nữa nhé!