🧭 XPath là gì?
Đường dẫn lần theo cấu trúc trang để tìm phần tử.
1
Hiểu nó là gì
XPath là cú pháp duyệt cây HTML theo quan hệ cha con, thường dùng khi phần tử không có id hay class ổn định để bám vào.
Nói theo đời thường:
Như chỉ đường bằng mô tả: đi hết hẻm, rẽ trái, nhà thứ ba. Tìm được thật, nhưng hàng xóm xây thêm cái cổng là lạc ngay.
Như chỉ đường bằng mô tả: đi hết hẻm, rẽ trái, nhà thứ ba. Tìm được thật, nhưng hàng xóm xây thêm cái cổng là lạc ngay.
⚠ Chỗ ẩn dụ này hỏng
Chỉ đường bằng mô tả thì chỉ cần hàng xóm xây thêm cái cổng là lạc — và với XPath thì “cái cổng” là một thẻ div dev thêm vào để chỉnh khoảng cách.
XPath dạng đường dẫn tuyệt đối (/html/body/div[3]/div[2]/...) gãy gần như chắc chắn. Nếu buộc phải dùng XPath, hãy bám vào chữ hoặc thuộc tính, đừng bám vào vị trí.
2
Code trông thế nào
// Rất dễ gãy /html/body/div[3]/div[2]/button[1] // Đỡ hơn nhiều — bám vào chữ người dùng nhìn thấy //button[text()='Đăng nhập'] // Bám vào thuộc tính riêng //*[@data-testid='nut-dang-nhap']
Quy tắc: đếm được thì đừng đếm, tả được thì hãy tả.
3
Khi nào bạn dùng nó
✓ Dùng khi
- Phần tử không có id, class ổn định hay testid
- Cần tìm theo nội dung chữ bên trong
- Cần đi ngược lên phần tử cha (CSS không làm được)
✗ Đừng dùng khi
- Đã có testid hoặc vai trò rõ ràng để bám
- Chép XPath từ menu chuột phải của trình duyệt (gần như luôn là dạng dễ gãy)
Chưa cần biết: trục XPath (ancestor, following-sibling), hàm XPath nâng cao.
Để dành tới Mốc 3 — Tự sửa được khi nó hỏng: Test đỏ trên CI mà xanh ở máy bạn, và bạn biết bắt đầu tìm từ đâu.
Dấu hiệu bạn đã cần học nó: Khi bạn cần đi từ ô chữ lên tìm cái dòng chứa nó rồi mới bấm nút Xoá trong dòng đó.
4
Đi đâu tiếp
- LocatorCách bám phần tử nên thử trước khi tới XPath.
- Flaky TestXPath tuyệt đối là nguồn gãy test kinh điển.
- Test ScriptNơi XPath được dùng.
🧪 Thử 2 phút, không cần cài gì
F12 → Console, thử XPath ngay:$x("//button")
Ra danh sách mọi nút trên trang. Đổi thành $x("//button[text()='Tìm']") để lọc theo chữ.