محاكاة المتصفحات الأخرى واختبارها

ولا تنتهي مهمتك بضمان أن موقعك الإلكتروني يعمل بشكل رائع عبر Chrome وAndroid. على الرغم من يمكن أن يحاكي وضع الجهاز مجموعة من الأجهزة الأخرى مثل أجهزة iPhone، لذا ننصحك بالاطّلاع على المتصفحات الخاصة بالمحاكاة.

ملخّص

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

محاكيات المتصفّح

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

فايرفوكس طريقة عرض التصميم سريع الاستجابة

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

محاكاة F12 من Edge

لمحاكاة هواتف Windows، استخدم المحاكاة المدمجة في Microsoft Edge.

وبما أنّ Edge لا يتوافق مع نظام التشغيل القديم، يمكنك استخدام محاكاة IE 11 لمحاكاة طريقة عمل في الإصدارات السابقة من Internet Explorer.

مُحاكيات الأجهزة ومحاكياتها

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

Android Emulator

متصفّح جاهز لمحاكي Android

متصفح الأسهم في محاكي Android

في الوقت الحالي، ليست هناك طريقة لتثبيت Chrome على محاكي Android. ومع ذلك، يمكنك استخدام صفحة متصفّح Android وChromium Content Shell وFirefox لنظام التشغيل Android، وسنتحدّث عنهما لاحقًا في هذا الدرس الدليل. يستخدم Chromium Content Shell محرك العرض نفسه في Chrome، لكنه لا يشتمِل على الميزات الخاصة بالمتصفح.

يأتي محاكي Android مزوَّدًا بحزمة تطوير البرامج (SDK) لنظام التشغيل Android التي تحتاج إلى تنزيلها من هنا. بَعْدَ ذَلِكْ اتبع التعليمات لإعداد جهاز افتراضي وتشغيل المحاكي.

وبعد تشغيل المحاكي، انقر على رمز المتصفح وستتمكن من اختبار موقعك على متصفح المخزون القديم لنظام Android.

هيكل محتوى Chromium في نظام التشغيل Android

هيكل محتوى محاكي Android

هيكل محتوى محاكي Android

لتثبيت Chromium Content Shell لنظام التشغيل Android، اترك المحاكي قيد التشغيل وشغِّل ما يلي الأوامر في موجه الأوامر:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

يمكنك الآن اختبار موقعك الإلكتروني باستخدام Chromium Content Shell.

Firefox على Android

رمز Firefox على محاكي Android

رمز Firefox على محاكي Android

على غرار Content Shell في Chromium، يمكنك الحصول على APK لتثبيت Firefox على المحاكي.

تنزيل ملف .apk المناسب من https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

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

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

مُحاكي iOS

يأتي محاكي iOS لنظام التشغيل Mac OS X مزودًا بخدمة Xcode التي يمكنك تثبيتها من App Store.

وعند الانتهاء، تعرَّف على كيفية التعامل مع المحاكي من خلال مستندات Apple.

Modern.IE

جهاز افتراضي حديث في IE

جهاز افتراضي حديث في IE

تتيح لك أجهزة Modern.IE الافتراضية الوصول إلى إصدارات مختلفة من IE على جهاز الكمبيوتر من خلال VirtualBox (أو VMWare). اختَر جهازًا افتراضيًا من صفحة التنزيل هنا.

أدوات المحاكاة والمحاكيات المستنِدة إلى السحابة الإلكترونية

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

  • إنّ BrowserStack (تجاري) هو الأسهل استخدامًا للاختبار اليدوي. يجب أن تختار نظام تشغيل اختر إصدار المتصفّح ونوع الجهاز ثم اختَر عنوان URL لتصفّحه، ثمّ سيعرض جهاز افتراضي مستضاف يمكنك التفاعل معه. يمكنك أيضًا تشغيل عدة محاكيات في على الشاشة نفسها، ما يتيح لك اختبار شكل التطبيق ومظهره على عدة أجهزة الوقت.
  • تتيح لك SauceLabs (التجارية) إجراء اختبارات وحدة داخل محاكي يمكن أن يكون مفيدة حقًا لبرمجة تدفق انتقال عبر موقعك ومشاهدة تسجيل الفيديو لهذا بعد ذلك على أجهزة مختلفة. ويمكنك أيضًا إجراء اختبار يدوي على موقعك الإلكتروني.
  • لا يستخدم الخيار Device Anywhere (تجاري) أدوات محاكاة، بل أجهزة حقيقية يمكنك التحكّم فيها عن بُعد. ويعد هذا أمرًا مفيدًا للغاية في حالة ما إذا كنت بحاجة إلى إعادة إنتاج مشكلة ما في مشكلة محددة الجهاز ولا يمكنهم رؤية الخطأ في أي من الخيارات بالأدلة السابقة.
  • سيساعدك LambdaTest (التجارية) على إجراء اختبار يدوي عبر المتصفحات المختلفة باستخدام مجموعة لأكثر من 2000 متصفّح وأنظمة التشغيل. سيتمكن المستخدمون من تسجيل فيديو للأخطاء المعقدة من خلال عمليات دمج مثل MS Teams وSlack وغير ذلك يمكن للمستخدمين تسريع الاختبار من خلال إجراء الاختبارات بالتوازي.