Testen von UI-Zuständen und Animationen mit Playwright
So schreiben Sie stabile Tests für animierte Benutzeroberflächen mit Playwright: Steuern der Zeit mit page.clock, Emulieren von reduzierter Bewegung und dunklem Modus sowie Screenshots mit deaktivierten Animationen.
Kernaussage
Machen Sie Animationstests deterministisch: Steuern Sie die Zeit mit page.clock, das Timer, requestAnimationFrame und Leistung abdeckt; Emulieren Sie Benutzereinstellungen mit page.emulateMedia({ reduziertMotion, colorScheme }); Behauptung auf Zuständen statt auf Pixeln in der Mitte der Animation; und Screenshots mit deaktivierten Animationen machen. Testen Sie den bewegungsreduzierten Pfad als erstklassigen Fall.
Warum Animationstests unzuverlässig sind
Animationen sind zeitabhängig und die Echtzeit variiert zwischen Läufen und Maschinen. Ein Screenshot, der 10 Millisekunden zu früh oder zu spät aufgenommen wurde, zeigt ein anderes Bild. Die Lösung besteht darin, Zeit und Einstellungen zu steuern und die Zustände zu testen, zwischen denen sich Animationen bewegen, und nicht einzelne Frames.
Kontrollzeit
Mit der Clock-API von Playwright kann ein Test eine gefälschte Uhr installieren und dann für eine festgelegte Dauer anhalten, vorspulen oder laufen lassen. Es deckt setTimeout, setInterval, requestAnimationFrame und Leistung ab, sodass Sie beispielsweise nach einer Ladeverzögerung schnell vorspulen und überprüfen können, ob der Erfolgsstatus angezeigt wird.
Emulieren Sie Benutzereinstellungen
page.emulateMedia() kann reduzierte Bewegung auf „reduzieren“ und colorScheme auf „dunkel“ oder „hell“ setzen. Führen Sie Schlüsselflüsse mit reduzierter Bewegung aus, um sicherzustellen, dass nichts Wichtiges von der Animation abhängt, und in beiden Themen, um Kontrastprobleme zu erkennen.
Stabile Screenshots
Der Playwright-Test kann Screenshots mit „expect(page).toHaveScreenshot()“ vergleichen, und die Screenshot-Optionen umfassen Animationen: „deaktiviert“, wodurch CSS-Animationen und Übergänge für die Aufnahme gestoppt werden. Verwenden Sie visuelle Vergleiche für Endzustände und DOM- oder Zugänglichkeitszusicherungen für das Verhalten.
Testen von Canvas-basierten Komponenten
Canvas-Animationen, wie sie beispielsweise von den Laufzeiten Lottie, Rive oder ExodeUI gezeichnet werden, sind im DOM nicht sichtbar. Testen Sie die Eingaben, die Ihr Code sendet, und die Ereignisse, die er empfängt, bewahren Sie echte zugängliche Elemente neben der Leinwand auf und verwenden Sie Screenshots für visuelle Kontrollen nach Ablauf der Zeit.
Produktionsnahes Implementierungsbeispiel
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' });
});Wichtige Prinzipien
- Zeit mit page.clock steuern (Timer, requestAnimationFrame, Leistung)
- Emulieren Sie ReducedMotion und ColorScheme mit page.emulateMedia
- Behaupten Sie Zustände und zugänglichen Text, nicht Pixel in der Mitte der Animation
- Screenshot mit Animationen: „deaktiviert“
- Testen Sie den bewegungsreduzierten Pfad als erstklassigen Fall
Häufige Fragen
Quellen
- Clock — Playwright-Dokumente
- Page.emulateMedia and screenshot options — Playwright-Dokumente
- Visual comparisons — Playwright-Dokumente