Δοκιμή καταστάσεων διεπαφής χρήστη και κινούμενων εικόνων με το Playwright
Πώς να γράψετε σταθερές δοκιμές για κινούμενη διεπαφή χρήστη με το Playwright: έλεγχος της ώρας με page.clock, εξομοίωση μειωμένης κίνησης και σκοτεινής λειτουργίας και στιγμιότυπα οθόνης με απενεργοποιημένα κινούμενα σχέδια.
Core Takeaway
Κάντε τις δοκιμές κινούμενων σχεδίων ντετερμινιστικές: έλεγχος του χρόνου με το page.clock, το οποίο καλύπτει χρονόμετρα, requestAnimationFrame και απόδοση. εξομοίωση των ρυθμίσεων χρήστη με το page.emulateMedia({ μειωμένη κίνηση, colorScheme }); διεκδίκηση σε καταστάσεις και όχι σε εικονοστοιχεία μεσαίας κίνησης. και τραβήξτε στιγμιότυπα οθόνης με τα κινούμενα σχέδια απενεργοποιημένα. Δοκιμάστε τη διαδρομή μειωμένης κίνησης ως θήκη πρώτης κατηγορίας.
Γιατί οι δοκιμές κινούμενων σχεδίων είναι ξεφλουδισμένες
Τα κινούμενα σχέδια εξαρτώνται από το χρόνο και ο πραγματικός χρόνος ποικίλλει μεταξύ των τρεξίματος και των μηχανών. Ένα στιγμιότυπο οθόνης που τραβήχτηκε 10 χιλιοστά του δευτερολέπτου νωρίτερα ή αργά δείχνει διαφορετικό καρέ. Η λύση είναι ο έλεγχος του χρόνου και των ρυθμίσεων και ο έλεγχος της κίνησης των κινούμενων εικόνων μεταξύ των καταστάσεων και όχι μεταξύ μεμονωμένων καρέ.
Έλεγχος χρόνου
Το Clock API του Playwright επιτρέπει σε μια δοκιμή να εγκαταστήσει ένα ψεύτικο ρολόι και στη συνέχεια να κάνει παύση, γρήγορη προώθηση ή εκτέλεση χρόνου για μια καθορισμένη διάρκεια. Καλύπτει το setTimeout, το setInterval, το requestAnimationFrame και την απόδοση, ώστε να μπορείτε, για παράδειγμα, να κάνετε γρήγορη προώθηση μετά από μια καθυστέρηση φόρτωσης και να ελέγξετε την εμφάνιση της κατάστασης επιτυχίας.
Προσομοίωση ρυθμίσεων χρήστη
Η page.emulateMedia() μπορεί να ρυθμίσει το reduceMotion σε "reduce" και το colorScheme σε "dark" ή "light". Το πλήκτρο εκτέλεσης ρέει με μειωμένη κίνηση ενεργοποιημένη για να επιβεβαιώσει ότι τίποτα σημαντικό δεν εξαρτάται από την κινούμενη εικόνα και και στα δύο θέματα για να εντοπίσει προβλήματα αντίθεσης.
Σταθερά στιγμιότυπα οθόνης
Το Playwright Test μπορεί να συγκρίνει στιγμιότυπα οθόνης με το expect(page).toHaveScreenshot(), και οι επιλογές στιγμιότυπων οθόνης περιλαμβάνουν κινούμενα σχέδια: "disabled", που σταματά τις κινούμενες εικόνες και τις μεταβάσεις CSS για τη λήψη. Χρησιμοποιήστε οπτικές συγκρίσεις για τελικές καταστάσεις και ισχυρισμούς DOM ή προσβασιμότητας για συμπεριφορά.
Δοκιμή εξαρτημάτων που βασίζονται σε καμβά
Τα κινούμενα σχέδια καμβά, όπως αυτά που σχεδιάστηκαν από χρόνους εκτέλεσης Lottie, Rive ή ExodeUI, δεν είναι ορατά στο DOM. Δοκιμάστε τις εισόδους που στέλνει ο κώδικάς σας και τα συμβάντα που λαμβάνει, διατηρήστε πραγματικά προσβάσιμα στοιχεία δίπλα στον καμβά και χρησιμοποιήστε στιγμιότυπα οθόνης για οπτικούς ελέγχους μετά τον έλεγχο του χρόνου.
Απόσπασμα υλοποίησης παραγωγής
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' });
});Κλειδί Principles για να θυμάστε
- Έλεγχος της ώρας με το page.clock (χρονομετρητές, requestAnimationFrame, απόδοση)
- Εξομοίωση μειωμένης κίνησης και colorScheme με το page.emulateMedia
- Βεβαιωθείτε σε καταστάσεις και προσβάσιμο κείμενο, όχι σε εικονοστοιχεία μεσαίας κίνησης
- Στιγμιότυπο οθόνης με κινούμενα σχέδια: "disabled"
- Δοκιμάστε τη διαδρομή μειωμένης κίνησης ως θήκη πρώτης κατηγορίας
Συχνές Ερωτήσεις
Πηγές
- Clock — Έγγραφα Playwright
- Page.emulateMedia and screenshot options — Έγγραφα Playwright
- Visual comparisons — Έγγραφα Playwright