Skip to main content

Kiểm Thử Hồi Quy Trực Quan Bằng Cách Chụp Màn Hình

Các đội ngũ phát triển sử dụng Webshot để phát hiện những lỗi mà unit test bỏ sót — vỡ bố cục, lỗi font chữ, thiếu biểu tượng, trạng thái responsive bị hỏng. Chụp ảnh staging, chụp ảnh production, so sánh cặp ảnh đó. Thả kết quả so sánh vào bình luận PR để chứng minh thay đổi của bạn an toàn (hoặc chứng minh lỗi mới vừa xuất hiện).

🖥️ Toàn trang máy tính (PNG, so sánh sắc nét) 📱 Toàn trang di động ⚙️ Dùng API miễn phí thay thế

Tất cả các nút sẽ mở biểu mẫu chụp ảnh đã được cấu hình sẵn. Bạn có thể thay đổi định dạng và viewport sau khi trang tải xong.

Tại sao nên dùng Webshot cho việc này

Ảnh chụp chính xác đến từng pixel

Chế độ PNG giữ lại văn bản và các cạnh sắc nét — lý tưởng cho các công cụ so sánh điểm ảnh (`pixelmatch`, ImageMagick `compare`) nơi nhiễu nén của JPG có thể tạo ra kết quả dương tính giả.

Viewport nhất quán mỗi lần chụp

Webshot chụp ảnh với cùng một viewport, vị trí cuộn, và thời gian chờ tải font chính xác trong mỗi lần chạy — đảm bảo kết quả so sánh đáng tin cậy.

Thân thiện với API

Kết nối API Webshot miễn phí với CI của bạn: chụp ảnh trước và sau khi triển khai, so sánh với `pixelmatch`, và làm thất bại bản build nếu số pixel thay đổi > ngưỡng cho phép.

Không cần mã boilerplate cho headless-Chrome

Bỏ qua việc thiết lập puppeteer, cài đặt font, các cờ sandbox. Webshot đã chạy tất cả những thứ đó trên hạ tầng của chúng tôi. CI của bạn chỉ cần thực hiện một lệnh gọi HTTP.

Cách chụp ảnh để kiểm thử hồi quy trực quan

  1. Chọn (các) trang bạn muốn theo dõi — trang chủ, các trang đích quan trọng, quy trình thanh toán, bất cứ nơi nào mà một lỗi hồi quy sẽ gây thiệt hại.
  2. Chụp mỗi trang ở định dạng PNG + toàn trang máy tính + toàn trang di động để làm cơ sở (baseline) cho giao diện production hiện tại của bạn.
  3. Sau lần triển khai tiếp theo, chụp lại các URL đó. So sánh ảnh cũ và mới bằng `pixelmatch` hoặc ImageMagick — bất kỳ thay đổi nào > 1% số pixel đều cần được con người xem xét.
  4. Tích hợp vào CI: một hook trước triển khai sẽ chụp ảnh staging, một hook sau triển khai sẽ chụp ảnh production, và bản build sẽ thất bại nếu sự khác biệt vượt quá ngưỡng của bạn.

Các câu hỏi thường gặp

Sử dụng headless Chrome trong CI có nghĩa là phải cài đặt Chromium, phông chữ, các cờ kernel sandbox, và còn phải cập nhật tất cả. Với Webshot, bạn bỏ qua hoàn toàn việc cài đặt — CI của bạn chỉ cần thực hiện một lệnh gọi HTTP đến API của chúng tôi và nhận lại một tệp PNG. Chúng tôi xử lý việc cập nhật Chrome, lưu cache phông chữ và bảo vệ khỏi SSRF.

Có, khi bạn sử dụng PNG + cùng một viewport + cùng một chiến lược chờ. Webshot cố định kích thước viewport và chờ cho đến khi fonts.ready + network-idle + bất kỳ hoạt ảnh nào được khai báo qua truy vấn `prefers-reduced-motion`. Các hoạt ảnh ngẫu nhiên (vòng lặp lottie, nền Date.now()) sẽ cho kết quả so sánh khác nhau mỗi lần chạy; hãy đóng băng chúng trong môi trường thử nghiệm của bạn.

Không thể trong một lệnh gọi — bạn chụp mỗi URL riêng biệt, sau đó so sánh chúng bằng một thư viện khác. Chúng tôi giữ cho API tập trung vào việc chụp ảnh; việc so sánh chỉ là một đoạn script 30 dòng. Xem `/developers` để biết mã ví dụ.

Có. Webshot chờ đến khi network-idle (không có yêu cầu nào trong 500ms) và fonts.ready trước khi chụp, vì vậy các ứng dụng React, Vue, Svelte, và Next.js đều được hiển thị đầy đủ trước khi chụp ảnh màn hình. Đối với các trang không bao giờ đạt đến trạng thái network-idle (long polling, websockets), bạn có thể truyền tham số `maxWait` qua API.

Biểu mẫu công khai miễn phí giới hạn 5 lần/15 phút cho mỗi IP — quá thấp cho CI. Gói API miễn phí hào phóng hơn; xem `/developers`. Đối với kiểm thử hồi quy khối lượng lớn (hơn 50 lần chụp mỗi lượt build), gói API thương mại sẽ loại bỏ giới hạn theo IP.

Bản thân Webshot chỉ thực hiện việc chụp ảnh — bạn cung cấp lớp so sánh. Giải pháp hai dòng: `npx pixelmatch baseline.png new.png diff.png`. Hoặc sử dụng một dịch vụ so sánh trực quan được quản lý (Percy, Chromatic, BackstopJS) và cung cấp các tệp PNG của Webshot cho chúng.

Sẵn sàng chụp ảnh chưa?

Miễn phí, không cần đăng ký, không có watermark. Chỉ cần dán một URL.

📸 Mở biểu mẫu chụp ảnh

Các trường hợp sử dụng khác: Ảnh chụp màn hình Google Maps · Ảnh chụp màn hình WordPress · Kiểm tra chất lượng trang đích · Ảnh chụp màn hình làm bằng chứng pháp lý · Ảnh chụp màn hình mạng xã hội · Ảnh chụp màn hình cho quy trình làm việc của lập trình viên · Xem tất cả →

Share: 𝕏 Twitter Facebook LinkedIn