🗂️ Page Object Model là gì?
Gom mọi thứ của một trang vào đúng một chỗ.
1
Hiểu nó là gì
Page Object Model tách locator và thao tác của từng trang thành lớp riêng, để khi giao diện đổi thì chỉ sửa một nơi thay vì sửa khắp các test.
Nói theo đời thường:
Như lưu số vào danh bạ: người ta đổi số thì mình sửa một lần, mọi chỗ gọi đi sau đó đều đúng.
Như lưu số vào danh bạ: người ta đổi số thì mình sửa một lần, mọi chỗ gọi đi sau đó đều đúng.
⚠ Chỗ ẩn dụ này hỏng
Danh bạ chỉ lưu số. Page Object rất dễ phình thành nơi chứa cả logic nghiệp vụ, rồi thành một mớ không ai dám sửa.
Dấu hiệu đã đi quá xa: một lớp Page có 40 phương thức, hoặc Page này gọi Page kia gọi Page nọ. Nguyên tắc giữ mình: page object chỉ biết cách bấm, không biết bấm để làm gì.
2
Code trông thế nào
class TrangDangNhap {
constructor(page) { this.page = page }
get oEmail() { return this.page.getByLabel('Email') }
get nutGui() { return this.page.getByRole('button', { name:'Đăng nhập' }) }
async dangNhap(email, mk) { ... }
}
// Trong test — không còn locator nào lộ ra
await new TrangDangNhap(page).dangNhap('na@vd.com', '123')
Dev đổi id nút Đăng nhập? Sửa đúng một dòng, cả trăm ca test sống lại.
3
Khi nào bạn dùng nó
✓ Dùng khi
- Từ khoảng 10 ca test trở lên trên cùng một trang
- Cùng một locator xuất hiện ở nhiều file
- Giao diện hay thay đổi
✗ Đừng dùng khi
- Mới có 2-3 ca test (thêm tầng chỉ tổ rối)
- Trang chỉ dùng đúng một lần
Chưa cần biết: component object, screenplay pattern, fixture 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 một lớp Page của bạn vượt quá 200 dòng và bạn phải cuộn để tìm phương thức.
4
Đi đâu tiếp
- LocatorThứ page object sinh ra để cất giữ.
- Test ScriptTrở nên ngắn và dễ đọc hẳn sau khi có page object.
- Test AutomationPage object là bước trưởng thành đầu tiên của bộ test.