Automation

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

Xpath là gì? Chắc sẽ khá lạ lẫm với mọi người và mình chắc chắn rằng bạn sẽ ít được nghe về nó. Nhưng với Automation thì bạn sẽ phải cần đến nó đấy. Và ở đây, mình sẽ không đi vào nguồn gốc hay khái niệm gì nhiều vì đã có những trang khác nói về nó rồi và nếu bạn muốn rõ biết thì có thể tìm kiếm theo từ khoá “Xpath” là ra thôi!

Mình hay gọi cái này là thẻ Xpath. Mà gọi sao cũng được, miễn là bạn nhớ và hiểu nó là ok thôi. Xpath được coi là đường dẫn đến vị trí của phần tử nào đó trên website dựa vào các thẻ của HTML (ai chưa biết về HTML thì tự tìm hiểu đi đã nha). Cơ bản là sẽ dựa vào các thẻ như div, input, span, a, ul, … và các thuộc tính như id, name, class, href, … và từ đó sẽ theo format bên dưới ghép vào đó thôi.

Xpath=//tagname[@attribute='value']

Những thành phần bạn cần thay đổi ở đây là gì? 

Đầu tiên sẽ là tagname. Nó sẽ được thay thế bới các thẻ như mình đã nêu ở trên (div, input, …). Tiếp đến là attribute sẽ được thay bằng các thuộc tính bên trong của chính thẻ bạn đã chọn (id, name, …) và value là giá trị tương ứng của chính thuộc tính đó.

Dài dòng quá nhỉ! Để dễ hình dung ra được thì bạn theo dõi ví dụ ngay ở blog của mình bên dưới này nè:

Hãy nhìn phần mình khoanh đỏ ở trên, hiện tại mình đang xem phần HTML cho phần hiển thị “Thanh Hoa Trần” trên giao diện web. Và mình sẽ viết xpath dựa vào format đã giới thiệu bên trên như sau:

//h2[@class='about-me-heading']

Đến đây bạn đã biết cách cơ bản để lấy thẻ xpath rồi chưa ta? Thêm 1 ví dụ khác nữa nhé:

Xpath cho ví dụ trên như sau:

//input[@id=’submit']

2 ví dụ trên là cách mình lấy thẻ Xpath tương đối. Chúng ta cũng có thể sử dụng thẻ Xpath tuyệt đối nữa đấy.

Xpath tuyệt đối sẽ đi từ thẻ gốc đến thẻ của phần tử đó. Và cách đơn giản nhất thì bạn chỉ cần click chuột phải vào dòng thẻ HTML của phần bạn cần và chọn Copy>Copy full Xpath như ảnh dưới.

Và đường dẫn lúc này sẽ là:

/html/body/div[1]/div[1]/div[1]/div/article/div[8]/div/form/p[6]/input[1]

Ở 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 xpath đó có thực sự đúng hay không. Nhớ theo dõi nha!
Cảm ơn mọi người đã quan tâm bài viết. Hãy cùng theo dõi những bài viết khác nữa nhé!

5 1 vote
Article Rating
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
chau-san
chau-san
2 years ago

Thanks, Hoa!

Cửu
Cửu
2 months ago

Em vẫn đang theo dõi chị nha <3