UI állapotok és animációk tesztelése a Playwright segítségével
Stabil tesztek írása animált felhasználói felülethez a Playwright használatával: az idő szabályozása a page.clock segítségével, a csökkentett mozgás és a sötét mód emulálása, valamint képernyőképek letiltott animációkkal.
Core Takeaway
Tegye determinisztikussá az animációs teszteket: kontrollidő a page.clock segítségével, amely lefedi az időzítőket, a requestAnimationFrame-et és a teljesítményt; emulálja a felhasználói beállításokat a page.emulateMedia({ ReductionMotion, colorScheme }) segítségével; inkább az állapotokra érvényes, mint a középső animációs pixelekre; és készítsen képernyőképeket letiltott animációkkal. Tesztelje a csökkentett mozgási utat első osztályú esetként.
Miért bizonytalanok az animációs tesztek?
Az animációk az időtől függenek, a valós idő pedig futások és gépek között változik. A 10 ezredmásodperccel korábban vagy későn készített képernyőkép más képkockát mutat. A javítás az idő és a beállítások szabályozása, valamint az animációk közötti mozgás állapotának tesztelése, nem pedig az egyes képkockák között.
Lokalizációs idő
A Playwright Clock API-ja lehetővé teszi, hogy a teszt egy hamis órát telepítsen, majd egy meghatározott ideig szüneteltessen, gyorsuljon előre vagy futtasson. Lefedi a setTimeout, setInterval, requestAnimationFrame és a teljesítményt, így például gyorsan előretekerhet a betöltési késleltetésen túl, és ellenőrizheti a sikeres állapot megjelenését.
Felhasználói beállítások emulálása
A page.emulateMedia() beállíthatja a ReductionMotion-t "redukálásra", a colorScheme-et pedig "dark"-ra vagy "light"-ra. Futtassa a kulcsfolyamatokat csökkentett mozgással annak megerősítésére, hogy semmi fontos nem függ az animációtól, és mindkét témában a kontrasztproblémák észleléséhez.
Stabil képernyőképek
A Playwright teszt összehasonlítja a képernyőképeket a expect(page).toHaveScreenshot() értékkel, és a képernyőkép opciók közé tartoznak az animációk: „letiltva”, amely leállítja a CSS animációkat és átmeneteket a rögzítéshez. Használjon vizuális összehasonlításokat a végállapotokhoz, és DOM-ot vagy hozzáférhetőségi állításokat a viselkedéshez.
Vászon alapú komponensek tesztelése
A vászonanimációk, például a Lottie, Rive vagy ExodeUI futtatókörnyezetekkel rajzoltak, nem láthatók a DOM-ban. Tesztelje a kód által küldött bemeneteket és az általa fogadott eseményeket, tartsa a valódi hozzáférhető elemeket a vászon mellett, és használjon képernyőképeket vizuális ellenőrzésekhez, miután az idő ellenőrzése alatt áll.
Gyártási megvalósítási részlet
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' });
});Kulcs Principle, amit meg kell jegyezni
- Idő szabályozása a page.clock segítségével (időzítők, requestAnimationFrame, teljesítmény)
- Emulálja a ReductionMotion-t és a colorScheme-t a page.emulateMedia segítségével
- Állapotokra és hozzáférhető szövegekre vonatkozik, nem pedig a középső animációs képpontokra
- Képernyőkép animációkkal: "letiltva"
- Tesztelje a csökkentett mozgási utat első osztályú esetként
Gyakran Ismételt Kérdések
Források
- Clock — Playwright dok
- Page.emulateMedia and screenshot options — Playwright dok
- Visual comparisons — Playwright dok