Wie man Animationen in Playwright automatisiert testet
Lernen Sie, wie Sie UI-Animationen und Zustandsmaschinen in Playwright testen: Flackerfreie Schnappschüsse, Emulation reduzierter Bewegung und Zeitsteuerung.
Kernaussage
Um Animationen in Playwright zuverlässig zu testen, kombinieren Sie zwei Modi: Schalten Sie Animationen für deterministische visuelle Schnappschüsse ohne Falschalarme ab, und testen Sie interaktives Verhalten, indem Sie mit page.waitForFunction() oder locator.toBeVisible() auf das Einpendeln der Zustandsmaschine warten. Prüfen Sie Barrierefreiheit via page.emulateMedia().
Das Problem visueller Tests bei laufender Animation
Screenshots während einer laufenden Animation führen zu ständigen Zufallsfehlern in der CI, weil Frames zwischen Durchläufen um Millisekunden abweichen. Playwright umgeht dies standardmäßig mit animations: 'disabled' bei Screenshots, was Elemente direkt in ihr Endbild zwingt.
Auf Federphysik und Zustandsmaschinen warten
Anders als feste CSS-Übergänge enden Federn, sobald ihre Geschwindigkeit unter eine Schwelle fällt. Um sicherzustellen, dass ein Dialog vollständig geöffnet ist, warten Sie auf das Stabilisieren der transform-Matrix oder prüfen Sie Status-Attribute.
- Nutzen Sie toHaveScreenshot({ animations: 'disabled' }) gegen CI-Flackern
- Emulieren Sie prefers-reduced-motion: 'reduce' für Barrierefreiheitstests
- Prüfen Sie Zustands-Attribute statt willkürlicher setTimeout-Pausen
- Verifizieren Sie ARIA-Eigenschaften wie aria-expanded statt nackter Pixel-Werte
prefers-reduced-motion in Playwright emulieren
Stellen Sie sicher, dass Ihre App Nutzerwünsche respektiert, indem Sie Tests mit page.emulateMedia({ reducedMotion: 'reduce' }) anlegen. Prüfen Sie, ob Dialoge ohne Wischbewegung sofort aufklappen.
Uhr-Virtualisierung für Zeitstrahl-Tests
Playwright ermöglicht das künstliche Vorspulen der Systemzeit mittels page.clock.fastForward('00:02'). So lassen sich mehrtaktige Jubel-Animationen in Millisekunden testen, ohne die CI-Laufzeit aufzublähen.
Wichtige Prinzipien
- Deaktivieren Sie CSS-Übergänge bei visuellen Schnappschüssen für stabile CI-Pipelines
- Prüfen Sie Zustands-Attribute (aria-expanded) statt starrer Wartezeiten
- Testen Sie Standard- und reduzierten Modus per emulateMedia
- Nutzen Sie Playwrights Uhrensteuerung zum schnellen Abspulen von Animationen
Häufige Fragen
Quellen
- Playwright Visual Comparisons — Microsoft
- Playwright Clock API — Microsoft