Khi làm automation test, việc xác định đúng vị trí chính xác một element trên giao diện là bắt buộc trước khi tạo và chạy Kịch bản test tự động. Nhận thấy việc xác định element có 1 vài vấn đề khó khăn, nên tôi chia sẻ kinh nghiệm xác định vị trí element trên giao diện gồm: giao diện Website và giao diện phần mềm trên Mobile. Element là gì?Trên giao diện, element có thể là: Textbox, nút Button, Check box, Radio button …Mỗi element này có các thuộc tính: ID, Name, CSS … do Lập trình viên đặt tên. Tùy từng Website hoặc phần mềm trên Mobile có giá trị các thuộc tính sẽ khác nhau. Điều quan trọng, vị trí các element này phải được xác định duy nhất trên giao diện. Nhưng không phải lúc nào, lập trình viên đặt ID, Name, CSS … rõ ràng. Ví dụ: ID có nhưng mã ID tự gien, element không có thuộc tính Name, element có thuộc tính CSS nhưng CSS này được dùng cho cả nhiều element khác nữa trên cùng giao diện. Do đó, những trường hợp element này sẽ không thể xác định được vị trí element. Chính vậy, XPath được ra đời để giúp chúng ta xác định được đúng vị trí element. Đồng thời, XPath giải quyết được các vấn đề này mà chúng ta đang gặp phải trong quá trình xác định ví trí một element trên giao diện. Vậy XPath là gì, dùng nó thế nào, các vấn đề khó khăn dùng nó làm sao … Sau đây, tôi sẽ chia sẻ các bạn kinh nghiệm dùng XPath của mình. Bài chia sẻ này, tôi tập trung xác định XPath của một element trên giao diện Website. (Xác định XPath của Element trên giao diện phần mềm Mobile cũng tương tự xác định XPath của element trên giao diện Website) Nội dung đi vào các vấn đề chính bao gồm:
Xpath là gì?Xpath là một trong 3 thành phần trong ngôn ngữ XSL – Extensible Style Language. Đó là ngôn ngữ hỗ trợ tìm kiếm thông tin trong tài liệu XML => sử dụng biểu thức XPath để định hướng tìm kiếm dữ liệu trên XML thay vì phải thực hiện tìm kiếm đệ quy để duyệt cây XML. Xpath được sử dụng để tìm vị trí bất kỳ phần tử trên Web sử dụng cấu trúc HTML - DOM. XPath chứa đường dẫn của phần tử nằm trên trang Web. 
Mô hình HTML DOM (Document Object Model)Xpath định nghĩa 7 loại nodes theo cấu trúc của XML theo mô hình dưới đây:Cú pháp tiêu chuẩn để tạo Xpath:Cú pháp tiêu chuẩn để tạo Xpath sử dụng ký hiệu xác định NodeCác thuộc tính trong Cấu trúc Xpath của 1 phần tử cần tìmVí dụ: tìm ví trí phần tử có thẻ Img gồm Thuộc tính class và Giá trị 'site-logo' Chuỗi truy vấn XPath: .//img[@class='site-logo'] Các kiểu XPath (bao gồm: Kiểu xác định Phần tử với đường dẫn tuyệt đối: Absolute XPath và Kiểu xác định phần tử với đường dẫn tương đối: Relative XPath)
Chuỗi XPath: /html[1]/body[1]/div[1]/div[1]/article[1]/header[1]/div[1]/a[1]/img[1]
Chuỗi XPath: .//a[@title='CodeLearn']/img[1] Xác định XPath từ cơ bản đến nâng cao1. xPath Cơ bản2. xPath dạng Nâng cao
Kinh nghiệm lấy XPath
Chuỗi đường dẫn XPath: .//img[@class='level-avatar']
+ Như hình dưới đây: đang có thông báo 30 element matching nghĩa là: đang có 30 thẻ img đang có trên giao diện CodeLearn Giải pháp: + Viết lại đường dẫn XPath như sau: .//a[@title='trungnt.86']/img[1] + Thẻ img này phải là duy nhất trên giao diện và tool ChroPath thông báo có 1 element matching là được
+ Đường dẫn XPath của phần tử Select2 có dạng: .//select[@id='__BVID__516'] Giải pháp: + Viết lại đường dẫn XPath của phần tử Select2 không dựa vào ID tự gien (thẻ này phải là duy nhất trên giao diện => tool ChroPath thông báo 1 element matching là được) Chuỗi truy vấn XPath: .//aside[@class='bv-carbon-ad']//following-sibling::section[1]/div[1]/div[1]/select[1] Tạm kếtBài viết là chia sẻ kinh nghiệm của bản thân tôi khi sử dụng Xpath trong autotest. Hi vọng sẽ giúp ích cho công việc của các bạn. Đừng ngần ngại comment phía dưới để cùng trao đổi nhé các bạn. |
