5 بدائل مجانية لـ Applitools لاختبار الانحدار البصري

يُعد Applitools أداة قوية للاختبار البصري، لكن نموذج تسعيره — القائم على Test Units مع أسعار غير معلنة — لا يناسب جميع الميزانيات. لحسن الحظ، توجد بدائل مجانية تتيح البدء في الاختبار البصري دون أي استثمار أولي.

فيما يلي 5 بدائل لـ Applitools، ولكل منها نقاط قوتها وحدودها.

1. BackstopJS

ما هو

BackstopJS هو أداة مفتوحة المصدر لاختبار الانحدار البصري تعمل عبر سطر الأوامر. تلتقط لقطات شاشة لتطبيقك وتقارنها بكسلاً بكسل لاكتشاف الاختلافات.

ما يتميز به

مجاني بالكامل: مشروع مفتوح المصدر برخصة MIT
قابل للأتمتة: يندمج بسهولة في خطوط أنابيب CI/CD
إعداد مرن: يسمح بتحديد سيناريوهات اختبار دقيقة باستخدام محددات CSS
متعدد المتصفحات: يستخدم Puppeteer أو Chromium في الخلفية
توليد التقارير: ينتج تقارير بصرية مع إبراز الاختلافات

مثال على الإعداد

فيما يلي مثال على إعداد BackstopJS لاختبار صفحة رئيسية:

{
  "id": "mon_site",
  "viewports": [
    { "label": "desktop", "width": 1280, "height": 720 },
    { "label": "mobile", "width": 375, "height": 667 }
  ],
  "scenarios": [
    {
      "label": "Page d'accueil",
      "url": "https://monsite.com",
      "referenceUrl": "https://monsite.com",
      "selectors": ["header", "main", "footer"],
      "delay": 500
    }
  ]
}

يلتقط هذا الإعداد الترويسة والمحتوى الرئيسي وتذييل الصفحة في وضعَي سطح المكتب والهاتف المحمول. يقوم خيار delay بالانتظار 500 مللي ثانية قبل الالتقاط، وهو مفيد للصفحات التي تحتوي على رسوم متحركة أو تحميلات غير متزامنة.

حالات استخدام ملموسة

يتفوق BackstopJS في عدة حالات:

التحقق بعد إعادة تصميم CSS: بعد تحديث إطار عمل CSS الخاص بك (Tailwind، Bootstrap)، قم بتشغيل BackstopJS للتأكد من أن التخطيط لم يتغير بشكل غير متوقع.
اختبارات التصميم المتجاوب: بفضل viewports القابلة للتخصيص، يمكنك التحقق من أن موقعك يُعرض بشكل صحيح على جميع أحجام الشاشات.
المراقبة المستمرة: بدمجه مع مهمة cron أو webhook، يمكن لـ BackstopJS مراقبة موقع الإنتاج الخاص بك وتنبيهك عند اكتشاف تغيير بصري.

حدوده

تقني: يتطلب مهارات في JavaScript وسطر الأوامر
يتطلب التثبيت: يجب تثبيت Node.js وتهيئة البيئة
الصيانة: يجب تحديث سيناريوهات الاختبار يدوياً عند تطور الموقع
بدون ذكاء اصطناعي: المقارنة بكسلاً بكسل بحتة، مما يُولّد إنذارات كاذبة

متى يُستخدم

يناسب BackstopJS فرق التطوير التي تمتلك مهارات تقنية وترغب في حل مجاني وقابل للتخصيص. يلائم بشكل خاص المشاريع التي تحتاج إلى تحكم كامل في الإعداد.

2. Percy (نسخة مفتوحة المصدر)

ما هو

Percy، الذي طوّرته BrowserStack، يقدم نسخة مفتوحة المصدر من أداته للاختبار البصري. يعمل Percy كخدمة تلتقط وتقارن لقطات الشاشة بشكل آلي.

ما يتميز به

تكامل CI/CD أصلي: يتكامل Percy مع GitHub Actions وCircleCI وTravis CI وغيرها الكثير
واجهة ويب تعاونية: يمكن للفرق مراجعة التغييرات البصرية معاً
إدارة الفروع: ترتبط التغييرات البصرية بطلبات السحب
SDKs متعددة: يدعم Selenium وCypress وPlaywright وPuppeteer وRuby Capybara

حدوده

الخطة المجانية محدودة: النسخة المجانية مخصصة للمشاريع مفتوحة المصدر أو لديها حدود شهرية لعدد لقطات الشاشة
اعتماد على السحابة: تُخزّن لقطات الشاشة على خوادم Percy
إعداد تقني: يتطلب تثبيت SDK وتعديل شيفرة الاختبار

مثال على التكامل مع GitHub Actions

يتكامل Percy مباشرة في سير عمل CI/CD. فيما يلي مثال على إعداد GitHub Actions:

name: Visual Testing
on: [push, pull_request]
jobs:
  percy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run test:visual
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

مع هذا الإعداد، يؤدي كل push أو pull request إلى تشغيل الاختبارات البصرية. يقارن Percy لقطات الشاشة بالـ baseline ويعرض الاختلافات مباشرة في واجهة طلب السحب.

