Testowanie stanów interfejsu użytkownika i animacji za pomocą Playwright
Jak napisać stabilne testy animowanego interfejsu użytkownika za pomocą Playwright: kontrolowanie czasu za pomocą page.clock, emulacja ograniczonego ruchu i trybu ciemnego oraz zrzuty ekranu z wyłączonymi animacjami.
Rdzeń na wynos
Spraw, aby testy animacji były deterministyczne: kontroluj czas za pomocą page.clock, który obejmuje liczniki czasu, requestAnimationFrame i wydajność; emuluj ustawienia użytkownika za pomocą page.emulateMedia({redMotion, colorScheme }); potwierdzaj stany, a nie piksele w połowie animacji; i rób zrzuty ekranu z wyłączonymi animacjami. Przetestuj ścieżkę o ograniczonym ruchu jako przypadek pierwszorzędny.
Dlaczego testy animacji są niestabilne
Animacje zależą od czasu, a czas rzeczywisty różni się w zależności od uruchomień i maszyn. Zrzut ekranu wykonany 10 milisekund wcześniej lub później pokazuje inną klatkę. Poprawka polega na kontrolowaniu czasu i ustawień oraz testowaniu stanów animacji poruszających się pomiędzy, a nie pojedynczymi klatkami.
Czas kontroli
Interfejs API zegara Playwright umożliwia testową instalację fałszywego zegara, a następnie wstrzymywanie, przewijanie do przodu lub uruchamianie na określony czas. Obejmuje setTimeout, setInterval, requestAnimationFrame i wydajność, dzięki czemu możesz na przykład przewinąć do przodu po opóźnieniu ładowania i sprawdzić, czy pojawił się stan powodzenia.
Emuluj ustawienia użytkownika
page.emulateMedia() może ustawić zredukowany ruch na „zmniejsz”, a colorScheme na „ciemny” lub „jasny”. Uruchom kluczowe przepływy ze zredukowanym ruchem, aby potwierdzić, że nic ważnego nie zależy od animacji, oraz w obu motywach, aby wychwycić problemy z kontrastem.
Stabilne zrzuty ekranu
Playwright Test może porównywać zrzuty ekranu za pomocą funkcji require(page).toHaveScreenshot(), a opcje zrzutów ekranu obejmują animacje: „disabled”, które zatrzymują animacje i przejścia CSS podczas przechwytywania. Użyj wizualnych porównań dla stanów końcowych i DOM lub asercji dostępności dla zachowania.
Testowanie komponentów opartych na kanwie
Animacje płótna, takie jak te rysowane przez środowiska wykonawcze Lottie, Rive lub ExodeUI, nie są widoczne w DOM. Testuj dane wejściowe wysyłane przez kod i odbierane przez niego zdarzenia, przechowuj rzeczywiście dostępne elementy obok płótna i używaj zrzutów ekranu do kontroli wizualnej po kontrolowaniu czasu.
Fragment wdrożenia produkcyjnego
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' });
});Klucz Principles do zapamiętania
- Kontroluj czas za pomocą page.clock (timery, requestAnimationFrame, wydajność)
- Emuluj zmniejszony ruch i colorScheme za pomocą page.emulateMedia
- Twierdź o stanach i dostępnym tekście, a nie pikselach w połowie animacji
- Zrzut ekranu z animacjami: „wyłączone”
- Przetestuj ścieżkę o ograniczonym ruchu jako przypadek pierwszorzędny
Często zadawane pytania
Źródła
- Clock — Dokumentacja Playwright
- Page.emulateMedia and screenshot options — Dokumentacja Playwright
- Visual comparisons — Dokumentacja Playwright