ما هو ولماذا وكيفية تنفيذه

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

ومع ذلك، فمن خلال اختبارات الانحدار البصري، يمكنك اكتشاف المشكلات قبل أن تسبب مشكلات للمشترين. بهذه الطريقة، يمكنك التأكد من أن موقع الويب الخاص بك يبدو رائعًا وأن جميع مكونات واجهة المستخدم (UI) تؤدي المهمة بشكل صحيح. والأفضل من ذلك هو أنه يمكنك العثور على معدات آلية لتسهيل ذلك كثيرًا. ️

في هذه المقالة، سنختار نظرة فاحصة على فحص الانحدار البصري. بعد ذلك، سنناقش بعض المكافآت ونوضح لك كيفية تنفيذها على موقع الويب الخاص بك. دعونا نرتفع بشكل مناسب!

مكتب المحتويات :

مقدمة لاختبارات الانحدار المرئي

كما أشرنا، تتحقق اختبارات الانحدار المرئي من أن موقع الويب الخاص بك يبدو وكأنه يتصرف بالطريقة التي تتوقعها. بالإضافة إلى ذلك، فإنه يضمن عدم وجود تعديلات بصرية أو وظيفية غير مقصودة.

عادةً، تعمل اختبارات الانحدار المرئي من خلال مقارنة لقطة شاشة أساسية لصفحة الإنترنت الخاصة بك مع نموذج حالي ومحدث لصفحة الويب الخاصة بموقعك على الويب. بعد ذلك، يمكنك تحديد الاختلافات يدويًا أو وضع أداة آلية لوضع الاختلافات.

هناك العديد من أنواع المشاكل التي تحددها هذه الاختبارات البصرية. بشكل عام، يمكنك اكتشاف الأخطاء المرئية التي تمر دون أن يلاحظها أحد في التقييمات الهادفة المتكررة. قد تؤدي هذه الأخطاء إلى معلومات غير محاذاة، أو صور متداخلة، أو تقديم تحديات، أو رؤية أشياء جزئيًا.

على الرغم من أن اختبارات الانحدار المرئي تعد عنصرًا مهمًا في خدمة موقع الويب، إلا أنها تعمل بشكل أفضل جنبًا إلى جنب مع اختبارات قابلية الاستخدام والاختبارات الوظيفية. بشكل منفصل، يعد اختبار الانحدار المرئي أمرًا بالغ الأهمية لمواقع الويب التي تركز بشدة على تجربة المستخدم (UX) أو التي يتم تحديثها بشكل عام. ️

الفوائد المضافة لاختبار الانحدار البصري

هناك العديد من الجوانب الإيجابية لتنفيذ اختبارات الانحدار البصري على موقع الإنترنت الخاص بك. في البداية، يمكن لهذه الأنواع من الاختبارات تحديد المشكلات الأكثر حساسية في الواجهة الخاصة بك، مما يتيح لك تحسين تجربة المستخدم الخاصة بك.

يعد هذا مفيدًا بشكل خاص لأنه من الصعب جدًا اكتشاف الأخطاء المرئية إلا إذا ذهبت إلى موقع الويب الخاص بك في النهاية الأمامية. على هذا النحو، يتيح لك تكرار سيناريوهات البيئة الفعلية مثل أزرار الاختبار والمسارات والمزيد.

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

وأخيرًا، يمكن أن تساعدك اختبارات الانحدار المرئي على تعزيز معرفتك الخلوية نظرًا لحقيقة أنه يمكنك متابعة المشكلات الحصرية لشاشات الهاتف المحمول أو الجهاز اللوحي أو حتى متصفحات معينة.

كيف تنجز اختبارات الانحدار البصري المهمة؟

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

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

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

الجانب السلبي لهذه الطريقة هو أنه يمكنك إنشاء مثيلات ليست ذات صلة بسهولة الاستخدام. علاوة على ذلك، يمكن أن يؤدي ذلك في النهاية إلى نتائج إيجابية زائفة إلا إذا كنت تستخدم برنامجًا يُدخل ذلك في المعادلة.

هناك طريقة شائعة أخرى لإجراء اختبارات الانحدار المرئي وهي إجراء مقارنات قائمة على DOM. يعتمد هذا النظام على منتج كائن المستند (DOM) ويعرض موقع الويب الخاص بك مباشرة قبل إنشاء التحويل وبعده مباشرة.

