Skip to main content

اختبار الانحدار البصري عبر التقاط لقطات الشاشة

تستخدم فرق التطوير Webshot لاكتشاف نوع العلل التي تفوتها اختبارات الوحدة — أعطال التخطيط، وبدائل الخطوط، والأيقونات المفقودة، والحالات المتجاوبة المعطوبة. التقط البيئة التجريبية، والتقط الإنتاج، ثم قارن الزوج. أرفق المقارنة في تعليق على طلب السحب (PR) كدليل على أن تغييرك آمن (أو دليل على أن العلة الجديدة قد ظهرت للتو).

🖥️ صفحة كاملة لسطح المكتب (PNG، مقارنات حادة) 📱 صفحة كاملة للهاتف ⚙️ استخدم واجهة API المجانية بدلًا من ذلك

كل الأزرار تفتح نموذج الالتقاط مهيَّأً مسبقًا. يمكنك تغيير الصيغة والإطار المرئي بمجرد تحميل الصفحة.

لماذا Webshot لهذا الغرض

لقطات دقيقة بدقة البكسل

يحافظ وضع PNG على نص واضح وحواف حادة — مثالي لأدوات مقارنة البكسل (`pixelmatch`، أمر `compare` في ImageMagick) حيث قد يولّد ضجيج ضغط JPG نتائج إيجابية كاذبة.

الإطار المرئي نفسه في كل مرة

يلتقط Webshot عند حجم الإطار المرئي وموضع التمرير ووقت انتظار تحميل الخطوط نفسها تمامًا في كل تشغيل — فتكون نتائج المقارنة موثوقة.

ملائم لواجهة API

اربط واجهة Webshot API المجانية بـ CI لديك: التقط قبل النشر وبعد النشر، وقارن باستخدام `pixelmatch`، وأفشل عملية البناء إذا تجاوزت البكسلات المتغيّرة العتبة.

بلا قوالب نمطية لـ Chrome في وضع headless

تجاوز إعداد puppeteer وتثبيت الخطوط وأعلام sandbox. يشغّل Webshot كل ذلك على بنيتنا التحتية. كل ما تفعله بيئة CI لديك هو استدعاء HTTP.

كيفية التقاط اختبار الانحدار البصري

  1. اختر الصفحة (أو الصفحات) التي تريد مراقبتها — الصفحة الرئيسية، وصفحات الهبوط الأساسية، ومسار الدفع، وأي مكان قد يضرّ فيه الانحدار.
  2. التقط كلًّا منها بصيغة PNG + desktop_full + mobile_full لتأسيس مظهر الإنتاج الحالي.
  3. بعد عملية النشر التالية، التقط عناوين URL نفسها مرة أخرى. قارن القديم بالجديد باستخدام `pixelmatch` أو ImageMagick — أي نسبة تغيّر بكسل تتجاوز 1% تستحق مراجعة بشرية.
  4. اربطه ضمن CI: خطّاف قبل النشر يلتقط البيئة التجريبية، وخطّاف بعد النشر يلتقط الإنتاج، وتفشل عملية البناء إذا تجاوزت المقارنة عتبتك.

الأسئلة الشائعة

تشغيل Chrome في وضع headless داخل CI يعني تثبيت Chromium والخطوط وأعلام نواة sandbox، إضافةً إلى إبقائها جميعًا محدَّثة. مع Webshot تتجاوز عملية التثبيت بالكامل — تجري بيئة CI لديك مجرد استدعاء HTTP إلى واجهة API الخاصة بنا وتستلم ملف PNG. نحن نتولى تحديثات Chrome وتخزين الخطوط مؤقتًا والحماية من SSRF.

نعم عند استخدام PNG + الإطار المرئي نفسه + استراتيجية الانتظار نفسها. يثبّت Webshot حجم الإطار المرئي وينتظر fonts.ready + خمول الشبكة + أي رسوم متحركة مُعلَنة عبر استعلام `prefers-reduced-motion`. أما الرسوم المتحركة العشوائية (حلقات lottie، خلفيات Date.now()) فستختلف في المقارنة في كل تشغيل؛ جمّدها في بيئة الاختبار لديك.

ليس في استدعاء واحد — تلتقط كل عنوان URL على حدة، ثم تقارن بينهما باستخدام مكتبة منفصلة. نحن نبقي واجهة API مركَّزة على الالتقاط؛ والمقارنة سكربت من 30 سطرًا. راجع `/developers` للحصول على مثال برمجي.

نعم. ينتظر Webshot خمول الشبكة (انعدام الطلبات لمدة 500 مللي ثانية) وfonts.ready قبل الالتقاط، لذا تُعرض تطبيقات React وVue وSvelte وNext.js بالكامل قبل لقطة الشاشة. أما المواقع التي لا تصل أبدًا إلى خمول الشبكة (الاستقصاء الطويل، websockets) فيمكنك تمرير معامل `maxWait` عبر واجهة API.

النموذج العام المجاني هو 5 لكل 15 دقيقة لكل عنوان IP — منخفض جدًا لأجل CI. الفئة المجانية لواجهة API أكثر سخاءً؛ راجع `/developers`. لاختبار الانحدار عالي الحجم (أكثر من 50 لقطة لكل عملية بناء)، تزيل خطة API التجارية الحدود لكل عنوان IP.

يلتقط Webshot نفسه فقط — وأنت توفّر طبقة المقارنة. حل من سطرين: `npx pixelmatch baseline.png new.png diff.png`. أو استخدم خدمة مقارنة بصرية مُدارة (Percy، Chromatic، BackstopJS) وغذّها بملفات PNG من Webshot.

جاهز للالتقاط؟

مجانًا، بدون تسجيل، بدون علامة مائية. ما عليك سوى لصق عنوان URL.

📸 افتح نموذج الالتقاط

حالات استخدام أخرى: لقطات شاشة Google Maps · لقطات شاشة WordPress · فحص جودة صفحات الهبوط · لقطات شاشة للأدلة القانونية · لقطات شاشة وسائل التواصل الاجتماعي · عرض الكل →

Share: 𝕏 Twitter Facebook LinkedIn