اختبار حالات واجهة المستخدم والرسوم المتحركة باستخدام Playwright
كيفية كتابة اختبارات مستقرة لواجهة المستخدم المتحركة باستخدام Playwright: التحكم في الوقت باستخدام page.clock، ومحاكاة الحركة المنخفضة والوضع المظلم، ولقطات الشاشة مع تعطيل الرسوم المتحركة.
الوجبات الجاهزة الأساسية
جعل اختبارات الرسوم المتحركة حتمية: التحكم في الوقت باستخدام page.clock، الذي يغطي الموقتات وrequestAnimationFrame والأداء؛ محاكاة إعدادات المستخدم باستخدام page.emulateMedia({ lowMotion, colorScheme }); التأكيد على الحالات بدلاً من وحدات البكسل المتوسطة للرسوم المتحركة؛ والتقاط لقطات شاشة مع تعطيل الرسوم المتحركة. اختبر مسار الحركة المنخفضة كحالة من الدرجة الأولى.
لماذا اختبارات الرسوم المتحركة غير مستقرة
تعتمد الرسوم المتحركة على الوقت، ويختلف الوقت الحقيقي بين التشغيل والآلات. تُظهر لقطة الشاشة التي تم التقاطها قبل 10 مللي ثانية أو متأخرة إطارًا مختلفًا. الحل هو التحكم في الوقت والإعدادات، واختبار الحالات التي تتحرك فيها الرسوم المتحركة بين الإطارات بدلاً من الإطارات الفردية.
وقت التحكم
تتيح واجهة برمجة التطبيقات Clock API الخاصة بـ Playwright اختبارًا لتثبيت ساعة مزيفة ثم إيقافها مؤقتًا أو تقديمها سريعًا أو تشغيلها لمدة محددة. وهو يغطي setTimeout وsetInterval وrequestAnimationFrame والأداء، بحيث يمكنك، على سبيل المثال، التقديم السريع بعد تأخير التحميل والتحقق من ظهور حالة النجاح.
محاكاة إعدادات المستخدم
يمكن لـpage.emulateMedia() ضبط حركة تقليل الحركة على "تقليل" وضبط نظام الألوان على "داكن" أو "فاتح". قم بتشغيل التدفقات الرئيسية مع حركة منخفضة للتأكد من أن لا شيء مهم يعتمد على الرسوم المتحركة، وفي كلا الموضوعين لاكتشاف مشاكل التباين.
لقطات ثابتة
يمكن لاختبار Playwright مقارنة لقطات الشاشة مع توقع (صفحة).toHaveScreenshot()، وتشمل خيارات لقطة الشاشة الرسوم المتحركة: "معطل"، والتي توقف الرسوم المتحركة والانتقالات CSS للالتقاط. استخدم المقارنات المرئية للحالات النهائية، وDOM أو تأكيدات إمكانية الوصول للسلوك.
اختبار المكونات القائمة على القماش
الرسوم المتحركة للوحة القماشية، مثل تلك التي تم رسمها بواسطة أوقات تشغيل 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، والأداء)
- محاكاة lowMotion وcolorScheme باستخدام page.emulateMedia
- التأكيد على الحالات والنص الذي يمكن الوصول إليه، وليس وحدات البكسل المتوسطة للرسوم المتحركة
- لقطة شاشة مع الرسوم المتحركة: "معطل"
- اختبر مسار الحركة المنخفضة كحالة من الدرجة الأولى
الأسئلة المتداولة
المصادر
- Clock — مستندات Playwright
- Page.emulateMedia and screenshot options — مستندات Playwright
- Visual comparisons — مستندات Playwright