🧪

BackstopJS

(3/5)
👁️ 4 مشاهدة
📅 02 Jul 2026
⚛️ React 💚 Vue.js 🅰️ Angular 🧡 Svelte 🌐 عام

مستوى الخبرة المطلوب:

🌱 مبتدئ ⚡ متوسط 🚀 محترف
🔗 زيارة الموقع الرسمي
3
تقييم المستخدمين
التصنيف 🧪 Testing
المشاهدات 4
تاريخ الإضافة 02/07/2026
آخر تحديث 02/07/2026

📖 الوصف

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

×

يحتاج تكوين

×

قد يكون معقداً

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code
// 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

قد يعجبك أيضاً