Giới thiệu

Trong phát triển phần mềm hiện đại, việc đảm bảo giao diện người dùng (UI) không bị lỗi sau khi thay đổi mã nguồn là rất quan trọng. Trước đây, chúng ta thường sử dụng các công cụ như Diffy hoặc Percy để thực hiện kiểm thử hồi quy hình ảnh. Mặc dù những công cụ này rất hữu ích, nhưng chúng cũng mang lại một số bất tiện như phụ thuộc vào dịch vụ bên ngoài, chi phí gia tăng, và việc chuyển đổi ngữ cảnh giữa các công cụ. Gần đây, tôi đã khám phá ra một tính năng mới trong Pest 4 - kiểm thử hồi quy hình ảnh, và tôi muốn chia sẻ trải nghiệm của mình.

Tính Năng Kiểm Thử Hình Ảnh Mới Trong Pest 4

Pest So Với PHPUnit

Khi làm việc với các dự án Laravel, tôi thường sử dụng PHPUnit. Tuy nhiên, Pest đã thu hút sự chú ý của tôi với cách viết kiểm thử rất trực quan. Thay vì phải đối mặt với cấu trúc lớp và phương thức nặng nề của PHPUnit, Pest mang lại cảm giác gần gũi hơn với RSpec (từ Ruby) hoặc Jest (từ JavaScript). Với cú pháp dễ hiểu, việc viết kiểm thử trở nên thú vị hơn rất nhiều.

Cách Thực Hiện Kiểm Thử Hình Ảnh

Để minh họa cách thức hoạt động của kiểm thử hình ảnh trong Pest 4, tôi sẽ tạo một ví dụ đơn giản. Thay vì thay đổi tên Anakin Skywalker thành Darth Vader, tôi sẽ thay thế hình ảnh anakin.jpg bằng một hình ảnh khác nhưng với tên gọi giống nhau.

Ví Dụ Kiểm Thử

php Copy

it('hiển thị Anakin Skywalker như một hiệp sĩ Jedi', function () {
    $page = visit(['/']);

    $page->assertScreenshotMatches();
});

Khi chạy kiểm thử lần đầu tiên, Pest sẽ lưu lại ảnh chụp màn hình. Nếu không phát hiện bất kỳ sự khác biệt nào trong ảnh chụp, kiểm thử sẽ thành công. Tuy nhiên, nếu bạn thay đổi hình ảnh, kiểm thử sẽ thất bại.

Cập Nhật Ảnh Chụp

Nếu bạn chắc chắn rằng sự thay đổi là có chủ đích, bạn có thể cập nhật ảnh chụp bằng lệnh:
./vendor/bin/pest --update-snapshots

Nếu không mong đợi sự thay đổi này, hãy chạy lại kiểm thử với:
./vendor/bin/pest --diff để xem xét sự khác biệt.

Ví Dụ Sự Khác Biệt Khi Chạy --diff

Khi bạn chạy lệnh --diff, Pest sẽ hiển thị những điểm khác biệt giữa ảnh chụp hiện tại và ảnh chụp đã lưu. Điều này giúp bạn dễ dàng theo dõi các thay đổi trong giao diện người dùng của ứng dụng.

Thực Hành Tốt Nhất Trong Kiểm Thử Hình Ảnh

Luôn Kiểm Tra Ảnh Chụp Trước Khi Cập Nhật: Đảm bảo rằng bạn xem xét kỹ lưỡng sự khác biệt trước khi cập nhật ảnh chụp để tránh việc vô tình chấp nhận các lỗi giao diện.
Tổ Chức Các Kiểm Thử: Tách biệt các kiểm thử hình ảnh ra khỏi kiểm thử chức năng để dễ dàng quản lý và phát hiện lỗi.
Thực Hiện Kiểm Thử Định Kỳ: Đảm bảo rằng bạn thực hiện kiểm thử hình ảnh định kỳ sau mỗi thay đổi mã nguồn lớn.

Những Cạm Bẫy Thường Gặp

Sự Thay Đổi Không Mong Đợi: Đôi khi, bạn có thể vô tình thay đổi giao diện mà không nhận ra. Hãy cẩn thận với các thay đổi nhỏ nhất.
Quá Phụ Thuộc Vào Công Cụ: Mặc dù Pest 4 rất mạnh mẽ, nhưng cũng cần có kế hoạch dự phòng cho việc kiểm thử hình ảnh bằng các công cụ khác nếu cần thiết.

Mẹo Tối Ưu Hiệu Suất

Giảm Kích Thước Ảnh: Sử dụng ảnh nén để giảm thời gian tải và tăng tốc độ kiểm thử.
Chỉ Kiểm Thử Các Thành Phần Cần Thiết: Hạn chế số lượng kiểm thử hình ảnh để không làm chậm quá trình phát triển.

Giải Quyết Sự Cố

Nếu bạn gặp phải vấn đề trong quá trình kiểm thử, hãy kiểm tra các yếu tố sau:

Kết Nối Mạng: Đảm bảo rằng bạn không gặp phải vấn đề về kết nối mạng khi chạy kiểm thử.
Phiên Bản Pest: Đảm bảo rằng bạn đang sử dụng phiên bản mới nhất của Pest để có được các tính năng mới và sửa lỗi.

Kết Luận

Kiểm thử hồi quy hình ảnh trước đây thường cần các công cụ bên ngoài như Diffy hoặc Percy. Mặc dù những công cụ này rất tốt, nhưng Pest 4 cung cấp cho chúng ta một cách tiếp cận mới, cho phép chạy các kiểm thử hình ảnh ngay trong bộ kiểm thử PHP của chúng ta. Không còn phải chuyển đổi giữa các dịch vụ khác, không cần trả thêm chi phí, và không mất tập trung. Tất cả mọi thứ đều được tổ chức gọn gàng trong bộ kiểm thử của chúng ta.

Điều tuyệt vời nhất với tôi là cách thức hoạt động của nó rất đơn giản. Chỉ cần viết một kiểm thử, chạy nó, và Pest sẽ lưu lại ảnh chụp. Cú pháp cũng dễ dàng như RSpec và Jest, không phải là các lớp PHPUnit nặng nề. Đối với tôi, nó nhẹ nhàng và thú vị hơn.

Vì lý do này, tôi nghĩ rằng Pest 4 thực sự xứng đáng để thử nghiệm, đặc biệt là nếu bạn vẫn đang sử dụng PHPUnit. Và nếu bạn đã quen với Pest, thì tính năng kiểm thử hồi quy hình ảnh mới này có thể là một bổ sung mà bạn không biết là mình cần.

Sự Xuất Hiện của Kiểm Thử Hình Ảnh: Pest trong Laravel