Bài Tập 4: Phân Tích Code Sinh Ra¶

Yêu Cầu¶

Phân tích code Playwright sinh ra từ Antigravity IDE và tìm điểm cải thiện.

Hướng Dẫn¶

Bước 1: Lấy code từ bài tập trước¶

Lấy code từ bài tập 2 (Login) hoặc bài tập 3 (Add to Cart).

Bước 2: Phân tích từng dòng code¶

Điền bảng phân tích:

Dòng	Code	Chức năng	Locator Type	Ổn định?
1	`page.goto(...)`	Mở trang	-	✅
2	`page.locator(...)`	?	?	?
3	`page.locator(...)`	?	?	?
4	`page.locator(...)`	?	?	?
5	`page.locator(...)`	?	?	?

Bước 3: Đánh giá locator¶

Cho điểm ổn định cho mỗi locator (1-5):

[data-testid="xxx"]     → 5/5 (Rất ổn định)
[id="xxx"] (cố định)    → 4/5 (Ổn định)
[aria-label="xxx"]      → 4/5 (Accessibility-friendly)
text content            → 3/5 (Có thể thay đổi)
CSS class               → 2/5 (Có thể thay khi refactor)
XPath                   → 1/5 (Dễ gãy)

Bước 4: Tìm điểm cải thiện¶

Kiểm tra code có vấn đề sau không:

□ Dùng waitForTimeout() thay vì chờ element
□ Không có assertion sau khi thực hiện action
□ Locator quá dài hoặc phức tạp
□ Có thể dùng locator ngắn gọn hơn
□ Không có error handling
□ Hardcode test data trong code

Bước 5: Viết code cải thiện¶

// Code cải thiện (viết lại code tốt hơn)

import { test, expect } from '@playwright/test';

test('test case name', async ({ page }) => {
  // TODO: Viết code cải thiện ở đây

});

Checklist Đánh Giá Code¶

□ Không dùng waitForTimeout
□ Có assertion rõ ràng
□ Locator ổn định (data-testid > id > aria-label > text)
□ Code dễ đọc, có comment
□ Test data tách riêng
□ Có error handling

Nộp Bài¶

[ ] Bảng phân tích
[ ] Đánh giá locator
[ ] Code cải thiện
[ ] Checklist đánh giá