Trong automation test giao diện, trước khi bấm nút, bạn phải xác định đúng phần tử để bấm. XPath là cú pháp truy vấn các node trong HTML/XML.

Ở bài này, chúng ta sẽ dùng một trang rất nhỏ để hiểu từng phần của biểu thức XPath.

Các thẻ HTML phổ biến

Nhìn HTML trước khi viết XPath

<form id="login-form">
  <label for="email">Email</label>
  <input id="email" name="email" type="email">
  <button type="submit">Đăng nhập</button>
</form>
<ul class="products">
  <li><span>Bút</span><button>Mua</button></li>
  <li><span>Vở</span><button>Mua</button></li>
</ul>

form, input, button là thẻ (node).

id, name và type là thuộc tính.

Dấu @ trong XPath dùng để chọn thuộc tính.

Tìm theo thẻ và thuộc tính

Tìm input có id là 'email':
//input[@id="email"]

Tìm input có name là 'email':
//input[@name="email"]

Tìm button có type là 'submit':
//button[@type="submit"]

Từ form có id là 'login-form', lấy thằng button ngay dưới nó (con của nó):
//form[@id="login-form"]/button

Nếu trang có nhiều button, //button sẽ khớp nhiều phần tử. Hãy thêm điều kiện đủ rõ và ưu tiên thuộc tính ổn định như id hoặc data-testid nếu project cung cấp.

Tìm theo chữ hiển thị

Dùng text() hoặc contains() tuỳ theo nhu cầu của bạn:

Tìm button có text là 'Đăng nhập':
//button[text()="Đăng nhập"]

Tìm button có text chứa chữ 'Vở':
//span[contains(text(), "Vở")]

Lấy thẻ con làm mốc, đi lên thẻ cha

//span[text()="Vở"]/parent::li

//span[text()="Vở"]/..

Giải thích: 2 cách bên trên là tương đương với nhau, đều là chọc vào thẻ span có text là “Vở”, sau đó đi lên thằng cha

Lấy các thẻ đồng cấp

• //span[text()="Bút"]/following-sibling::span

Xpath này lấy span Bút làm gốc, sau đó trỏ vào thẻ đồng cấp ngay sau nó, chính là thẻ span Vở

Index đếm từ 1

• //ul[@class="products"]/li[1]
• //ul[@class="products"]/li[2]

Cả hai biểu thức trỏ tới item thứ hai trong HTML mẫu. XPath đếm từ 1.