🗺️ Locator là gì?
Cách chỉ cho máy biết phải bấm vào phần tử nào.
1
Hiểu nó là gì
Locator là chuỗi mô tả giúp tìm đúng phần tử trên trang, dựa vào id, class, nội dung chữ hay thuộc tính riêng như data-testid.
Nói theo đời thường:
Như địa chỉ nhà: ghi càng rõ càng dễ tìm, ghi mập mờ thì shipper giao nhầm nhà.
Như địa chỉ nhà: ghi càng rõ càng dễ tìm, ghi mập mờ thì shipper giao nhầm nhà.
⚠ Chỗ ẩn dụ này hỏng
Địa chỉ nhà thì cố định. Locator thì đổi mỗi lần dev sửa giao diện — và họ sửa liên tục mà không báo bạn.
Đây là nguyên nhân số một khiến bộ test tự động chết dần: không phải vì logic sai, mà vì cái nút đổi class. Cách chữa duy nhất bền vững là xin dev gắn data-testid — thuộc tính sinh ra chỉ để cho test bám vào và không ai được đổi vì lý do thẩm mỹ.
2
Code trông thế nào
// Dễ gãy — class do công cụ CSS sinh ra tự động page.locator('.btn-primary.css-1x7y9z') // Bền — theo vai trò và chữ người dùng thật sự nhìn thấy page.getByRole('button', { name:'Đăng nhập' }) // Bền nhất — thuộc tính dành riêng cho test page.getByTestId('nut-dang-nhap')
Thứ tự ưu tiên: testid → vai trò và nhãn → cuối cùng mới tới CSS.
3
Khi nào bạn dùng nó
✓ Dùng khi
- Mọi lúc bạn cần chỉ vào một phần tử để bấm hoặc đọc
✗ Đừng dùng khi
- Bám vào class trang trí hoặc vị trí thứ mấy trong danh sách
Chưa cần biết: locator lồng nhau, lọc theo phần tử con, shadow DOM.
Để 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 bấm nút Xoá nằm trong đúng dòng có chữ “Áo thun trắng”, giữa một bảng 50 dòng.
4
Đi đâu tiếp
- XPathVũ khí cuối cùng khi không còn cách nào khác bám vào.
- Flaky TestLocator chọn dở là nguồn flaky phổ biến nhất.
- Page Object ModelCách gom locator về một chỗ để sửa một lần.
🧪 Thử 2 phút, không cần cài gì
F12 → Console, trên trang bất kỳ:document.querySelectorAll('[data-testid]').length
Ra 0 nghĩa là đội dev chưa gắn testid nào. Đó là cuộc trò chuyện đầu tiên bạn nên có với họ.