كيفية جعل الاختبار عبر المتصفحات أكثر كفاءة باستخدام LambdaTest

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

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

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

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

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

طريقة محسنة للتعامل مع الاختبار عبر المتصفحات

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

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

للتأكد تمامًا من أن التعليمات البرمجية وخيارات التصميم التي قمت بها لموقع ويب لن تؤثر سلبًا على المستخدمين ، يعد الاختبار عبر المستعرضات خلال عملية تصميم الويب أمرًا ضروريًا.

"

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

فيما يلي بعض النصائح لمساعدتك في إنشاء اختبار آلي في عمليتك:

تعرف على اختلافات دعم المتصفح

هذه تقرير إخباري من Statista لأهم متصفحات الويب حسب حصة السوق:

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

على سبيل المثال ، هذه هي المحركات التي تستخدمها متصفحات الويب الرائدة:

• يستخدم Chrome Blink + V8 ؛
• يستخدم Edge Blink ؛
• يستخدم Firefox Quantum / Gecko + SpiderMonkey ؛
• يستخدم Safari WebKit + Nitro ؛
• يستخدم Internet Explorer ترايدنت + شقرا.

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

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

على سبيل المثال ، توضح لك الصورة أعلاه كيف تبدو علامة التاريخ في Chrome. إليك كيفية عرض نفس الرمز في Edge:

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

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

أداة يمكنك استخدامها كمرجع هي هل يمكنني استخدام….

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

تدعم معظم المتصفحات الرائدة (وبعض المتصفحات غير الرائدة) تخطيط شبكة CSS (تلك الموجودة باللون الأخضر). يوفر Internet Explorer (باللون الأزرق) دعمًا جزئيًا ولا يوفر Opera Mini (باللون الأرجواني) أي دعم على الإطلاق.

أو لنفترض أنك تحاول استخدام المزيد من صور WebP في تصميماتك لأنها أفضل بكثير من حيث الأداء والدقة. إليك ما يمكنني استخدامه ... يخبرنا عن دعم المتصفح لتنسيق الصورة:

لا توفر أحدث إصدارات Internet Explorer و Safari (الويب والجوال) دعمًا لها. لذلك ، إذا كنت تنوي التصميم باستخدام صور WebP ، فسيتعين عليك إنشاء حل بديل لهذه المتصفحات.

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

نصيحة للمحترفين: قم بإنشاء مصفوفة متصفح للرجوع إليها

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

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

إليك نموذج بسيط صممه LambdaTest:

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

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

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

احصل على أداة اختبار عبر المستعرضات تقوم بكل شيء

لا يهم حجم المواقع التي تنشئها. ستستفيد جميع المواقع العامة من أداة اختبار مؤتمتة عبر المتصفحات.

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

فيما يلي بعض الميزات البارزة التي يجب أن تعرفها:

الاختبار في الوقت الفعلي: الأفضل لتتبع الأخطاء

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

من لوحة Real-Time Testing ، ستدخل عنوان URL الخاص بموقعك ثم تختار مواصفات العرض الخاصة بك.

يتيح لك الحصول على تفاصيل فائقة ، والاختيار من بين:

• Mac مقابل Android ،
• نوع الجهاز،
• إصدار الجهاز ،
• نظام التشغيل،
• متصفح الإنترنت.

بمجرد بدء الاختبار ، هذا ما ستراه (اعتمادًا على نوع الجهاز الذي تختاره ، بالطبع):

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

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

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

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

اختبار لقطة الشاشة: الأفضل لتسريع الاختبار اليدوي

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

تتيح لك أداة Screenshot ، على سبيل المثال ، تحديد جميع الأجهزة والمتصفحات التي تريد مقارنتها مرة واحدة:

عند اكتمال الاختبار ، ستحصل على جميع لقطات الشاشة المطلوبة في مكان واحد:

يمكنك مشاهدتها هنا أو تنزيلها على جهاز الكمبيوتر الخاص بك أو مشاركتها مع الآخرين.

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

اختبار الاستجابة: الأفضل لتأكيد تجربة الجوال أولاً

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

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

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

الاختبار الذكي: الأفضل في اختبار الانحدار

يمكن للعين أن تكتشف الكثير فقط ، خاصةً عندما كنت تبحث في نفس القسم من صفحة الويب لأسابيع.

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

يجب أن يحدث هذا في أي وقت يتغير فيه شيء ما:

• تقوم يدويًا بتحديث جزء من التصميم.
• تم تعديل الكود في الخلفية.
• أبلغ شخص ما عن خطأ وتم تنفيذ الإصلاح.
• يتم تحديث البرنامج.
• تم إعادة توصيل API.

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

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

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

الآن ، بالنسبة إلى سبب كون هذه الميزة رائعة جدًا ، فإليك كيفية عملها:

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

يمكنك أيضًا استخدام اختبارات المقارنة جنبًا إلى جنب للتحقق من نفس الشيء:

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

الاختبار الآلي: الأفضل لاكتشاف المشكلات على نطاق أوسع

من الناحية الفنية ، يحتوي كل شيء نظرنا إليه حتى الآن على شكل من أشكال الأتمتة المضمنة ، سواء كانت معالجة 20 لقطة شاشة مختلفة للمتصفح في وقت واحد أو تتيح لك رؤية واجهات اختبار الأجهزة المحمولة على الفور لجميع أجهزة iOS و Android في وقت واحد.

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

هناك الكثير من الفوائد للجمع بين اختبار LambdaTest واختبار السيلينيوم:

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

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

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

تغليف

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