Тестування станів інтерфейсу користувача та анімації за допомогою Playwright
Як написати стабільні тести для анімованого інтерфейсу користувача за допомогою Playwright: контроль часу за допомогою page.clock, емуляція зменшеного руху та темного режиму та знімки екрана з вимкненою анімацією.
Основний винос
Зробіть тести анімації детермінованими: контролюйте час за допомогою page.clock, який охоплює таймери, requestAnimationFrame та продуктивність; емулювати налаштування користувача за допомогою page.emulateMedia({reducedMotion, colorScheme}); стверджувати про стани, а не проміжні пікселі анімації; і робити знімки екрана з вимкненою анімацією. Перевірте траєкторію зменшеного руху як першокласний випадок.
Чому тести анімації нестабільні
Анімація залежить від часу, а реальний час залежить від запусків і машин. Знімок екрана, зроблений на 10 мілісекунд раніше чи пізніше, показує інший кадр. Виправлення полягає в тому, щоб контролювати час і налаштування, а також перевіряти переміщення анімації станів між кадрами, а не окремими.
Контрольний час
API годинника Playwright дозволяє тесту встановити підроблений годинник, а потім призупинити, перемотати вперед або запустити час на встановлений час. Він охоплює setTimeout, setInterval, requestAnimationFrame та продуктивність, тому ви можете, наприклад, перемотати вперед після затримки завантаження та перевірити, чи з’явився стан успішного виконання.
Емуляція налаштувань користувача
page.emulateMedia() може встановити дляreducedMotion значення «зменшити», а для colorScheme значення «темний» або «світлий». Запустіть ключові потоки зі зниженим рухом, щоб підтвердити, що нічого важливого не залежить від анімації, і в обох темах, щоб виявити проблеми з контрастом.
Стабільні скріншоти
Playwright Test може порівнювати скріншоти за допомогою expect(page).toHaveScreenshot(), а параметри скріншотів включають анімацію: «вимкнено», що зупиняє анімацію CSS і переходи для захоплення. Використовуйте візуальні порівняння для кінцевих станів і DOM або твердження про доступність для поведінки.
Тестування компонентів на основі canvas
Анімація 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, продуктивність)
- Емулюйте reduceMotion і colorScheme за допомогою page.emulateMedia
- Стверджуйте про стани та доступний текст, а не проміжні пікселі анімації
- Скріншот з анімацією: "вимкнено"
- Перевірте траєкторію зменшеного руху як першокласний випадок
Часті запитання
Джерела
- Clock — Playwright документи
- Page.emulateMedia and screenshot options — Playwright документи
- Visual comparisons — Playwright документи