Giới thiệu về Applitools và demo ví dụ
Applitools là một công cụ kiểm thử giao diện (UI testing)
Applitools là gì?
Applitools là một công cụ kiểm thử giao diện (UI testing) hiện đại sử dụng AI và kỹ thuật thị giác máy tính (Visual AI) để phát hiện sự khác biệt giữa các phiên bản giao diện người dùng một cách chính xác và thông minh.
Khác với kiểm thử truyền thống so sánh pixel, Applitools dùng AI để hiểu giao diện giống như con người nhìn – phát hiện sai lệch có ý nghĩa, bỏ qua những thay đổi không ảnh hưởng đến trải nghiệm (như màu sắc hiển thị sai do trình duyệt, khác biệt font nhẹ…).
Tính năng nổi bật
|
Tính năng |
Mô tả |
|
Visual AI |
So sánh giao diện bằng mô hình AI để phát hiện lỗi thật, tránh lỗi giả |
|
Cross-browser & Responsive testing |
Kiểm tra UI trên nhiều trình duyệt và kích thước màn hình |
|
Tích hợp dễ dàng |
Hỗ trợ nhiều framework: Selenium, Cypress, Playwright, Appium, TestCafe… |
|
Screenshot thông minh |
Ghi lại ảnh chụp màn hình từng bước để so sánh qua các lần chạy |
|
Visual Grid |
Chạy kiểm thử song song trên hàng chục trình duyệt khác nhau trong vài giây |
Bước 1: Tìm đường dẫn có tên applitools sau đó nhấn free trial -> đăng ký bằng tài khoản gg hoặc githup
Bước 2: Đã đăng nhập thành công hãy nhấn demo with an export
Bước 3: Sẽ hiển thị màn hình bên dưới để nhập thông tin -> nhấn submit
Bước 4: Quay lại trang chủ applitools -> nhấn biểu tượng con người -> My API key -> copy API key (không công khai API key vì nó là duy nhất và tránh tình trạng bị mất dữ liệu khi bị đánh cắp)
Sau 4 bước để lấy API key ta mở VS CODE tạo 1 thư mục và đặt tên có đuôi .py nha
Bước 5: Cài 2 thư viện
pip install selenium
pip install eyes-selenium
Sau đó ta thực hiện như bên dưới để applitools chụp lại giao diện kiểm thử của link trang web mình cần
Khi chạy nó sẽ chụp full từ đầu đến cuối trang chủ htpp://xaydungphanmem.com và thực hiện thành công có chữ Test passed và đường dẫn như bên dưới
Bạn copy đường dẫn như hình -> dán vào GG
Sẽ vào lại trang có test mà bạn đã chạy kiểm thử.
Đây là ảnh baseline đầu tiên, nên bạn không cần làm gì thêm.
Lần chạy sau, Applitools sẽ so sánh ảnh mới với ảnh baseline này để phát hiện thay đổi.
Bạn chỉ cần:
· Nhấn vào ảnh giao diện để xem chi tiết từng phần (click hình preview).
· Kiểm tra xem giao diện có đầy đủ, không lỗi hiển thị không.
Nếu giao diện có thay đổi:
- Applitools sẽ highlight vùng khác biệt (đỏ, cam).
- Bạn sẽ thấy test ở trạng thái: Unresolved.
Bạn cần:
- Accept (chấp nhận) nếu đó là thay đổi đúng → Cập nhật ảnh baseline.
- Reject nếu giao diện sai → Báo bug hoặc rollback
Khi bạn chạy lại đoạn code kiểm thử này lần sau, Applitools sẽ tự động so sánh giao diện hiện tại của trang web (ảnh chụp mới) với ảnh giao diện ở lần chạy trước (baseline) để phát hiện bất kỳ sự thay đổi nào về giao diện
XƯỞNG THỰC TẬP PLT SOLUTIONS www.youtube.com/@pltsolutions3010
Uyển Nhi