⏳ Wait là gì?
Bảo test đợi trang kịp hiện rồi hãy làm tiếp.
1
Hiểu nó là gì
Wait cho test dừng đến khi phần tử xuất hiện hoặc điều kiện thoả mãn; chờ cứng theo số giây thì vừa chậm vừa bấp bênh, chờ theo điều kiện thì đáng tin hơn.
Nói theo đời thường:
Gọi món xong thì chờ tới lúc bếp báo có món, chứ không phải đếm đủ ba mươi giây rồi cứ thế lao vào bếp bưng ra.
Gọi món xong thì chờ tới lúc bếp báo có món, chứ không phải đếm đủ ba mươi giây rồi cứ thế lao vào bếp bưng ra.
⚠ Chỗ ẩn dụ này hỏng
Chờ bếp báo có món nghe rất hợp lý, nhưng “món đã ra” và “món ăn được” là hai chuyện khác nhau.
Phần tử hiện ra không có nghĩa nó bấm được: có thể đang trong animation, đang bị popup che, hoặc vừa hiện xong đã bị React vẽ lại. Chờ đúng thứ cần chờ (dữ liệu đã lên chưa) khó hơn nhiều so với chờ phần tử xuất hiện.
2
Code trông thế nào
// Chờ mù — chậm và vẫn có thể thiếu await page.waitForTimeout(3000) // Chờ theo điều kiện — nhanh và chắc await expect(page.getByRole('alert')).toBeVisible() // Chờ đúng thứ mình thực sự cần await page.waitForResponse(r => r.url().includes('/api/gio-hang'))
Ba kiểu chờ, độ tin cậy tăng dần từ trên xuống.
3
Khi nào bạn dùng nó
✓ Dùng khi
- Mọi chỗ trang tải dữ liệu sau khi mở
- Sau khi bấm nút gây gọi mạng
- Trang có hiệu ứng chuyển động
✗ Đừng dùng khi
- Chờ cứng theo số giây khi có cách chờ theo điều kiện
Chưa cần biết: tự viết điều kiện chờ, chờ theo trạng thái mạng, đặt timeout riêng từng ca.
Để 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 phát hiện mình rải
waitForTimeout khắp nơi để “cho chắc”.4
Đi đâu tiếp
- Flaky TestHậu quả trực tiếp của chờ sai cách.
- PlaywrightTự chờ sẵn, đỡ được phần lớn trường hợp thường gặp.
- SeleniumPhải tự viết chờ, nên đây là kỹ năng bắt buộc.