📋 محتويات الصفحة
📖 الوصف
BackstopJS هي أداة رجعي بصري مفتوحة المصدر لاختبار الواجهات. تستخدم BackstopJS Puppeteer لإنشاء لقطات شاشة ومقارنتها بالمرجع لاكتشاف الاختلافات البصرية. يدعم BackstopJS: Visual Regression Testing، Multiple Viewports، و CI Integration. يوفر أيضاً تقرير HTML تفاعلي لعرض الاختلافات.
🎯 يستخدم في
مجالات استخدام هذه الأداة
•
Visual Regression
•
Component Testing
•
UI Testing
•
Screenshot Comparison
•
CI/CD Testing
✨ المميزات
أبرز مميزات هذه الأداة
✓
Easy Open Source
✓
easy Visual Diff
✓
easy Multiple Viewports
✓
easy CI/CD
✓
easy Reports
✓
easy Puppeteer
✓
easy Scenarios
⚠️ العيوب
نقاط يجب مراعاتها
×
قد يكون بطيئاً
×
Limited في CI
×
يحتاج تكوين
×
قد يكون معقداً
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// npm install -g backstopjs
// backstop init
// في backstop.json
{
"viewports": [
{ "label": "phone", "width": 320, "height": 480 },
{ "label": "tablet", "width": 1024, "height": 768 }
],
"scenarios": [
{
"label": "Homepage",
"url": "http://localhost:3000",
"selectors": ["header", "main"]
}
]
}
// backstop reference
// backstop test
// backstop approve
📚 أدوات أخرى في Testing
قد يعجبك أيضاً