Тестване на състояния на потребителския интерфейс и анимации с Playwright
Как да напиша стабилни тестове за анимиран потребителски интерфейс с Playwright: контролиране на времето с page.clock, емулиране на намалено движение и тъмен режим и екранни снимки с деактивирани анимации.
Ядро за вкъщи
Направете анимационните тестове детерминистични: контролирайте времето с page.clock, който обхваща таймери, requestAnimationFrame и производителност; емулиране на потребителски настройки с page.emulateMedia({reducedMotion, colorScheme}); утвърждаване на състояния, а не на пиксели в средата на анимацията; и правете екранни снимки с деактивирани анимации. Тествайте пътя с намалено движение като първокласен случай.
Защо анимационните тестове са нестабилни
Анимациите зависят от времето, а реалното време варира между сериите и машините. Екранна снимка, направена 10 милисекунди по-рано или по-късно, показва различен кадър. Поправката е да се контролира времето и настройките и да се тестват анимациите на състоянията, които се движат между отделните кадри.
Контролно време
Clock API на Playwright позволява тестово инсталиране на фалшив часовник и след това пауза, бързо превъртане напред или време за изпълнение за зададена продължителност. Той обхваща setTimeout, setInterval, requestAnimationFrame и производителност, така че можете например да превъртите бързо напред след забавяне на зареждането и да проверите дали се появява състоянието на успех.
Емулиране на потребителски настройки
page.emulateMedia() може да настроиreducedMotion на „намаляване“ и colorScheme на „тъмно“ или „светло“. Изпълнявайте ключови потоци с включено намалено движение, за да потвърдите, че нищо важно не зависи от анимацията, и в двете теми, за да уловите проблеми с контраста.
Стабилни екранни снимки
Playwright Test може да сравнява екранни снимки с expect(page).toHaveScreenshot(), а опциите за екранни снимки включват анимации: „забранено“, което спира CSS анимации и преходи за заснемане. Използвайте визуални сравнения за крайни състояния и DOM или твърдения за достъпност за поведение.
Тестване на компоненти, базирани на платно
Canvas анимациите, като тези, нарисувани от 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' });
});Ключове Principle, които трябва да запомните
- Контрол на времето с page.clock (таймери, requestAnimationFrame, производителност)
- Емулирайте намалено движение и colorScheme със page.emulateMedia
- Утвърждаване на състояния и достъпен текст, а не пиксели в средата на анимацията
- Екранна снимка с анимации: "забранено"
- Тествайте пътя с намалено движение като първокласен случай
Често задавани въпроси
Източници
- Clock — Playwright документи
- Page.emulateMedia and screenshot options — Playwright документи
- Visual comparisons — Playwright документи