Kiểm thử Hình ảnh Tự động với Selenium và Applitools

Trong thế giới phát triển ứng dụng web và di động hiện đại, việc cung cấp trải nghiệm người dùng mượt mà cũng quan trọng không kém so với việc đảm bảo tính đúng đắn về chức năng. Trong khi kiểm thử chức năng truyền thống tập trung vào việc xác minh các nút hoạt động, các biểu mẫu gửi đúng cách và các trang tải như mong đợi, nó thường bỏ qua một khía cạnh quan trọng - cách mọi thứ hiển thị trên màn hình. Đây là lúc kiểm thử hình ảnh xuất hiện.

Visual Testing là gì?

Kiểm thử hình ảnh là một loại kiểm thử phần mềm đảm bảo rằng giao diện người dùng (UI) của một ứng dụng xuất hiện chính xác với người dùng trên các trình duyệt, thiết bị và kích thước màn hình khác nhau. Khác với kiểm thử chức năng, kiểm thử hình ảnh tập trung vào việc xác định các khuyết điểm hình ảnh như các phần tử không căn chỉnh, không nhất quán về phông chữ, bố cục bị hỏng hoặc sự không khớp về màu sắc.

Tại sao kiểm thử chức năng truyền thống bỏ qua các lỗi hình ảnh?

Các công cụ kiểm thử chức năng như Selenium, Cypress, và Playwright rất tốt trong việc xác minh chức năng - đảm bảo rằng các nút hoạt động, các biểu mẫu gửi đúng cách và các phép toán trả về kết quả mong đợi. Tuy nhiên, chúng không kiểm tra cách mà các phần tử hiển thị trên màn hình.

Một số giới hạn của kiểm thử chức năng trong việc phát hiện các vấn đề giao diện:

• Các vấn đề UI ở cấp độ pixel không được phát hiện (ví dụ: văn bản chồng lên nhau, kích thước phông chữ không chính xác).
• Các sự không nhất quán giữa các trình duyệt không được phát hiện (ví dụ: một bố cục bị hỏng trong Safari nhưng hoạt động tốt trong Chrome).
• Các biến thể nội dung động (quảng cáo, pop-up) có thể làm gián đoạn bố cục, nhưng các bài kiểm tra chức năng sẽ không phát hiện những thay đổi tinh tế này.
• Các vấn đề về tính phản hồi (ví dụ: một menu hiển thị không chính xác trên màn hình nhỏ hơn) thường bị bỏ qua trừ khi được lập trình cụ thể vào các bài kiểm tra.

Lợi ích của Kiểm thử Hình ảnh

Cách Kiểm thử Hình ảnh Cải thiện Tính nhất quán UI và Trải nghiệm Người dùng:

Các công cụ kiểm thử hình ảnh như Applitools giúp duy trì một cái nhìn và cảm nhận nhất quán trên tất cả các thành phần UI. Bằng cách tích hợp xác minh hình ảnh được hỗ trợ bởi AI, các nhóm có thể:

• Đảm bảo tính nhất quán UI: Phát hiện những thay đổi không mong muốn về UI trên các màn hình, trình duyệt và thiết bị khác nhau.
• Nhận diện sớm các vấn đề bố cục: Tìm kiếm các vấn đề như các phần tử bị ẩn, các phần chồng chéo, hoặc các lưới bị hỏng trước khi chúng đến sản xuất.
• Cải thiện quy trình phát triển: Cung cấp phản hồi nhanh chóng cho các nhà thiết kế, nhà phát triển và người kiểm thử, giảm thiểu vòng lặp lặp lại.
• Nâng cao nhận thức thương hiệu: Một UI chính xác và đẹp mắt tăng cường niềm tin và sự tham gia của khách hàng.

Giới thiệu về Applitools: Xác minh Hình ảnh được hỗ trợ bởi AI

Applitools Eyes là một nền tảng kiểm thử hình ảnh được hỗ trợ bởi AI, mở rộng khả năng của Selenium bằng cách thực hiện các so sánh hình ảnh thông minh. Khác với các công cụ so sánh pixel-by-pixel truyền thống, Applitools sử dụng thị giác máy tính và AI để xác định các khuyết tật UI thực sự trong khi bỏ qua những khác biệt không quan trọng, chẳng hạn như anti-aliasing hoặc các biến thể nhỏ trong việc hiển thị.

