مرحبا
في هذه المقالة ، أود أن أتحدث عن تجربتي في أتمتة اختبار الانحدار البصري.
مقدمة
قررت القيام بأتمتة الاختبار البصري بعد أن اكتشفت خطأً صغيراً في التصميم. غيّر المشروع تصميم صفحة واحدة ، والتغييرات لمست الصفحات غير المهمة.
بعد أن قررت أن التحقق يدويًا من ظهور صفحات الموقع لم يكن خيارًا ، بدأت التشغيل الآلي.
كنا بحاجة إلى حل بسيط مع تقارير مريحة. لتكون قادرًا على كتابة الاختبارات التلقائية دون أي قيود ، قارن لقطات الشاشة للصفحات وعناصر الموقع واستخدم متصفحات مختلفة.
بعد إجراء بحث قصير عن حل / إطار جاهز ، تقرر أنه سيكون من الأسهل أن تكتب الحل الخاص بك مع الوظائف اللازمة وشكل التقارير. من بين الخيارات التي رأيتها ، بدا إطار عمل جالين فقط مناسبًا ، لكنني وجدت ذلك بعد أن كتبت حلي.
بعد تنفيذ الاختبارات التلقائية واختبارها ، قررت تحسين الاختبارات قليلاً وإنشاء مشروع منفصل ، حتى أتمكن من استخدامه لاحقًا في مواقع ومشاريع أخرى.
عن المشروع
VisualRegressionBoilerplate هو مشروع بسيط نسبيا مع بنية محددة.
شيء مثل قالب / مشروع متداول لعمليات الاختبار التلقائي المرئية.
المشروع مخصص للمواقع / المشاريع الصغيرة. بالنسبة لأولئك الذين يحتاجون إلى حل بسيط ، دون أطر معقدة.
الاحتمالات
- مقارنة لقطات من صفحات الموقع. يمكنك تحديد عنصر واحد أو أكثر من العناصر التي تم تجاهلها.
- مقارنة لقطات من عناصر الموقع.
- يمكن تشغيل الاختبارات مع شاشات عرض مختلفة: المحمول - 360 بكسل ، الكمبيوتر اللوحي - 768 بكسل ، سطح المكتب - 1920 بكسل
- بشكل افتراضي ، يتوفر مستعرضان - Chrome وفايرفوكس + نفس المتصفحات في الوضع مقطوعة الرأس .
- منشئ التقرير - يتم إنشاء لقطات شاشة 4 لكل اختبار - الحالي ، المتوقع ، الفرق ، gif. إذا لم تكن هناك لقطات شاشة متوقعة ، سيتم حفظ لقطات الشاشة الفعلية كما هو متوقع.
التقنيات المستخدمة
- جافا
- TestNG
- مخضرم
- السيلينيوم webdriver
- aShot - مكتبة لمقارنة الصور
كيف تبدأ العمل مع المشروع
- تثبيت جافا ، مخضرم ، المتصفحات.
- في مُنشئ فئة DriverWrapper ، يمكنك إضافة أو إزالة المتصفحات إذا لزم الأمر
- يخزن الفصل TestConfig جميع إعدادات المشروع - المستعرض ، حجم نافذة المتصفح الافتراضي ، إلخ. هنا يمكنك إضافة أو تغيير الإعدادات.
- في فئة BasePage ، قم بتعيين عنوان الموقع الذي تم اختباره. يمكنك تعيين عنوان مختلف لبيئات مختلفة (dev ، stage ، prod). BasePage وبقية الفئات في وحدة التطبيق هي مثال على نمط كائن الصفحة . استخدامه اختياري.
- فحص فئة اختبار TestExample وإنشاء فئات الاختبار الخاصة بك كمثال.
- أضف فئات اختبار جديدة إلى testng.xml
- تشغيل الاختبارات مع المعلمات اللازمة من خلال مخضرم
- تحقق التقرير في مجلد التقرير
في مشروع
README ، يتم وصف كل شيء بمزيد من التفصيل.
كيف تكتب الاختبارات
بشكل عام ، كما تريد. لا توجد قيود. يمكنك استخدام نمط
كائن الصفحة أو أي شيء آخر.
كل ما تحتاجه هو استخدام الوظائف التالية لمقارنة لقطات الشاشة:
للصفحات:مقارنة لقطات شاشة الصفحة:
comparePageScreenshots("index_page");
مقارنة لقطات الشاشة مع تجاهل عنصر واحد:
comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);
مقارنة لقطات الشاشة مع تجاهل العديد من العناصر:
comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});
مقارنة لقطات من عنصر الصفحة - يمكن البحث عن العنصر بواسطة css locator
compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);
أو يمكنك تمرير كائن من فئة
WebElement compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));
المشاكل المحتملة
- قد تفشل الاختبارات بسبب المحتوى الديناميكي على الصفحة. يتم حل المشكلة عن طريق تجاهل العناصر ذات المحتوى الديناميكي.
- قد تفشل الاختبارات بسبب اختلاف البكسل. يمكنك إصلاح هذا عن طريق تحرير الإعداد - TestConfig.allowableDiffSize .
- في بعض الأحيان ، لا تملك جميع الصور أو بعض العناصر الموجودة على الموقع وقتًا للتحميل. لإصلاح ذلك ، كتبت الدالة preparPageForScreenshot () والتي ، باستخدام جافا سكريبت ، يتم تمرير الصفحة لأعلى ولأسفل. ولكن هذا لا يساعد دائما.
ملخص
في الوقت الحالي ، يحتوي المشروع على حوالي 50 اختبارًا - صفحات وعناصر صفحة مختلفة.
من خلال عمليات الاختبار النصية لل bash يتم إطلاق الموقع ويتم اختباره على الفور في ثلاثة ملحقات (المحمول ، الكمبيوتر اللوحي ، سطح المكتب).
هناك بعض المشكلات بسبب المحتوى الديناميكي وبسبب حقيقة أن بعض عناصر الموقع لا يتوفر لها دائمًا وقت للتحميل في الوقت المحدد ، لكن الاختبارات التلقائية يمكنها التعامل مع مهمتها.
أي تغييرات على تخطيط مرئية على الفور.
رابط إلى مستودع المشروع -
VisualRegressionBoilerplate