نُشر المقال باسم ألكسندر كوتشيتكوف وكراس سنيجانا.كم عدد الاختلافات التي ستجدها في 10 ثوان؟
سيجد مختبرنا جميع الاختلافات. وحتى تلك غير المرئية. أدناه سأتحدث عن كيف سيفعل ذلك ، ولكن أولاً سأقدم لكم مسار الأشياء.
تقوم شركتنا بتطوير تطبيقات الويب المختلفة. خذ على سبيل المثال تطبيق ويب نموذجي للعملاء مع واجهة مستخدم غنية ، ومئات الصفحات ، وتصميم متجاوب ودعم لجميع المتصفحات الشائعة. في هذا السيناريو ، يتحول اختبار الانحدار لواجهة المستخدم الحالية إلى م ويستغرق الكثير من الوقت. من أجل عدم الجنون وعدم التورط في هذا المستنقع ، قمنا بأتمتة هذه العملية
وأنشأنا أداة جديدة -
QVisual .
كيف يختبر الشخص التخطيط (UI)؟ يأخذ التنفيذ الحالي ويقارنه بمعيار تجريدي مبني على أساس خبرته الخاصة وراحته وآلاف صفحات الويب التي تم عرضها من قبل. إن كتابة ذكاء اصطناعي خاص بك لاختبار التخطيطات سيكون رائعًا بالطبع. لكن هذه الفكرة تبدو وكأنها إطلاق نار من مدفع على العصافير. لذلك ، قمنا بذلك بسهولة: كمرجع ، بدأنا في قبول نفس الصفحة التي تم التحقق منها مسبقًا من قبل شخص (في معظم الحالات هذه صفحة من إصدار ناجح سابق). وهكذا ، جاءت المهمة بأكملها لمقارنة صفحتين.
بالطبع ، تم بالفعل نشر العديد من الحلول التي تسمح لك بمقارنة صورتين بكسل تلو الآخر. لماذا نكتب "دراجة أخرى"؟ الجواب بسيط - لم نرغب في قصر أنفسنا على المقارنة بين البكسل ، فقد أردنا أن نكون قادرين على مقارنة الكتل الفردية على الصفحة وتلقي تقرير مفيد عن عدد وأنواع الاختلافات في هذه الكتل. لذلك ، يمكن للأداة التي قمنا بتطبيقها ليس فقط مقارنة الصور نفسها ، ولكن أيضًا عناصر الصفحة الفردية ، إذا لزم الأمر. لذلك نحن لا نعمل مع لقطات من صفحتين ، ولكن مع لقطات من هذه الصفحات.
فوائد النهج
اللقطة هي لقطة شاشة للصفحة بأكملها بالإضافة إلى بيانات حول أنماط وخصائص بعض عناصر الويب في هذه الصفحة. نقوم بتنفيذ البحث عن الاختلافات في اللقطات باستخدام تطبيق خادم بواجهة برمجة تطبيقات مفتوحة.
المنهج: مقارنة العناصر ، وليس الصور ، تسمح لنا بتسليط الضوء على الأخطاء النموذجية ، مثل:
- IMAGE - العنصر في الصفحة لا يتوافق مرئيًا مع العنصر في المعيار ؛
- MOVED - عناصر الإزاحة ، العنصر مطابق للمرجع ، ولكن مع إحداثيات مختلفة ؛
- تم تغيير الحجم - مشابه جدًا للإزاحة ، ولكن بدلاً من موضع العنصر ، يختلف حجمه ؛
- TEXT - أخطاء في النص ؛
- CSS والسمات - الاختلافات في الأنماط والسمات ليست ملحوظة دائمًا وليست خطأً دائمًا. لكن التحكم في التغييرات فيها مفيد للغاية ، لأنه في بعض الحالات يساعد في العثور على الأخطاء المرتبطة بها.
تحليل صغير للأمثلة مع عدد من الأخطاء الشائعة:
كيف يعمل؟
يمكنك إزالة اللقطة من الصفحة باستخدام أدواتك الخاصة ، ويمكنك نقل
لقطة شاشة وبيانات حول
العناصر إلى الخادم مع طلبين POST عاديين.
إذا كانت اختباراتك مكتوبة بلغة جافا ، فسيكون من الأسهل استخدام مكتبتنا لهذه الأغراض ، والتي ستهتم بنفسها بإنشاء لقطة ونقل البيانات إلى الخادم.
قبل أن تبدأ ، ستحتاج إلى تحديد العديد من المتغيرات (عنوان الخادم ونوع المتصفح وإصداره ، وما إلى ذلك). في الاختبار نفسه ، يجب تحديد عنوان الصفحة التي تريد أخذ لقطة منها ، وقائمة بالمحددات بتنسيق Xpath أو CSS للبحث عن العناصر التي نحتاجها (اختياري). هذا كل شئ!
داخل المكتبة ، نستخدم أوامر Selenium WebDriver الداخلية ونصوص JavaScript لالتقاط لقطة. تسمح لك أوامر WebDriver الداخلية بالتقاط لقطات الشاشة للصفحة بسرعة ودقة (بدون اللصق والتمرير) ، و js - ابحث عن العناصر الضرورية وأضف بيانات عنها في اللقطة. بعد إزالة اللقطة ، نقوم بنقلها إلى تطبيق الخادم الخاص بنا ، والذي سيحفظ البيانات حول العناصر الموجودة في المونغو ، ولقطات الشاشة نفسها على قرص الخادم. الآن يمكن مقارنة هذه اللقطة بالمعيار. ستتم مقارنة بيانات العنصر مثل الكائنات العادية ولقطات الشاشة - بكسل تلو الآخر باستخدام
OpenCV .
يمكنك الآن الحصول على تقرير حول مقارنة لقطتين. للقيام بذلك ، تحتاج إلى إرسال
طلب GET والحصول على بيانات حول المقارنة في شكل JSON في الرد ، أو استخدام تطبيق الواجهة الأمامية ، والذي سيعمل على إنشاء تقرير مفصل ، والأهم من ذلك ، يمكن قراءته.
وماذا عن التقرير؟
تحتوي الصفحة الرئيسية للتقرير على معلومات حول الاختبارات التي تم اجتيازها والفشل بنجاح (مظللة باللون الأحمر) وتتكون من ثلاث قوائم:
- قائمة الاختبارات (القصة) التي تم التحقق من التخطيط فيها. هنا ، من أجل الراحة ، تتوافق أسماء الاختبارات مع عنوان URL للصفحات التي تم أخذ اللقطة منها ؛
- قائمة الحالات (الحالة) - يمكن أن تحتوي كل قصة على عدة حالات ، على سبيل المثال ، لقطة شاشة قبل ملء النموذج وبعده. يمكن أن تحتوي كل ولاية على لقطات متعددة بدرجات دقة وإصدارات متصفح مختلفة ؛
- قائمة بمتصفحات وأذونات مختلفة وإحصاءات موجزة.
يوجد في الجزء العلوي أيقونات تسمح لك بتصفية النتائج اعتمادًا على نوع الأخطاء والنسبة المئوية للتفاوت في مقارنة البكسل بالبكسل. هذا التطبيق يسرع التحقق من الخطأ.
تحتوي الإحصائيات الموجزة في كتل القائمة الأخيرة على ثلاث معلمات:
- بكسل - الفرق بين الصورتين بالنسبة المئوية لحجم الصفحة بأكملها ؛
- العناصر - عدد العناصر المختلفة (من تلك التي تم العثور عليها بواسطة المحددات التي تم اجتيازها في الاختبار) ؛
- خطأ - أخطاء داخلية حدثت عند مقارنة اللقطات (على سبيل المثال ، لم يتم العثور على إحدى الصور للمقارنة ، أو لا توجد بيانات عن اللقطات).
التقرير لكل صفحة عبارة عن لقطتي شاشة منفصلتين وحدود للعناصر التي تم العثور على الاختلافات فيها. يشير النص المنبثق عند التمرير فوق العناصر المختلفة إلى نوع الخطأ والمحدد الذي تم العثور على العنصر من خلاله. يمكنك أيضًا تعيين التصفية حسب نوع الخطأ ، وإخفاء إحدى لقطات الشاشة وتمكين / تعطيل نتيجة المقارنة بين البكسل.
كما ذكرنا أعلاه ، نقوم أيضًا بمقارنة لقطات الشاشة بالبكسل ، والتي تعتبر فعالة جدًا بالنسبة لبعض المهام. على سبيل المثال ، بالنسبة للصفحات الجديدة ذات DOM غير المستقر ، لا معنى لقضاء الوقت في الكتابة والمحافظة على المواقع.
في الختام ، أود أن أقول عن العادم الحقيقي لهذه الأداة للشركة: يساعد برنامج
QVisual كل يوم
مختبرينا على مواكبة جميع التغييرات في تخطيط التطبيقات. نوفر الكثير من الوقت لمقارنة عمليات الهبوط من خلال إنشاء لقطات شاشة تلقائيًا (حتى 1500+ عمليات إنزال في 3 متصفحات في 6 دقة شاشة).
ملاحظة: هذه لمحة موجزة عن أداتنا. يمكنك العثور على مزيد من المعلومات حول
GitHub ، بالإضافة إلى المشاركة في تطوير الأداة.
PPS بالنسبة لأولئك الذين يريدون اختبار أنفسهم - هذه هي جميع الاختلافات في الصورة من الرأس:
قناة دعم أداة Telegram:
t.me/qvisual