حالات استخدام ملموسة

مراجعة طلبات السحب: يُبلّغ Percy عن التغييرات البصرية مباشرة في الـ PR، مما يتيح للمراجعين رؤية الأثر البصري للشيفرة.
أنظمة التصميم: الفرق التي تصون مكتبات المكونات تستخدم Percy للتحقق من أن تحديثات المكونات لا تُفسد المظهر القائم.
المشاريع مفتوحة المصدر: تتيح الخطة المجانية للمشاريع مفتوحة المصدر للمساهمين التحقق بصرياً من مساهماتهم.

متى يُستخدم

يُعد Percy ملائماً للمشاريع مفتوحة المصدر أو الفرق التي تستخدم BrowserStack بالفعل وترغب في تكامل سلس ضمن سير عمل التطوير.

3. Playwright Screenshots

ما هو

Playwright، إطار عمل أتمتة المتصفحات من Microsoft، يقدم ميزات أصلية لالتقاط الشاشة والمقارنة البصرية. إنه حل مدمج، دون الحاجة إلى تثبيت أداة إضافية.

ما يتميز به

موجود أصلاً في مجموعة أدواتك: إذا كنت تستخدم Playwright لاختباراتك الوظيفية، فالالتقاط مجاني
متعدد المتصفحات: يدعم Chromium وFirefox وWebKit بشكل أصلي
مقارنة مدمجة: تقوم الدالة expect(page).toHaveScreenshot() بالمقارنة التلقائية للقطات الشاشة
مجاني ومفتوح المصدر: Playwright مرخّص بموجب Apache 2.0

حدوده

مقارنة أساسية: بدون ذكاء اصطناعي، مقارنة بكسلاً بكسل فقط
إعداد يدوي: يجب كتابة شيفرة الاختبار لكل صفحة يُراد التحقق منها
حساسية: الاختلافات في anti-aliasing أو عرض الخطوط تُولّد إنذارات كاذبة
لا توجد واجهة مراجعة: لا توجد لوحة تحكم تعاونية لعرض الاختلافات

مثال على اختبار باستخدام Playwright

const { test, expect } = require('@playwright/test');

test('Page d\'accueil - capture visuelle', async ({ page }) => {
  await page.goto('https://monsite.com');
  await expect(page).toHaveScreenshot('accueil-desktop.png');
});

test('Page d\'accueil - version mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://monsite.com');
  await expect(page).toHaveScreenshot('accueil-mobile.png');
});

ينشئ التنفيذ الأول لقطات الشاشة المرجعية. تقوم التنفيذات اللاحقة بمقارنة اللقطات الجديدة بالـ baseline تلقائياً. في حال وجود اختلاف، يُولّد Playwright تقرير مقارنة.

حالات استخدام ملموسة

اختبارات مكونات React/Vue/Angular: يستطيع Playwright التقاط مكونات فردية إلى جانب الصفحات الكاملة، وهو مثالي لأنظمة التصميم.
التحقق متعدد المتصفحات: يُنفَّذ الاختبار نفسه على Chromium وFirefox وWebKit دون تعديل، مما يضمن الاتساق البصري بين المتصفحات.
اختبار الحالات الديناميكية: بدمج الإجراءات (النقر، ملء نموذج) مع الالتقاطات، يمكنك التحقق بصرياً من حالات مختلفة لواجهة (نموذج فارغ، مع أخطاء، مع نجاح).

متى يُستخدم

يُعد Playwright Screenshots مثالياً إذا كنت تستخدم Playwright بالفعل وترغب في إضافة مستوى من التحقق البصري دون أداة إضافية.

4. LambdaTest (الطبقة المجانية)

ما هو

LambdaTest منصة اختبار سحابية تقدم ضمن ميزاتها الأخرى الاختبار البصري. تتيح الخطة المجانية اكتشاف قدرات المنصة.

ما يتميز به

منظومة متكاملة: يتجاوز LambdaTest الاختبار البصري ليشمل الاختبار الوظيفي وإمكانية الوصول والاختبار على الأجهزة المحمولة الحقيقية
متعدد المتصفحات على السحابة: وصول إلى أكثر من 3000 مجموعة متصفح/نظام تشغيل
تكاملات عديدة: CI/CD، مديرو الاختبار، أدوات التعاون
خطة مجانية سخية: تسمح بالاختبار ضمن حدود معقولة

حدوده

حدود الخطة المجانية: عدد دقائق ولقطات شاشة محدود شهرياً
تعقيد: قد يكون ثراء المنظومة مُرعباً للمبتدئين
SDK مطلوب: يبقى التكامل التقني مطلوباً لأتمتة الاختبارات البصرية

حالات استخدام ملموسة

