📋 محتويات الصفحة
📖 الوصف
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
قد يعجبك أيضاً
API Testing
⭐أدوات اختبار APIs
Chai
⭐مكتبة Assertion لـ JavaScript
Chromatic
⭐منصة الاختبار البصري لـ Storybook
Cypress
⭐إطار اختبار End-to-End حديث
Detox
⭐إطار اختبار End-to-End للموبايل
Jest
⭐إطار اختبار JavaScript شامل