Tính năng chính của Applitools:

• So sánh Hình ảnh được hỗ trợ bởi AI: Phát hiện ngay cả những khác biệt nhỏ nhất trong UI trong khi bỏ qua các biến thể không liên quan.
• So sánh Hình ảnh Cơ sở: Lưu trữ các ảnh chụp màn hình tham chiếu (cơ sở) và so sánh các lần chạy thử nghiệm mới để phát hiện những thay đổi UI không mong đợi.
• Kiểm thử Nhiều Trình duyệt và Thiết bị: Đảm bảo rằng giao diện UI nhất quán trên Chrome, Firefox, Edge, Safari, các trình duyệt di động và ứng dụng gốc.
• So sánh Khu vực Thông minh: Cho phép người kiểm thử bỏ qua nội dung động (chẳng hạn như thời gian, quảng cáo hoặc biểu ngữ quay vòng) để tránh các thất bại không cần thiết.
• Quản lý Thử nghiệm Thông minh: Sử dụng AI để phân loại các thay đổi (có chủ ý so với không có chủ ý), giảm thiểu việc bảo trì thử nghiệm thủ công.
• Tích hợp CI/CD và Đám mây: Tích hợp liền mạch với Jenkins, GitHub Actions, Azure DevOps và các công cụ CI/CD khác cho kiểm thử hình ảnh tự động trong các pipeline.

Cách Applitools Bổ sung Cho Selenium với Các Xác Nhận Hình Ảnh

Bằng cách tích hợp Applitools vào Selenium, các nhà kiểm thử có thể mở rộng các bài kiểm tra chức năng của Selenium để bao gồm xác minh hình ảnh, đảm bảo rằng cả hành vi và diện mạo UI đều được xác thực.

Cách tích hợp hoạt động:

1. Selenium Tự động hóa Hành động của Người dùng - Selenium thực hiện các bước chức năng như mở một trang web, nhấp vào các nút, và gửi các biểu mẫu.
2. Applitools Chụp Ảnh Hình ảnh - Sau mỗi bước quan trọng, Applitools chụp lại ảnh màn hình của toàn bộ trang hoặc các phần tử cụ thể.
3. Applitools So sánh Ảnh với Cơ sở - Hình ảnh mới sẽ tự động được so sánh với ảnh chụp màn hình cơ sở đã lưu từ các lần kiểm tra trước.
4. Phân tích Hỗ trợ AI Đánh dấu Khác biệt Hình ảnh - Nếu có bất kỳ thay đổi UI không mong đợi nào được phát hiện, Applitools sẽ đánh dấu chúng để xem xét trong bảng điều khiển Test Manager.

Cơ sở trong Applitools

Cơ sở là gì trong Applitools?

Cơ sở trong Applitools là một ảnh chụp màn hình tham chiếu của UI ứng dụng của bạn. Nó phục vụ như là diện mạo mong đợi của ứng dụng, và tất cả các lần chạy thử nghiệm trong tương lai sẽ được so sánh với nó để phát hiện các khác biệt hình ảnh.

Tại sao Cơ sở quan trọng?

1. Tính nhất quán UI: Xác minh rằng ứng dụng của bạn duy trì một cái nhìn đồng nhất giữa các phiên bản khác nhau.
2. Phát hiện lỗi hình ảnh: Nắm bắt các thay đổi UI không mong muốn, chẳng hạn như các phần tử không đúng vị trí hoặc bị thiếu.
3. Khả năng tương thích giữa các trình duyệt: Xác định sự khác biệt trong việc hiển thị UI giữa các trình duyệt và thiết bị khác nhau.
4. Kiểm thử hồi quy: Đảm bảo rằng các thay đổi mới không làm hỏng UI hiện có.

Vòng đời của một Cơ sở trong Applitools

Vòng đời cơ sở bao gồm ba giai đoạn chính:

• Lần chạy thử nghiệm đầu tiên - Tạo Cơ sở
  Khi bạn chạy một bài kiểm tra Applitools lần đầu tiên, nó:
  • Chụp lại ảnh màn hình của UI.
  • Lưu ảnh này như là cơ sở trong bảng điều khiển Applitools.
  • Lưu trữ siêu dữ liệu như kích thước viewport, trình duyệt, hệ điều hành và tên bài kiểm tra để đảm bảo so sánh chính xác trong các lần chạy sau.

