Kiểm tra trạng thái giao diện người dùng và hoạt ảnh với Playwright
Cách viết các bài kiểm tra ổn định cho giao diện người dùng hoạt hình bằng Playwright: kiểm soát thời gian bằng page.clock, mô phỏng chuyển động giảm và chế độ tối cũng như ảnh chụp màn hình tắt hoạt ảnh.
Điểm chính
Làm cho các thử nghiệm hoạt ảnh mang tính quyết định: kiểm soát thời gian với page.clock, bao gồm bộ hẹn giờ, requestAnimationFrame và hiệu suất; mô phỏng cài đặt người dùng với page.emulateMedia({reduceMotion, colorScheme }); khẳng định các trạng thái thay vì các pixel hoạt hình giữa; và chụp ảnh màn hình với hình ảnh động bị tắt. Kiểm tra đường chuyển động giảm như trường hợp hạng nhất.
Tại sao các bài kiểm tra hoạt hình lại không ổn định
Hoạt ảnh phụ thuộc vào thời gian và thời gian thực khác nhau giữa các lần chạy và máy. Ảnh chụp màn hình được chụp sớm hoặc muộn 10 mili giây sẽ hiển thị một khung hình khác. Cách khắc phục là kiểm soát thời gian và cài đặt, đồng thời kiểm tra trạng thái hoạt ảnh di chuyển giữa thay vì từng khung hình riêng lẻ.
Kiểm soát thời gian
API đồng hồ của Playwright cho phép thử nghiệm cài đặt đồng hồ giả, sau đó tạm dừng, tua đi nhanh hoặc chạy thời gian trong một khoảng thời gian đã đặt. Nó bao gồm setTimeout, setInterval, requestAnimationFrame và hiệu suất, do đó, chẳng hạn, bạn có thể tua nhanh qua độ trễ tải và kiểm tra xem trạng thái thành công có xuất hiện hay không.
Mô phỏng cài đặt người dùng
page.emulateMedia() có thể đặt lessMotion thành "giảm" và colorScheme thành "tối" hoặc "sáng". Chạy các luồng phím với chuyển động giảm để xác nhận rằng không có gì quan trọng phụ thuộc vào hoạt ảnh và trong cả hai chủ đề để phát hiện các vấn đề về độ tương phản.
Ảnh chụp màn hình ổn định
Kiểm tra Playwright có thể so sánh ảnh chụp màn hình với mong đợi (trang).toHaveScreenshot() và các tùy chọn ảnh chụp màn hình bao gồm hoạt ảnh: "đã tắt", điều này dừng hoạt ảnh và chuyển tiếp của CSS để chụp. Sử dụng so sánh trực quan cho trạng thái kết thúc và xác nhận hành vi hoặc DOM hoặc khả năng truy cập.
Kiểm tra các thành phần dựa trên canvas
Hoạt ảnh canvas, chẳng hạn như hoạt ảnh được vẽ bởi thời gian chạy Lottie, Rive hoặc ExodeUI, không hiển thị trong DOM. Kiểm tra đầu vào mà mã của bạn gửi và các sự kiện mà nó nhận được, giữ các phần tử thực sự có thể truy cập được dọc theo khung vẽ và sử dụng ảnh chụp màn hình để kiểm tra trực quan sau khi kiểm soát được thời gian.
Đoạn mã triển khai thực tế
import { test, expect } from '@playwright/test';
test('save button shows success, also with reduced motion', async ({ page }) => {
await page.clock.install(); // fake timers + rAF
await page.emulateMedia({ reducedMotion: 'reduce' }); // test the calm path
await page.goto('/settings');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByRole('status')).toHaveText('Saving…');
await page.clock.runFor(2000); // skip the wait deterministically
await expect(page.getByRole('status')).toHaveText('Saved');
await expect(page).toHaveScreenshot('saved.png', { animations: 'disabled' });
});Nguyên tắc chính cần nhớ
- Kiểm soát thời gian bằng page.clock (bộ hẹn giờ, requestAnimationFrame, hiệu suất)
- Mô phỏng giảmMotion và colorScheme với page.emulateMedia
- Khẳng định về trạng thái và văn bản có thể truy cập, không phải pixel hoạt ảnh ở giữa
- Ảnh chụp màn hình có hình động: "bị vô hiệu hóa"
- Kiểm tra đường chuyển động giảm như trường hợp hạng nhất
Câu hỏi thường gặp
Nguồn
- Clock — Tài liệu Playwright
- Page.emulateMedia and screenshot options — Tài liệu Playwright
- Visual comparisons — Tài liệu Playwright