🖼️ Visual Testing là gì?
So ảnh chụp giao diện để bắt lỗi lệch layout.
1
Hiểu nó là gì
Visual Testing chụp màn hình rồi so với ảnh chuẩn đã duyệt, phát hiện những thay đổi mà test chức năng không thấy như lệch nút hay sai màu.
Nói theo đời thường:
Như trò tìm điểm khác nhau giữa hai bức tranh: chữ vẫn đủ, nút vẫn bấm được, nhưng nó bị đẩy lệch hẳn ra ngoài màn hình.
Như trò tìm điểm khác nhau giữa hai bức tranh: chữ vẫn đủ, nút vẫn bấm được, nhưng nó bị đẩy lệch hẳn ra ngoài màn hình.
⚠ Chỗ ẩn dụ này hỏng
Trò tìm điểm khác nhau — nhưng máy không phân biệt được “khác” và “sai”.
Đổi font một chút, con trỏ nhấp nháy, quảng cáo khác, ảnh chưa tải xong: tất cả đều bị báo là khác. Visual test nổi tiếng ồn ào, và đội nào cũng phải đi qua giai đoạn duyệt hàng loạt ảnh khác biệt vô nghĩa trước khi nó thành hữu ích.
2
Code trông thế nào
// Lần đầu: lưu ảnh chuẩn. Lần sau: so với nó await expect(page).toHaveScreenshot('trang-chu.png', { maxDiffPixelRatio: 0.01, mask: [page.getByTestId('quang-cao')] // che vùng hay đổi })
mask là thứ cứu bạn: che những vùng vốn dĩ luôn thay đổi.
3
Khi nào bạn dùng nó
✓ Dùng khi
- Thư viện thành phần giao diện dùng chung nhiều nơi
- Trang marketing mà bố cục là sản phẩm
- Sau khi nâng cấp thư viện CSS
✗ Đừng dùng khi
- Trang có nội dung động liên tục (bảng giá, tin tức)
- Đội chưa đủ người để duyệt ảnh khác biệt mỗi lần chạy
Chưa cần biết: so sánh theo thành phần, dịch vụ visual trên cloud, duyệt khác biệt theo nhánh.
Để 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 đã chán ngán việc mỗi lần chạy lại phải duyệt 30 ảnh khác biệt mà 29 cái vô hại.
4
Đi đâu tiếp
- E2E TestNơi visual test thường được gắn kèm.
- HeadlessChế độ headless hay làm ảnh lệch — nguồn nhiễu số một.
- UI/UXThứ visual test đang bảo vệ.