Ví dụ: Giả sử bạn đang kiểm thử một trang web thương mại điện tử nơi nút “Thêm vào giỏ” có màu xanh. Trong lần chạy thử nghiệm đầu tiên, Applitools chụp lại và lưu thiết kế này như là cơ sở.

• Các lần chạy tiếp theo - So sánh Ảnh với Cơ sở
  Trong các lần chạy thử nghiệm sau, Applitools:
  • Chụp lại một ảnh màn hình mới của trang web.
  • So sánh nó pixel-by-pixel với cơ sở đã lưu.
  • Nổi bật bất kỳ sự khác biệt nào (thay đổi màu sắc, phần tử bị thiếu, thay đổi bố cục, v.v.).

Ví dụ: Nếu một cập nhật CSS biến nút “Thêm vào giỏ” thành màu đỏ, Applitools sẽ phát hiện sự khác biệt và đánh dấu nó để xem xét.

Xử lý sự khác biệt - Chấp nhận hoặc Từ chối thay đổi

Khi Applitools phát hiện các thay đổi hình ảnh, người kiểm thử có ba tùy chọn:

• Chấp nhận thay đổi (Cập nhật Cơ sở)
  • Nếu thay đổi là mong đợi, phê duyệt ảnh chụp màn hình mới như là cơ sở.
  • Các lần chạy thử nghiệm tương lai sẽ so sánh với phiên bản đã cập nhật này.
• Từ chối thay đổi (Phát hiện lỗi)
  • Nếu thay đổi không mong đợi, báo cáo nó như một lỗi UI.
  • Các nhà phát triển có thể sửa chữa vấn đề trước khi đẩy các thay đổi lên sản xuất.
• Bỏ qua các sự khác biệt cụ thể (Các phần tử động)
  • Nếu các phần tử như quảng cáo, thời gian, hoặc nội dung do người dùng tạo thay đổi thường xuyên, bạn có thể đánh dấu chúng là các khu vực động để tránh các cảnh báo sai.

Ví dụ: Nếu nút “Thêm vào giỏ” chuyển sang màu đỏ thay vì màu xanh do một cập nhật thiết kế, người kiểm thử có thể chấp nhận điều này như là cơ sở mới. Nhưng nếu nút hoàn toàn biến mất, người kiểm thử sẽ từ chối thay đổi đó như một lỗi.

Các thuộc tính chính xác định một Cơ sở

Mỗi cơ sở được xác định duy nhất bằng nhiều thuộc tính:

• Tên bài kiểm tra
  • Mỗi bài kiểm tra hình ảnh có một tên duy nhất được gán trong Applitools.
  • Ví dụ: “Kiểm tra Hình ảnh Trang chính”
• Tên ứng dụng
  • Applitools liên kết các cơ sở với một ứng dụng cụ thể để tránh nhầm lẫn giữa các dự án.
  • Ví dụ: “Ứng dụng Thương mại Điện tử”

Kết luận

Kiểm thử hình ảnh là một phần quan trọng trong quy trình kiểm thử phần mềm hiện đại, giúp phát hiện các lỗi hình ảnh mà các bài kiểm tra chức năng không thể nhận biết. Kết hợp Selenium với Applitools không chỉ nâng cao chất lượng của ứng dụng mà còn đảm bảo trải nghiệm người dùng hoàn hảo. Hãy bắt đầu tích hợp kiểm thử hình ảnh vào quy trình phát triển của bạn ngay hôm nay để đảm bảo tính nhất quán và chất lượng của sản phẩm!

Câu hỏi thường gặp (FAQ)

1. Kiểm thử hình ảnh là gì?

Kiểm thử hình ảnh là quá trình xác minh rằng giao diện người dùng của ứng dụng hiển thị đúng trên các thiết bị và trình duyệt khác nhau.

2. Tại sao tôi nên sử dụng Applitools với Selenium?

Applitools giúp phát hiện các lỗi UI mà Selenium không thể tìm thấy, nâng cao chất lượng tổng thể của ứng dụng.

3. Làm thế nào để thiết lập Applitools cho dự án của tôi?

Bạn có thể tham khảo tài liệu chính thức của Applitools để được hướng dẫn chi tiết về cách tích hợp vào dự án của bạn.