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 đã ít nhiều được nghe về nó. Nhưng với Automation thì đây là 1 trong những phần quan trọng nhất. Vì vậy, các bạn nên hiểu rõ phần này càng nhiều càng tốt. Mình bảo đảm rằng 100% khi bạn đi phỏng vấn, chắc chắn bạn sẽ được hỏi về nó. hehe. Hiện nay có rất nhiều plugin hỗ trợ các bạn việc tìm xpath trên Chrome, Firefox, ví dụ như Firepath, ChroPath. Nhưng mình khuyên các bạn nên xài Developer Tool (F12), cái này browser bản thân nó đã support, không cần phải cài gì thêm. Lý do là không phải công ty IT nào cũng cho phép truy cập internet. Một số cty làm về lĩnh vực ngân hàng, hoặc một số cty Nhật, họ chỉ cho bạn xài mạng nội bộ, nếu bạn muốn cài thêm thì phải mail miết các kiểu, xin quyền approve rồi IT mới cài đặt. Mình nhớ có lần đi phỏng vấn, mình được hỏi là bạn bắt xpath bằng gì? Tiếp theo, họ đưa cho mình cái laptop và kêu mình bắt xpath cho họ xem. Và đương nhiên là cái laptop đó ko có plugin sẵn cho bạn xài đâu =))
Thôi quay lại với topic này, XPath được định nghĩa là đường dẫn XML. Nó là một cú pháp hoặc ngôn ngữ để tìm kiếm bất kỳ phần tử nào trên trang web bằng cách sử dụng biểu thức XML path. XPath được sử dụng để tìm vị trí của bất kỳ phần tử nào trên trang web bằng cách sử dụng cấu trúc DOM HTML. Định dạng cơ bản của XPath được giải thích bên dưới.
Cú pháp XPath
XPath chứa đường dẫn của phần tử nằm ở trang web. Cú pháp:
Xpath = //tagname[@attribute='value']- // : Chọn node hiện tại.
- Tagname: Tên thẻ HTML của node cụ thể.
- @: Select attribute.
- Attribute: Tên thuộc tính của node.
- Value: Giá trị của thuộc tính.
1 số thẻ HTML (Tagname)
| Web Element | HTML Tagname |
| Textbox | input |
| TextArea | textarea |
| Dropdown list (default) | select > option |
| Dropdown list (custom) | ul > li div > span |
| Button | button |
| Checkbox | input |
| Radio button | input |
| Image | img |
| Link | a |
| Table | table div |
| Header (table) | th |
| Column (table) | td |
| Row (table) | tr |
| Text | div span label |
| Header | h1 – h5 |
| Icon | i |
2. Các loại Xpath
Có 2 loại Xpath: Xpath tuyệt đối và Xpath tương đối.
2.1 XPath tuyệt đối
Đây là cách trực tiếp để tìm phần tử, nhưng nhược điểm của XPath tuyệt đối là nếu có bất kỳ thay đổi nào được thực hiện trong đường dẫn của phần tử thì XPath sẽ bị lỗi.
Đặc điểm chính của XPath là nó bắt đầu bằng dấu gạch chéo đơn (/), có nghĩa là bạn có thể chọn phần tử từ nút gốc. Khi chúng ta mở 1 trang web, bật F12 – tab Elements, nút gốc sẽ bắt đầu bằng thẻ HTML
Dưới đây là ví dụ về biểu thức xpath tuyệt đối của phần tử được hiển thị trong màn hình dưới đây.
/html/body/div[3]/div[1]/div[1]/ul[2]/li[4]/a
Nói 1 cách đơn giản hơn, chúng ta hãy tưởng tượng rằng nhà chúng ta ở cuối con hẻm cụt. Để đi về nhà được, chúng ta bắt buộc phải đi qua ngôi nhà từ đầu hẻm, rồi tới nhà 2, 3 ,4 … rồi cuối cùng mới tới nhà mình. Trong Xpath, việc đi qua từng cấp như thế, được gọi là xpath tuyệt đối. Và vai trò của ngôi nhà đầu hẻm đó mình có thể gọi nó là nút gốc. Và nút gốc trong xpath chính là thẻ HTLM
2.2 XPath tương đối
Đối với Xpath tương đối, đường dẫn bắt đầu từ giữa cấu trúc DOM HTML. Nó bắt đầu bằng dấu //, có nghĩa là nó có thể tìm kiếm phần tử ở bất kỳ đâu trên trang web.
Bạn có thể bắt đầu từ giữa cấu trúc DOM HTML và không cần phải viết xpath dài lê thê.
Dưới đây là ví dụ về biểu thức XPath tương đối của cùng một phần tử được hiển thị trong màn hình dưới đây. Đây là định dạng phổ biến được sử dụng để tìm phần tử thông qua XPath tương đối.
//a[@href='/xpath-tester.html']
3. Một số biểu thức xpath cơ bản
Mình lấy link này làm ví dụ nhé: http://live.techpanda.org/index.php/customer/account/create/
Ví dụ 1:
//input[@type='search'] or
//input[@name='q']
Ví dụ 2:
//input[@id='firstname'] or
//input[@title='First Name']
Ví dụ 3:
//button[@title='Register']
Ví dụ 4:
//p[@class='required']
Ví dụ 5:
//a[@href='http://live.demoguru99.com/index.php/contacts/']
Ví dụ 6:
//img[@src='http://live.demoguru99.com/skin/frontend/rwd/default/images/logo.gif']
Ví dụ 7:
//label[@for='firstname']
Kết: Đọc tới đây thì các bạn đã biết cấu trúc cơ bản và sơ sơ cách xài về xpath. Ở phần tiếp theo sẽ đưa ra nhiều ví dụ hơn. Mong các bạn sẽ ủng hộ mình nhé 🙂
Bài viết được mình thao khảo từ: https://viettuts.vn/selenium/xpath-trong-selenium-webdriver