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é!
bài viết có tâm ghê
cảm ơn bạn nha ? ủng hộ tiếp những bài viết về sau nữa nhé ?
có phần 3 hông zạ
Bạn muốn biết thêm gì ? Tạo cho cái động lực viết tiếp đi bạn ơi?
Bài viết rất bổ ích, mặc dù mình không phải là tester nhưng xem rất dễ hiểu, cảm ơn bạn đã chia sẻ.
Cảm ơn lời khen có cánh từ bạn ? Còn đang sợ khó hiểu quá đây này ?
Hay quá Hoa ơi! Mình học dc rất nhiều điều từ bài viết bổ ích của bạn! Cảm ơn nhé! Keep moving!
Em cảm ơn nha ? Em học từ thầy ra đó chứ ?
Thanks, Hoa!
[…] phần này bạn chỉ cần nhớ cấu trúc cơ bản đã nha, ở những Phần 2 mình sẽ nói chi tiết hơn về Xpath tương đối cũng như cách kiểm tra làm sao […]