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

Cập nhật ngày: 24/05/2022 - Đã có 1737 lượt xem bài viết này!
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 địn

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

Danh mục: 

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

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

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

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

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

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

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

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

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.

1. 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.

2. 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.

3. 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’.

4. 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’.

5. 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’.

6. 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’.

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

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

Hai từ khoá preceding và following 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.


BTV.Trần Thị Thu Huyền
Phòng Truyền Thông IMicroSoft Việt Nam
Hotline: 0916 878 224
Email: huyenttt@imicrosoft.edu.vn

 

Bạn đang muốn tìm kiếm 1 công việc với mức thu nhập cao.
✅ Hoặc là bạn đang muốn chuyển đổi công việc mà chưa biết theo học ngành nghề gì cho tốt.
✅ Giới thiệu với bạn Chương trình đào tạo nhân sự dài hạn trong 12 tháng với những điều đặc biệt mà chỉ có tại IMIC và đây cũng chính là sự lựa chọn phù hợp nhất dành cho bạn:
👉 Thứ nhất: Học viên được đào tạo bài bản kỹ năng, kiến thức chuyên môn lý thuyết, thực hành, thực chiến nhiều dự án và chia sẻ những kinh nghiệm thực tế từ Chuyên gia có nhiều năm kinh nghiệm dự án cũng như tâm huyết truyền nghề.
👉 Thứ hai: Được ký hợp đồng cam kết chất lượng đào tạo cũng như mức lương sau tốt nghiệp và đi làm tại các đối tác tuyển dụng của IMIC. Trả lại học phí nếu không đúng những gì đã ký kết.
👉 Thứ ba: Cam kết hỗ trợ giới thiệu công việc sang đối tác tuyển dụng trong vòng 10 năm liên tục.
👉 Thứ tư: Được hỗ trợ tài chính với mức lãi suất 0 đồng qua ngân hàng VIB Bank.
👉  Có 4 Chương trình đào tạo nhân sự dài hạn dành cho bạn lựa chọn theo học. Gồm có:
1)  Data Scientist full-stack
2)  Embedded System & IoT development full-stack
3)  Game development full-stack
4)  Web development full-stack 
✅ Cảm ơn bạn đã dành thời gian lắng nghe những chia sẻ của mình. Và tuyệt vời hơn nữa nếu IMIC được góp phần vào sự thành công của bạn. 
✅ Hãy liên hệ ngay với Phòng tư vấn tuyển sinh để được hỗ trợ về thủ tục nhập học.
✅ Chúc bạn luôn có nhiều sức khỏe và thành công!
 

Xem khóa đào tạo nhân sự theo danh mục!

Xem các khóa đào tạo nhân sự