دوره تست انیمیشن‌ها و افکت‌های UI همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره تست انیمیشن‌ها و افکت‌های UI

موضوع کلی: برنامه نویسی

موضوع میانی: تست فرانت‌اند

📋 سرفصل‌های دوره

• 1. مقدمه: چرا تست انیمیشن‌ها مهم است؟
• 2. تعریف انیمیشن و افکت UI در کانتکست تست
• 3. انواع انیمیشن‌ها: CSS Transitions, Keyframes, JavaScript
• 4. چالش‌های کلیدی در تست خودکار انیمیشن‌ها
• 5. اصول دوازده‌گانه انیمیشن دیزنی و ارتباط آن با تست
• 6. درک مفاهیم Timing, Easing, و Duration
• 7. تفاوت بین تست عملکردی و تست بصری انیمیشن
• 8. معرفی ابزارهای توسعه‌دهنده مرورگر برای انیمیشن‌ها
• 9. آماده‌سازی محیط توسعه برای تست
• 10. استراتژی‌های تست: دستی، نیمه‌خودکار و تمام خودکار
• 11. استفاده از پنل Animations در Chrome DevTools
• 12. تکنیک‌های کاهش سرعت انیمیشن برای بازبینی دستی
• 13. شناسایی پرش فریم (Jank) و مشکلات روانی اجرا
• 14. تست دستی انیمیشن‌ها در مرورگرهای مختلف
• 15. تست دستی روی دستگاه‌های با ابعاد و توان پردازشی متفاوت
• 16. ایجاد یک چک‌لیست برای بازبینی دستی انیمیشن‌ها
• 17. مقدمه‌ای بر تست رگرسیون بصری (Visual Regression Testing)
• 18. مفاهیم پایه تست خودکار فرانت‌اند
• 19. معرفی فریمورک‌های تست: Cypress و Playwright
• 20. راه‌اندازی اولین پروژه تستی با Cypress
• 21. نوشتن اولین تست: باز کردن صفحه و بررسی وجود یک المان
• 22. دستورات پایه‌ای Cypress: visit, get, should
• 23. تعامل با المان‌ها: click, type, hover
• 24. درک مفهوم همزمانی (Asynchronicity) در Cypress
• 25. استفاده از cy.wait() و خطرات آن
• 26. استراتژی‌های انتظار صحیح برای شروع و پایان انیمیشن
• 27. تست یک انیمیشن ساده مبتنی بر CSS Transition
• 28. تست ویژگی‌های CSS قبل و بعد از انیمیشن
• 29. استفاده از have.css برای اعتبارسنجی استایل‌ها
• 30. تست یک انیمیشن مبتنی بر CSS Keyframes
• 31. تأیید نام انیمیشن و مدت زمان اجرای آن
• 32. گرفتن اسکرین‌شات در نقاط کلیدی انیمیشن با Cypress
• 33. مقدمه‌ای بر Snapshot Testing
• 34. پیاده‌سازی تست اسنپ‌شات بصری با cypress-image-snapshot
• 35. مدیریت و آپدیت اسنپ‌شات‌های مرجع
• 36. کنترل زمان در تست‌ها با cy.clock() و cy.tick()
• 37. شبیه‌سازی گذر زمان برای تست انیمیشن‌های طولانی
• 38. تست انیمیشن‌های فعال‌شونده با رویداد (Event-driven)
• 39. تست افکت‌های Hover و Focus
• 40. تست انیمیشن‌های باز و بسته شدن Modal یا Dropdown
• 41. تست انیمیشن‌های پیچیده و زنجیره‌ای (Chained Animations)
• 42. رهگیری درخواست‌های شبکه که منجر به انیمیشن می‌شوند
• 43. نوشتن دستورات سفارشی (Custom Commands) برای تست انیمیشن
• 44. الگوهای طراحی برای تست‌های انیمیشن قابل نگهداری
• 45. روش‌های مقابله با تست‌های ناپایدار (Flaky Tests)
• 46. تست انیمیشن‌های مبتنی بر اسکرول (Scroll-triggered)
• 47. تست میکرو-تراکنش‌ها (Micro-interactions)
• 48. تست انیمیشن در کامپوننت‌های ایزوله
• 49. معرفی Storybook برای توسعه و تست کامپوننت‌ها
• 50. نوشتن Story برای کامپوننت‌های انیمیشنی
• 51. ادغام Cypress و Storybook برای تست کامپوننت
• 52. معرفی ابزارهای تخصصی رگرسیون بصری: Percy
• 53. راه‌اندازی و پیکربندی Percy در پروژه
• 54. اجرای تست‌های بصری و بازبینی تفاوت‌ها در داشبورد Percy
• 55. معرفی Applitools و مقایسه آن با Percy
• 56. استفاده از Playwright برای تست انیمیشن
• 57. قابلیت‌های ضبط ویدیو و Trace در Playwright
• 58. مقایسه Cypress و Playwright برای تست انیمیشن
• 59. استراتژی‌های خاص برای تست انیمیشن‌های CSS Transition
• 60. استراتژی‌های خاص برای تست انیمیشن‌های CSS Keyframe
• 61. تست انیمیشن‌های مبتنی بر Web Animations API
• 62. تست انیمیشن‌های تولید شده توسط کتابخانه‌های جاوااسکریپت (مانند GSAP)
• 63. شبیه‌سازی Timeline در تست‌های GSAP
• 64. تست انیمیشن در فریمورک‌های مدرن: React (Framer Motion)
• 65. تست انیمیشن در فریمورک‌های مدرن: Vue.js (Transition Component)
• 66. تست انیمیشن در فریمورک‌های مدرن: Svelte (Transitions)
• 67. مقدمه‌ای بر تست انیمیشن‌های SVG
• 68. اعتبارسنجی تغییرات attribute در المان‌های SVG
• 69. تست انیمیشن‌های Lottie
• 70. چالش‌های تست انیمیشن‌های Canvas و WebGL
• 71. استراتژی‌های تست مبتنی بر پیکسل برای Canvas
• 72. مفهوم عملکرد (Performance) در انیمیشن
• 73. اندازه‌گیری نرخ فریم بر ثانیه (FPS) به صورت خودکار
• 74. استفاده از Lighthouse برای ارزیابی عملکرد انیمیشن
• 75. شناسایی گلوگاه‌های عملکرد با پنل Performance در DevTools
• 76. تأثیر انیمیشن بر Cumulative Layout Shift (CLS)
• 77. تست برای جلوگیری از تغییرات ناخواسته Layout
• 78. بهترین شیوه‌ها: استفاده از transform و opacity
• 79. مفهوم دسترسی‌پذیری (Accessibility) در انیمیشن‌ها
• 80. معرفی مدیا کوئری prefers-reduced-motion
• 81. پیاده‌سازی تست برای حالتی که کاربر حرکت کمتر را ترجیح می‌دهد
• 82. اطمینان از اینکه انیمیشن‌ها باعث گیرافتادن فوکوس کیبورد نمی‌شوند
• 83. تست خوانایی متن در حین اجرای انیمیشن‌های پس‌زمینه
• 84. ادغام تست‌های انیمیشن در پایپ‌لاین CI/CD
• 85. پیکربندی GitHub Actions برای اجرای تست‌ها
• 86. اجرای تست‌های Cypress در حالت Headless
• 87. مدیریت اسنپ‌شات‌های بصری در Git (با استفاده از Git LFS)
• 88. تولید گزارش‌های تست (Test Reports)
• 89. تحلیل نتایج و خطاهای تست‌های بصری
• 90. تنظیم اعلان (Notification) برای شکست تست‌ها
• 91. استراتژی‌های اجرای موازی تست‌ها برای افزایش سرعت
• 92. مطالعه موردی: تست کامل یک انیمیشن Loading Spinner
• 93. مطالعه موردی: تست یک افکت Parallax هنگام اسکرول
• 94. مطالعه موردی: تست انیمیشن‌های یک اسلایدر تصویر
• 95. مطالعه موردی: تست انیمیشن‌های نمودار (Chart Animations)
• 96. اشتباهات رایج در نوشتن تست برای انیمیشن‌ها
• 97. ساختاردهی و سازماندهی مجموعه تست‌های انیمیشن
• 98. جمع‌بندی بهترین شیوه‌ها در تست انیمیشن و افکت‌های UI
• 99. نگاهی به آینده تست انیمیشن و ابزارهای نوظهور
• 100. **سناریوهای پیشرفته تست: تست انیمیشن‌های مبتنی بر داده، تست انیمیشن‌های وابسته به وضعیت و تست انیمیشن‌های در تعامل با API.**