بهذه الطريقة، يمكنك تعلم تعديلات كود DOM، ولكنها ليست مقارنة مرئية حقًا. نظرًا لأن هذا قد يؤدي إلى نتائج إيجابية زائفة عندما لا يتحسن الكود ولكن واجهة المستخدم تتحسن، كما هو الحال مع المقالات الديناميكية أو المضمنة. وبالتالي، من الضروري نقد تأثيرات الفحص للتأكد من عدم وجود أي أخطاء مرئية دون أن يلاحظها أحد.

وأخيرًا، يمكنك إجراء اختبارات الانحدار المرئي باستخدام الذكاء الاصطناعي البصري (AI). باستخدام مساعد الذكاء الاصطناعي المدرب جيدًا، يمكنك حل المشكلات البصرية بنفس الطريقة التي يستطيع بها الإنسان. يؤدي هذا إلى القضاء على المشكلة الزائفة التي تقيد استراتيجيات الخيارات وتسمح لك بإلقاء نظرة على المعلومات الديناميكية.

كيفية تنفيذ اختبارات الانحدار البصري على صفحة الويب الخاصة بك

إذا كنت ترغب في استخدام فحص الانحدار البصري على موقع الإنترنت الخاص بك، فهناك بعض المتغيرات التي يجب وضعها في الاعتبار. على سبيل المثال، إذا كنت ترغب فقط في إجراء الاختبارات في بعض الأحيان، فيمكن أن تكون الاختبارات اليدوية بديلاً رائعًا. من ناحية أخرى، إذا كنت ترغب في إجراء اختبارات مباشرة بعد كل تحسين على موقع الويب الخاص بك، فإن الخيار الآلي يساعد في الإدراك.

علاوة على ذلك، إذا لم تتغير واجهة المستخدم الخاصة بك كثيرًا، فستكفي الموارد المباشرة. ولكن لتحديث المواقع بانتظام، قد تحتاج إلى جهاز اختبارات متقدم إضافي. ستحتاج أيضًا إلى التفكير في التحقق من الصحة عبر الأنظمة والمتصفحات.

إذا اتخذت قرارًا بإعداد أداة فحص الانحدار البصري التلقائي، فيمكنك العثور على خيارات مفتوحة المصدر مجانًا. أو، إذا كانت مواردك المالية تسمح بذلك، يمكنك الحصول على برامج عالية الجودة.

على سبيل المثال، يدعم كل من Selenium وCypress الاختبارات المرئية وينشئان لقطات شاشة لصفحات الويب الخاصة بك على الإنترنت. في غضون ذلك، سيجعل بيرسي من السهل إدارة مسار إجراء الاختبار ويساعدك على تجنب النتائج الإيجابية الزائفة.

إذا كنت تدير موقع ويب WordPress، فيمكنك تثبيت مكون إضافي مثل VRTs – Visible Regression Exams الذي يجري عمليات فحص يومية تلقائية لصفحات الويب أو المنشورات المحددة:

بعد ذلك، عندما تقرر استخدام جهاز اختبار، يمكنك إنشاء سيناريوهات اختبارات حيث تحدد بالضبط ما تريد الحصول عليه وتكوين العديد من الإعدادات الأخرى.

في هذه المرحلة، ستستخدم النظام الأساسي لتقييم أحدث لقطات الشاشة مقارنةً بلقطات الشاشة الأساسية، وسيقوم المورد عادةً بتقديم تقرير يسرد الفروق. إذا تم اكتشاف أي أخطاء، فأنت جاهز لحلها (أو تسليمها إلى أحد المطورين). بعد ذلك، يمكنك تحديث لقطة الشاشة الجديدة كخط أساسي لجميع اختباراتك المستقبلية المتوقعة.

ملخص

بعد ذلك، تتم مقارنة هذه اللقطات مع النموذج الأساسي لاكتشاف المشكلات المرئية.

تم تحسينه ولكن هناك مجموعة متنوعة من التقنيات التي تناسب رغبات موقع الويب الخاص بك. على سبيل المثال، يمكنك إجراء اختبارات كتيبية أو تقييمات الذكاء الاصطناعي. بالإضافة إلى ذلك، يمكنك تقييم اللقطات على مستوى البكسل أو إجراء مقارنات تعتمد على DOM. بعد ذلك، ستقوم بإعداد مواقف الفحص لتحديد المشاكل التي تحتاج إلى إصلاح.

هل لديك أي استفسارات حول كيفية تطبيق اختبارات الانحدار المرئية على موقعك؟ اسمحوا لنا أن نعرف في التعليقات أدناه!