اختبارات متعددة المتصفحات: إذا كان تطبيقك يجب أن يعمل على Chrome وFirefox وSafari وEdge، يتيح LambdaTest التقاط لقطات شاشة على كل من هذه المنصات دون بنية تحتية محلية.
اختبارات إمكانية الوصول: يدمج LambdaTest فحوصات إمكانية الوصول (WCAG) إلى جانب الاختبار البصري، مما يتيح تحكماً مزدوجاً.
فرق ذات قيود أمنية: يقدم LambdaTest ميزات اختبار على بيئات مؤمّنة، وهو مفيد للشركات ذات سياسات الأمان الصارمة.

متى يُستخدم

يناسب LambdaTest الفرق التي ترغب في منصة شاملة والمستعدة للاستثمار في خطة مدفوعة مع نمو احتياجاتها.

5. Delta-QA

ما هو

Delta-QA حل للاختبار البصري مصمم للبساطة. على عكس الأدوات الأخرى في هذه القائمة، صُمم Delta-QA للفرق التي تريد البدء في الاختبار البصري دون مهارات تقنية.

ما يتميز به

لا يحتاج إلى تثبيت: لا SDK، لا Node.js، لا إعداد تقني
لا يتطلب أي مهارات تقنية: لا حاجة لمعرفة البرمجة أو فهم خطوط أنابيب CI/CD
واجهة بديهية: يُشغَّل اختبار بصري ببضع نقرات
بدون تدريب: لا منحنى تعلم، لا وثائق تقنية لاستيعابها

حدوده

حل أحدث: منظومة التكاملات في نمو مستمر
نهج مختلف: يُفضّل Delta-QA البساطة على التخصيص التقني المتقدم

متى يُستخدم

Delta-QA هو الحل المثالي إذا كنت تسعى للبدء في الاختبار البصري دون استثمار في الوقت أو التدريب أو المهارات التقنية. إنها الأداة للفرق التي تريد نتائج فورية.

جدول مقارن

المعيار	BackstopJS	Percy (OSS)	Playwright	LambdaTest	Delta-QA
السعر	مجاني	مجاني (OSS)	مجاني	طبقة مجانية	مجاني
يحتاج تثبيت	نعم	نعم	نعم	نعم	لا
مهارات تقنية	مطلوبة	مطلوبة	مطلوبة	مطلوبة	غير مطلوبة
تكامل CI/CD	نعم	نعم	نعم	نعم	نعم
واجهة تعاونية	لا	نعم	لا	نعم	نعم

كيف تختار؟

يعتمد الاختيار على سياقك:

أنت مطور وتريد تحكماً كاملاً: BackstopJS أو Playwright
أنت في مشروع مفتوح المصدر: Percy
تريد منصة متكاملة: LambdaTest
تريد البساطة، بدون شيفرة وبدون تدريب: Delta-QA

أسئلة ينبغي طرحها لاتخاذ القرار الصحيح

لتصفية قرارك، اطرح على نفسك هذه الأسئلة:

هل هناك شخص في فريقي يعرف البرمجة بـ JavaScript أو Python؟ إذا لا، استبعد BackstopJS وPlaywright وCypress Visual. توجّه نحو Delta-QA أو LambdaTest.
هل مشروعي مفتوح المصدر؟ إذا نعم، يقدم Percy وChromatic خططاً مجانية مخصصة.
هل أحتاج إلى الاختبار على هواتف ومتصفحات حقيقية؟ إذا نعم، فإن LambdaTest أو Percy (عبر BrowserStack) هما الخياران الأكثر اكتمالاً.
هل أستخدم إطار عمل اختبار بالفعل؟ إذا كنت على Playwright، أضف toHaveScreenshot(). إذا كنت على Cypress، استخدم إضافة snapshot. إذا كنت على Storybook، فإن Chromatic هو الخيار الطبيعي.
ما هي ميزانيتي على المدى البعيد؟ تتطلب الأدوات المجانية (BackstopJS، Playwright) وقتاً للصيانة. تُكلّف الأدوات المدفوعة (Percy، Chromatic، LambdaTest) مالاً لكنها تُقلّل عبء العمل. يقع Delta-QA بين الاثنين: لا تكلفة أولية، ولا صيانة تقنية.
هل يتعين عليّ تقديم حسابات لغير التقنيين؟ إذا كان مديرك أو عميلك يريد رؤية النتائج البصرية دون المرور بمطور، فإن واجهة ويب تعاونية (Percy، LambdaTest، Delta-QA) لا غنى عنها.

لماذا Delta-QA؟

من بين كل هذه البدائل، يتميز Delta-QA بنهجه البسيط جذرياً:

صفر تثبيت: لا SDK، لا اعتمادية، لا إعداد تقني
صفر مهارات مطلوبة: لا حاجة لتدريب على الاختبار الآلي، لا حاجة لـ TAU (Test Automation University)، لا حاجة لمعرفة JavaScript أو Python
سعر شفاف: لا Test Units، لا حسابات معقدة، لا مفاجآت
بداية فورية: يمكنك إطلاق أول اختبار بصري لك في بضع دقائق، لا في بضعة أيام

إذا سئمت من تعقيد أدوات الاختبار البصري، اكتشف Delta-QA على delta-qa.com. إنه البديل الأبسط للاختبار البصري.