Bạn đã biết Playwright là framework mạnh mẽ trong kiểm thử tự động end-to-end, kiểm thử API. Nhưng Playwright còn làm được nhiều hơn thế nữa. Trong bài viết này, mình và các bạn sẽ cùng nhau tìm hiểu ứng dụng Playwright trong kiểm thử trực quan – visual testing. Nào hãy bắt đầu cùng mình nhé!
Visual Testing Là Gì?
Visual testing là phương pháp kiểm thử để kiểm tra và xác minh các yếu tố trực quan của giao diện người dùng (UI) của ứng dụng, chẳng hạn như thiết kế phản hồi, sự khác biệt giữa các trình duyệt/thiết bị, bản địa hóa, nội dung động, v.v.
Thông thường, khi thực hiện visual testing, chúng ta sẽ so sánh base line (đường cơ sở) được quy định trước về giao diện người dùng chính xác của mình với giao diện người dùng sau khi triển khai các thay đổi code. Bạn có thể thực hiện visual testing theo cách thủ công hoặc tự động bằng các công cụ visual testing.
Các Khái Niệm Chính Về Visual Testing
Để hiểu khái niệm kiểm thử hồi quy trực quan, chúng ta hãy xem xét các khái niệm chính liên quan đến nó:
- So sánh hình ảnh: Để xác định những thay đổi giữa các lần lặp lại cũ hơn và mới hơn của các trang web, kiểm thử hồi quy trực quan sử dụng các kỹ thuật so sánh hình ảnh. Để thu hút sự chú ý đến bất kỳ thay đổi hoặc sự khác biệt trực quan nào, Playwright chụp ảnh màn hình và áp dụng các phương pháp phân biệt hình ảnh cho chúng.
- Thiết lập đường cơ sở – base line: Thiết lập đường cơ sở đòi hỏi phải thiết lập một điểm tham chiếu cho thiết kế trực quan của bản phát hành ban đầu của ứng dụng. Đường cơ sở này được sử dụng làm chuẩn mực để so sánh trong các lần lặp lại thử nghiệm sau.
- Quy trình làm việc tự động: Với Playwright, tự động hóa là điều cần thiết đối với thử nghiệm hồi quy trực quan vì nó giúp thực hiện các thử nghiệm nhiều lần và trơn tru trên nhiều thiết bị và trình duyệt khác nhau.
- Tích hợp hệ thống kiểm soát phiên bản: Bằng cách kết hợp các thử nghiệm hồi quy trực quan vào các hệ thống kiểm soát phiên bản, các nhóm phát triển có thể làm việc cùng nhau dễ dàng hơn và khả năng truy xuất được đảm bảo.
Các Bước Để Thực Hiện Visual Testing Với Playwright
Bước 1:
Thêm expect(page).toHaveScreenshot() vào tập lệnh kiểm tra trình duyệt của bạn. Ví dụ như sau:
test("login page", async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.waitForLoad();
//initial state
await expect(loginPage.loginFrame).toHaveScreenshot("initial-login-page.png");
//error state
await loginPage.loginButton.click();
await expect(loginPage.loginFrame).toHaveScreenshot("error-state.png");
});
Bước 2:
Chạy kiểm tra trình duyệt của bạn. Lần đầu tiên bạn chạy, bạn sẽ nhận được lỗi cho biết chưa có ảnh chụp nhanh/tham chiếu hình ảnh vàng nào tồn tại.
Error: A snapshot doesn’t exist at /Users/lanhnguyen/Downloads/MyProject/fullstack-learning/auto-test/src/tests/visual/login-page.spec.ts-snapshots/initial-login-page-chromium-darwin.png, writing actual.
Bước 3:
Trong lần chạy kiểm thử đầu tiên, ngoài thông báo lỗi không có ảnh tồn tại như đã đề cập trong bước 2, đồng thời trong thư mục chứa file kiểm thử sẽ tự tạo thêm 1 thư mục có tên tương ứng để chứa ảnh kiểm thử. Tên snapshot gồm 1 số thành phần:
- example-test-1 – tên tự động tạo của ảnh chụp nhanh.
- chromium-darwin – tên trình duyệt và nền tảng. Ảnh chụp màn hình khác nhau giữa các trình duyệt và nền tảng do cách hiển thị, phông chữ và nhiều thứ khác, vì vậy bạn sẽ cần các ảnh chụp nhanh khác nhau cho chúng.
Bước 4: Thực hiện kiểm thử khi có snapshot
Sau bước 3, từ lần kiểm thử sau trở đi, chúng ta sẽ lấy ảnh trong thư mục snapshot tương ứng với bài kiểm thử để chạy test.
Trong Playwright, report khi kiểm thử thất bại sẽ thông báo cho kiểm thử viên biết những sai khác như ví dụ sau đây.
Mình hi vọng bài viết hôm nay giúp ích được cho các bạn. Hẹn gặp lại bạn trong bài viết tiếp theo.
Happy testing!