Tận dụng Playwright Visual Comparisons để xây dựng môi trường phát triển hiệu quả và an toàn hơn

Bối cảnh và nhận diện vấn đề

• Kiểm thử frontend gặp nhiều khó khăn do thay đổi UI và đầu vào người dùng khó dự đoán.
• Việc kiểm thử do con người trực tiếp xác minh có giới hạn, nên đã cân nhắc áp dụng kiểm thử tự động.
• Các bài kiểm thử E2E kiểu ghi lại thao tác hiện có (TestProject, Playwright) có chi phí bảo trì cao và dễ bị ảnh hưởng bởi thay đổi UI.

Áp dụng Playwright Visual Comparisons

• Áp dụng phương pháp kiểm thử hồi quy trực quan để phát hiện thay đổi của UI.
• Lưu ảnh chụp màn hình chuẩn, rồi so sánh sau khi mã nguồn thay đổi để phát hiện khác biệt.
• Có thể so sánh ảnh theo các chế độ 2-up, Swipe, Highlight, Onion Skin.

Những vấn đề chính gặp phải trong quá trình áp dụng và cách giải quyết

1. Phát sinh lỗi giả do khác biệt rất nhỏ (0.01%)
   Vấn đề: Tùy theo môi trường chạy kiểm thử (OS, trình duyệt, cài đặt hiển thị, v.v.), có thể phát sinh khác biệt trong quá trình render font.
   Giải pháp: Sử dụng container Docker để chạy toàn bộ kiểm thử trong cùng một môi trường.

2. Cần chụp ảnh màn hình sau khi dữ liệu tải xong
   Vấn đề: Nếu chụp ảnh màn hình trước khi trang tải hoàn toàn, có thể ảnh sẽ chứa cả UI đang loading.
   Giải pháp: Dùng hàm utility kết hợp getByText + toBeVisible để chờ đến khi một chuỗi cụ thể xuất hiện.

3. Khác biệt ảnh chụp do các phần tử có animation
   Vấn đề: Các phần tử CSS animation, Canvas, SVG, WebGL bị chụp ở thời điểm khác nhau mỗi lần chạy, khiến test trở nên flaky.
   Giải pháp: Áp dụng nhiều biện pháp để vô hiệu hóa animation và tối ưu thêm hiệu suất chạy test.

4. Phát hiện thay đổi không cần thiết do plugin bên thứ ba (iframe, v.v.)
   Vấn đề: Các plugin bên thứ ba như phản hồi khách hàng, khảo sát, chatbot được tải qua iframe và tạo ra thay đổi trực quan.
   Giải pháp: Khi tạo ảnh chụp màn hình, áp dụng CSS dùng chung để ẩn iframe và các phần tử plugin cụ thể.

5. Thất bại khi xác minh phần tử phía dưới ở các trang có cuộn
   Vấn đề: toHaveScreenshot mặc định chỉ chụp phần màn hình đang hiển thị, nên cần xử lý liên quan đến cuộn trang.
   Giải pháp: Áp dụng tùy chọn fullPage: true để chụp ảnh toàn bộ trang.

Kết luận

• Tự động hóa hiệu quả việc phát hiện thay đổi UI thông qua kiểm thử hồi quy trực quan.
• Dù không phải giải pháp hoàn hảo, cách này vẫn cải thiện cả năng suất phát triển lẫn độ ổn định của kiểm thử.
• Vẫn cần tiếp tục cải tiến và tối ưu hóa môi trường kiểm thử.