Chưa có ảnh chụp là chưa xong

Những con bug đắt giá nhất mà chúng tôi từng đẩy lên production đều tàng hình trước mọi kiểm tra tự động. Build xanh. Test qua hết. Vậy mà trang thì sai: một dòng tiêu đề xuống hàng thành vô nghĩa trên mobile, một section render đè lên section khác, một cái form trông thì ổn nhưng bấm gửi chẳng đi đâu cả.

Thế nên chúng tôi đặt ra một quy tắc nghe thô sơ mà lại chạy tốt: chưa ai nhìn tận mắt ảnh chụp của trang đã deploy thì thay đổi đó chưa xong. Không phải dev server. Phải là hàng thật, cả hai viewport, ở full độ phân giải.

Làm cho bằng chứng rẻ đi

for (const vp of [{ w: 1440, h: 900 }, { w: 390, h: 844 }]) {
  const page = await browser.newPage({ viewport: vp });
  page.on('console', (m) => errors.push(m));    // console is part of the picture
  await page.goto(URL, { waitUntil: 'networkidle' });
  await page.screenshot({ path: shot(vp), fullPage: true });
}

Chụp lại chỉ tốn đúng một câu lệnh cho mỗi project, nên chẳng có cớ gì để bỏ qua. Những ảnh chụp có đóng dấu thời gian dồn lại thành kho lưu regression rẻ nhất từng có.

Máy đọc trước

Năm nay chúng tôi đặt một model thị giác đứng trước con người. Mỗi cặp ảnh chụp được đưa cho một model với đề bài cố tình bó hẹp: báo cáo chữ tràn, chữ bị cắt cụt, các phần tử chồng lên nhau, canh lề lệch và lỗi tương phản, kèm theo vùng pixel cụ thể, và trả lời NONE nếu trang sạch. Không gu thẩm mỹ, không lời khen, chỉ lỗi mà thôi. Nó bắt được cỡ 70% lỗi cơ học trước khi có người ngó vào, và nó chẳng bao giờ thấy chán ở tấm ảnh thứ bốn mươi.

Vòng người soi vẫn là chốt chặn quyết định, và nó có luật riêng: mở ảnh ở tỉ lệ 1:1 vì lỗi tràn sẽ trốn mất khi zoom cho vừa cửa sổ, đọc to phần chữ đã render lên vì ảnh chụp lôi ra được cả những lỗi chính tả mà trình soạn thảo bỏ sót, và coi một trang trông sạch nhưng có lỗi console là trang bẩn.

Rút thành nguyên tắc chung

Tính năng database coi là xong khi truy vấn lại được đúng dòng dữ liệu đó. Email coi là xong khi thư mở lên được trong một client thật. Pipeline model coi là xong khi kết quả được đọc tại điểm đích, chứ không phải tại API response. Mô thức gói gọn trong một câu: kiểm chứng ở tầng mà người dùng thực sự sống, chứ không phải tầng mà mình tình cờ viết ra.