Xác Định Vị Trí Element Với Automation Test

Xác Định Vị Trí Element Với Automation Test

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:

  • Định nghĩa XPath
  • Xác định XPath từ cơ bản đến nâng cao
  • Kinh nghiệm lấy XPath

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.

  • XSL Transformation (XSLT): Là một ngôn ngữ dạng XML dùng để chuyển đổi XML thành định dạng khác như HTML
  • XML Path Language (X-Path): Là một ngôn ngữ dùng để truy xuất các thành phần trong XML
  • XSL Formatting Object (XSL-FO): Là ngôn ngữ dùng để định dạng XML

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 Node 

Các thuộc tính trong Cấu trúc Xpath của 1 phần tử cần tìm

Ví 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)

  • Kiểu xác định Phần tử với đường dẫn tuyệt đối Absolute XPath:

Chuỗi XPath: /html[1]/body[1]/div[1]/div[1]/article[1]/header[1]/div[1]/a[1]/img[1]

  • Kiểu xác định phần tử với đường dẫn tương đối Relative XPath

Chuỗi XPath: .//a[@title='CodeLearn']/img[1]

Xác định XPath từ cơ bản đến nâng cao

1. xPath Cơ bản

2. xPath dạng Nâng cao

  • Sử dụng contains

  • Sử dụng OR

  • Sử dụng AND

  • Sử dụng function Start-with

  • Sử dụng function: text()

  • Sử dụng thông qua phương thức axes: following

  • Sử dụng thông qua phương thức axes: Ancestor

  • Sử dụng thông qua phương thức axes: Child

  • Sử dụng thông qua phương thức axes: Preceding

  • Sử dụng thông qua phương thức axes: Following-sibling

  • Sử dụng thông qua phương thức axes: Parent

  • Sử dụng thông qua phương thức axes: Self

  • Sử dụng thông qua phương thức axes: Descendant

Kinh nghiệm lấy XPath

  • Xác định phần tử là duy nhất. 

Chuỗi đường dẫn XPath: .//img[@class='level-avatar']

a) Nếu kết quả trả về ít nhất 2 Node thì xác định Node Cha của Node cần tìm là duy nhất

+ 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

b) Nếu Thẻ có thuộc tính ID tự tăng hoặc ID tự gien thì xác định qua thứ tự của Thẻ Element

+ Đườ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ết

Bà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.

Nguồn tham khảo:

  • Blog của tác giả kieutrongthanh: http://kieutrongkhanh.net/index.php/xml-a-java/89-gii-thiu-v-xpath
  • Trang Web Guru99: Xpath in Selenium => https://www.guru99.com/xpath-selenium.html
  • Trang Web ToolsQA => http://toolsqa.com/selenium-webdriver/xpath-helper/
  • Trang Web Code5s => http://code5s.com/xml/xsl-v-xslt.html