Ảnh giao diện khác đi: lỗi hồi quy hay thay đổi được phép?

Một thẻ sản phẩm vẫn có đủ tên, giá và nút mua, nhưng tên dài đẩy nút xuống ngoài vùng nhìn thấy trên điện thoại. Kiểm tra chức năng có thể vẫn tìm và bấm được nút; ảnh chụp so sánh lại cho thấy bố cục đã đổi. Ngược lại, một lần đổi cách hiển thị nét chữ có thể tạo nhiều điểm khác dù người đọc vẫn dùng giao diện bình thường.

Tình huống minh họa này đặt ra công việc thật của kiểm thử hình ảnh: phát hiện thay đổi đáng xem và đưa nó về đúng ngữ cảnh. Số pixel khác là tín hiệu, chưa phải phán quyết về chất lượng.

Ảnh chuẩn phải có người chịu trách nhiệm

Trước khi tạo bộ so sánh, xác nhận giao diện hiện tại đã được chấp nhận cho trạng thái nào. Chụp một màn hình đang lỗi rồi gọi đó là ảnh chuẩn sẽ giúp lỗi ấy tồn tại ổn định hơn.

Mỗi ảnh cần gắn với phiên bản, kích thước vùng nhìn, trạng thái dữ liệu và cấu hình hiển thị. Khi thiết kế thay đổi có chủ đích, người duyệt cần hiểu khác biệt nào được chấp nhận và vì sao. Không nên cập nhật hàng loạt ảnh chỉ để làm pipeline xanh sau một lần báo đỏ.

Với thẻ sản phẩm, có thể cần ảnh tên ngắn, tên dài, hết hàng và giá khuyến mãi. Một ảnh trang danh sách mặc định không đại diện mọi trạng thái của thành phần ấy.

Làm cho điều kiện so sánh có thể lặp lại

Giữ môi trường chụp nhất quán về trình duyệt, font, tỷ lệ hiển thị và dữ liệu. Chờ ảnh hoặc font hoàn tất trước khi chụp; xác định rõ trạng thái mong muốn thay vì chỉ đợi một số giây cố định.

Ngày giờ, tên ngẫu nhiên và nội dung đổi liên tục dễ tạo nhiễu. Có thể cấp dữ liệu cố định hoặc che vùng phù hợp, nhưng cần hiểu cái giá của việc che. Che toàn bộ ô giá vì số thay đổi cũng làm mất khả năng phát hiện giá bị cắt hoặc sai cỡ chữ.

Chuyển động cần trạng thái chụp có định nghĩa: trước khi mở, sau khi mở xong hoặc một mốc cụ thể. Nếu mỗi lượt giữ một khung hình ngẫu nhiên, báo khác biệt chỉ đang kể rằng hai lần chụp không cùng thời điểm.

Chọn phạm vi ảnh theo câu hỏi cần trả lời

Ảnh riêng thành phần giúp nhận ra khoảng cách, đường viền và kiểu chữ. Ảnh trang cho thấy tương tác giữa các vùng: thanh cố định che nội dung, phần chân trang tràn lên hoặc một banner đẩy bố cục.

Không cần nhân mọi ảnh với mọi kích thước và trình duyệt ngay từ đầu. Ưu tiên cấu hình có người dùng, bố cục quan trọng và điểm chuyển có rủi ro. Ghi ma trận đã chọn để kết quả không bị hiểu thành đã bao phủ tất cả.

Khi so trên nhiều môi trường, cần ảnh chuẩn tương ứng hoặc một chiến lược giải thích khác biệt đã biết. Dùng duy nhất một ảnh làm chuẩn cho mọi cách dựng chữ có thể khiến báo cáo đầy nhiễu.

Đọc vùng khác như một người đang làm việc

Nhìn ảnh trước, ảnh sau và lớp chênh lệch cạnh nhau. Với nút bị đẩy xuống, hỏi người dùng có còn nhận ra hành động tiếp theo không, có cần cuộn bất thường không và chữ có bị mất hay chỉ đổi dòng.

Một vùng nhỏ chứa nhãn quan trọng có thể đáng chú ý hơn vùng nền lớn. Vì thế, ngưỡng khác biệt cần được chọn theo loại ảnh và mức nhiễu đã hiểu. Không có một tỷ lệ duy nhất tự phân biệt được thay đổi vô hại với lỗi chặn thao tác.

Nếu nhiều ảnh cùng đổi, tìm nguyên nhân chung ở font, biến thiết kế hoặc môi trường trước khi tạo hàng chục báo lỗi độc lập. Vẫn giữ ảnh của các trạng thái bị ảnh hưởng để biết phạm vi thực sự.

Kết hợp hình ảnh với những phép kiểm tra khác

Ảnh không cho biết nút có tên phù hợp với trình đọc màn hình, có gửi đúng dữ liệu hay có được đi tới bằng bàn phím. Nó cũng khó giải thích vì sao bố cục thay đổi. Dùng kiểm tra chức năng và khả năng tiếp cận để bổ sung câu hỏi, không yêu cầu một tấm ảnh trả lời tất cả.

Một báo cáo hữu ích giữ điều kiện chụp, vùng khác, tác động và quyết định chấp nhận hoặc sửa. Khi dùng AI hỗ trợ mô tả chênh lệch, vẫn cần người đọc đối chiếu ảnh. Phát hiện tự động có giá trị nhất khi dẫn tới một quyết định rõ, không phải thêm một thư mục ảnh không ai xem.

Về nguồn tham khảo

Chủ đề tham khảo từ bộ AI Tester Skills. Bài viết và tình huống minh họa được biên soạn lại cho người đọc.