البدء في اختبار الانحدار البصري باستخدام Appium

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

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

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

ما هو اختبار الانحدار البصري؟

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

كيف تعمل اختبارات الانحدار البصري؟

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

الاختبار البصري اليدوي

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

مقارنة بكسل تلو الآخر

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

المقارنة القائمة على DOM

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

مقارنة الذكاء الاصطناعي المرئي

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

أسباب إجراء اختبار الانحدار البصري

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

ضمان الاتساق البصري

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

التحقق من صحة تغييرات التصميم

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

حلقة ردود فعل أسرع

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

تحسين تجربة المستخدم

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

اختبار الانحدار لمكتبات واجهة المستخدم

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

خطوات البدء باختبار الانحدار المرئي باستخدام Appium

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

الخطوة 1: إعداد Appium وبيئة الاختبار

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

الخطوة 2: تحضير صور الاختبار

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

الخطوة 3: تنفيذ البرامج النصية للاختبار

اكتب نصوص اختبارية باستخدام مكتبة عميل Appium لأتمتة عملية التقاط لقطات الشاشة وإجراء المقارنات المرئية. يجب أن تقوم البرامج النصية للاختبار بما يلي:

1. قم بتهيئة برنامج تشغيل Appium لتشغيل التطبيق على جهاز/محاكي محدد.
2. التنقل عبر شاشات التطبيق، وتنفيذ الإجراءات التي تؤدي إلى تغييرات في واجهة المستخدم.
3. التقط لقطات شاشة باستخدام وظيفة لقطة الشاشة في Appium.
4. احفظ لقطات الشاشة الملتقطة في مجلد منفصل للمقارنة.

فيما يلي مثال لكيفية ظهور التعليمات البرمجية في Java باستخدام عميل Appium Java:

```جافا

import io.appium.java_client.AppiumDriver;

import io.appium.java_client.MobileElement;

import io.appium.java_client.android.AndroidDriver;

import org.openqa.selenium.remote.DesiredCapabilities;

استيراد java.net.URL؛

اختبار الانحدار المرئي للفئة العامة {

public static void main(String[] args) يطرح الاستثناء {

// قم بتعيين الإمكانات المطلوبة لبرنامج تشغيل Appium

DesiredCapabilities caps = new DesiredCapabilities();

caps.setCapability("platformName", "Android");

caps.setCapability("deviceName", "emulator-5554");

caps.setCapability("appPackage", "your.app.package");

caps.setCapability("appActivity"، "your.app.activity");

// تهيئة برنامج تشغيل Appium

AppiumDriver<MobileElement> driver = new AndroidDriver<>(new URL("https://localhost:4723/wd/hub"), caps);

// تنفيذ الإجراءات والتقاط لقطات الشاشة

// ...

// احفظ لقطات الشاشة للمقارنة

// ..

// أغلق برنامج التشغيل

driver.quit();

}

}

```

الخطوة 4: تنفيذ منطق المقارنة المرئية

لاختبار الانحدار البصري، تحتاج إلى آلية لمقارنة لقطات الشاشة الملتقطة مع الصور الأساسية. يمكنك استخدام مكتبات مقارنة الصور مثل "Resemble.js" أو "Pixelmatch" لإجراء مقارنات بكسل تلو الآخر وحساب الاختلافات المرئية.

الخطوة 5: التأكيد والإبلاغ

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

الخطوة 6: التكامل المستمر (CI)

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

الخطوة 7: الحفاظ على الصور الأساسية

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

كيف يمكن للمستخدمين إجراء VRT باستخدام Appium على LambdaTest؟

إليك كيفية قيام المستخدمين بإجراء اختبار الانحدار البصري باستخدام Appium على LambdaTest:

قم بإعداد حساب LambdaTest

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

كتابة نصوص الاختبار

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

قم بتكوين قدرات LambdaTest

قم بتعديل البرامج النصية لـ Appium لتشمل إمكانيات LambdaTest المحددة. يتضمن ذلك تحديد النظام الأساسي المطلوب (iOS/Android)، وإصدار المتصفح، ونوع الجهاز، وبيانات اعتماد LambdaTest (اسم المستخدم ومفتاح الوصول).

قم بإجراء الاختبارات على LambdaTest

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

تنفيذ الاختبارات

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

المقارنة البصرية

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

مراجعة وتحليل

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

التقارير الآلية

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

أفضل الممارسات لاختبار الانحدار البصري الناجح باستخدام Appium

فيما يلي بعض أفضل الممارسات التي يجب اتباعها لإجراء اختبار الانحدار البصري الناجح باستخدام Appium:

حدد جهازًا موثوقًا ومصفوفة منصة

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

التحكم في الإصدار للصور المرجعية

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

بيئة اختبار مستقرة ومتسقة

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

عزل تغييرات واجهة المستخدم عن التغييرات الوظيفية

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

تحمل التباين البصري المتوقع

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

التعامل مع المحتوى الديناميكي

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

استراتيجيات الانتظار الذكية

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

التنفيذ الموازي

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

التقارير والإخطارات الآلية

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

صيانة الاختبار الدورية

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

مراجعة النتائج والتحقق من صحتها

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

تحسن مستمر

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

خاتمة

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