Selenium – Xác định UI bằng XPath

Như mình đã bàn luận ở bài trước, trong Selenium, chúng ta có nhiều cách khác nhau để định vị một đối tượng UI như ID, Name, Link Text, v.v… Tuy nhiên, qua quá trình làm thực tế với Selenium, mình nhận thấy XPath lại là phương thức được sử dụng nhiều nhất mặt dù thuộc tính này thiếu chính xác, thiếu đơn nhất và thiếu ổn định nhất trong tất cả các phương thức. Trong bài này, mình sẽ hướng dẫn các bạn các cú pháp của XPath để chúng ta có thể nâng cao tính chính xác, đơn nhất và ổn định khi xác định đối tượng UI trong Selenium.

Xác định tuyệt đối “/”

Một dấu slash “/” xác định một đường dẫn tuyệt đối đến một đối tượng UI.

Ví dụ:

/html/body/table” cho phép chúng ta lấy ra toàn bộ các bảng html trên trang web ngay sau thẻ body.

Xác định tương đối “//”

Hai dấu slash “//” cho chúng ta xác định một đối tượng UI một cách tương đối, không cần chính xác vị trí của thẻ html ở đâu trong toàn bộ mã nguồn của trang web.

Ví dụ:

//div” cho phép chúng ta lấy ra toàn bộ thẻ div trong mã nguồn.

//div//span” cho phép chúng ta lấy ra toàn bộ thẻ span mà trước đó có một thẻ div, không quan tâm đến mức độ của thẻ div và span trong mã nguồn.

Xác định bằng thuộc tính “@”

Ký hiệu “@” cho phép chúng ta lọc lại các đối tượng UI được trả về thông qua một thuộc tính có bên trong thẻ html.

Ví dụ:

//div[@class=’abc’]” cho phép chúng ta lấy ra tất cả thẻ div trong mã nguồn mà có thuộc tính class là ‘abc’.

Xác định bằng nội dung text()

Chức năng text() cho phép chúng ta lọc các đối tượng UI được trả về dựa trên nội dung text bên trong một thẻ html.

Ví dụ:

//div[text()=’abc’]” cho phép chúng ta lấy ra tất cả các thẻ div trong mã nguồn có text là ‘abc’.

Xác định bằng innertext “.”

Ký hiệu “.” cho phép chúng ta lọc các đối tượng UI được trả về dựa trên nội dung innertext bên trong một thẻ html.

Ví dụ:

//div[.=’abc’]” cho phép chúng ta lấy ra tất cả các thẻ div trong mã nguồn có innertext là ‘abc’.

Xác định bằng các chức năng xử lý chuỗi

Trong XPath, chúng ta có một số hàm chức năng để sử lý chuỗi như contains(), startwith() hay endwith() để lọc các đối tượng UI.

Ví dụ:

//div[contains(text(),’abc’)]” cho phép chúng ta lấy ra tất cả các thẻ div trong mã nguồn có text chứa đoạn ‘abc’.

//div[startwith(.,’abc’)]” cho phép chúng ta lấy ra tất cả các thẻ div trong mã nguồn có innertext bắt đầu bằng ‘abc’.

//div[endwith(text(),’abc’)]” cho phép chúng ta lấy ra tất cả các thẻ div trong mã nguồn có text kết thúc bằng ‘abc’.

Xác định đối tượng cha “/..”

Ký hiệu “/..” cho phép chúng ta xác định đối tượng UI ở trên một cấp.

Ví dụ:

//div/..” cho phép chúng ta lấy ra tất cả các thẻ html mà có thẻ div ngay bên dưới nó một cấp.

Xác định đối tượng từ một vị trí xác định preceding và following

Hai từ khoá precedingfollowing cho phép chúng ta lọc ra các đối tượng UI từ một đối tượng đã được xác định trước đó. Hai từ khoá này không phụ thuộc vào mức độ level của thẻ html trong mã nguồn.

Ví dụ:

//div[@id=’abc’]/following::a” cho phép chúng ta lấy ra tất cả các thẻ a trong mã nguồn bên dưới một thẻ div có id là ‘abc’.

//div[@id=’abc’]/preceding::a” cho phép chúng ta lấy ra tất cả các thẻ a trong mã nguồn bên trên một thẻ div có id là ‘abc’.

Trên đây là một số cách sử dụng XPath trong Selenium hỗ trợ chúng ta xác định đối tượng UI một cách chính xác hơn và ổn định hơn. Bên cạnh các cách trên, các bạn có thể tham khảo ở đây một số cách khác để có thể xác định đối tượng UI bằng XPath trong Selenium.