Module 10: Maintenance — Khi Test Gãy, Phải Làm Gì?¶

🎯 Mục Tiêu Module¶

Hiểu tại sao test gãy
Biết cách phân biệt UI thay đổi vs bug thật
Nắm được flow xử lý khi test gãy
Thực hành maintenance test

10.1. Tại Sao Test Gãy?¶

Các nguyên nhân phổ biến¶

┌─────────────────────────────────────────────────────┐
│                                                     │
│  Nguyên nhân test gãy:                              │
│                                                     │
│  1. UI thay đổi (element thay đổi)                 │
│     - Locator cũ không tìm thấy element mới        │
│     - Text thay đổi                                 │
│     - Layout thay đổi                               │
│                                                     │
│  2. Logic thay đổi                                  │
│     - Flow thay đổi                                 │
│     - Validation thay đổi                           │
│     - Error message thay đổi                        │
│                                                     │
│  3. Data thay đổi                                   │
│     - Test data không còn hợp lệ                   │
│     - Database thay đổi                             │
│                                                     │
│  4. Environment thay đổi                            │
│     - URL thay đổi                                  │
│     - Config thay đổi                               │
│                                                     │
└─────────────────────────────────────────────────────┘

10.2. Phân Biệt UI Thay Đổi vs Bug Thật¶

Flow quyết định¶

Test fail
    │
    ▼
Kiểm tra nguyên nhân
    │
    ├── Mở website thủ công
    │   │
    │   ├── Website hoạt động bình thường?
    │   │   │
    │   │   ├── Có ──► UI THAY ĐỔI
    │   │   │         └── Cần cập nhật test
    │   │   │
    │   │   └── Không ──► BUG THẬT
    │   │                  └── Tạo bug report cho Dev
    │   │
    │   └── Element có tồn tại?
    │       │
    │       ├── Có ──► Locator sai → Cập nhật locator
    │       │
    │       └── Không ──► Element bị xóa → Cần viết lại test

Bảng quyết định¶

Tình huống	Nguyên nhân	Hành động
Element không tìm thấy	UI thay đổi	Cập nhật locator
Text không khớp	UI thay đổi	Cập nhật assertion
Timeout	Trang load chậm	Tăng timeout hoặc dùng waitFor
Element disabled	Logic thay đổi	Cập nhật flow test
Page not found	URL thay đổi	Cập nhật URL

10.3. Flow Xử Lý Khi Test Gãy¶

Flow đầy đủ¶

┌─────────────────────────────────────────────────────┐
│                                                     │
│  1. Test gãy (fail)                                 │
│         ↓                                           │
│  2. Phân tích nguyên nhân                           │
│         ↓                                           │
│  3. Quyết định: UI thay đổi hay Bug thật?          │
│         ↓                                           │
│  ┌─────────────────────┐  ┌────────────────────┐   │
│  │ UI THAY ĐỔI         │  │ BUG THẬT           │   │
│  │                     │  │                    │   │
│  │ → Cập nhật test     │  │ → Tạo bug report   │   │
│  │ → Hoặc chạy lại     │  │ → Chuyển cho Dev   │   │
│  │   pipeline AI       │  │                    │   │
│  └─────────────────────┘  └────────────────────┘   │
│         ↓                         ↓                │
│  4. Chạy lại test để verify                        │
│                                                     │
└─────────────────────────────────────────────────────┘

10.4. Cập Nhật Test¶

Cách 1: Sửa locator thủ công¶

// Locator cũ (gãy)
await page.locator('#old-id').click();

// Locator mới (hoạt động)
await page.locator('#new-id').click();

Cách 2: Chạy lại pipeline AI¶

UI thay đổi nhiều
    │
    ▼
Chạy lại pipeline từ Stage 2
    │
    ▼
IDE Agent sinh code mới
    │
    ▼
So sánh code mới với code cũ
    │
    ▼
Chỉ sửa phần khác

Cách 3: Dùng fallback locator¶

// Primary locator (có thể gãy)
await page.locator('[data-testid="login-btn"]').click();

// Fallback locator (dự phòng)
await page.locator('button:has-text("Login")').click();

10.5. Best Practices cho Maintenance¶

1. Dùng locator ổn định¶

Ưu tiên: data-testid > id > aria-label > text > CSS

2. Tách test data¶

// ❌ Hardcode
await page.locator('#username').fill('testuser123');

// ✅ Tách riêng
const TEST_DATA = { username: 'testuser123' };
await page.locator('#username').fill(TEST_DATA.username);

3. Dùng Page Object Model¶

Locator thay đổi → Chỉ sửa 1 file Page Object
→ Không cần sửa tất cả test

4. Chạy test định kỳ¶

Chạy hàng ngày → Phát hiện lỗi sớm
→ Maintenance ít hơn

5. Version control¶

Lưu code vào Git
→ Dễ dàng revert khi cần
→ Theo dõi thay đổi

10.6. Ví Dụ Thực Tế¶

Tình huống: Element thay đổi¶

Trước: <button id="login-btn">Login</button>
Sau:   <button id="sign-in-btn">Sign In</button>

Code cũ (gãy)¶

await page.locator('#login-btn').click();

Code mới (hoạt động)¶

await page.locator('#sign-in-btn').click();

Hoặc dùng text (linh hoạt hơn)¶

// Dùng text → Ít bị ảnh hưởng khi ID thay đổi
await page.locator('text=Sign In').click();

📝 Bài Tập¶

Bài Tập 1: Phân Tích Test Fail¶

Tạo test có lỗi (sai locator)
Chạy test
Phân tích nguyên nhân
Xác định: UI thay đổi hay Bug thật?

Bài Tập 2: Cập Nhật Test¶

Tìm locator mới cho element
Cập nhật test
Chạy lại test

Bài Tập 3: Dùng Fallback Locator¶

Viết test với primary locator
Thay đổi primary locator (giả lập UI thay đổi)
Thêm fallback locator
Chạy test

✅ Checklist Hoàn Thành Module¶

[ ] Hiểu tại sao test gãy
[ ] Biết cách phân biệt UI thay đổi vs bug thật
[ ] Nắm flow xử lý khi test gãy
[ ] Biết cách cập nhật test
[ ] Thực hành maintenance test
[ ] Hoàn thành bài tập