אמולציה ובדיקה של דפדפנים אחרים

מה שצריך לעשות הוא לוודא שהאתר פועל מעולה ב-Chrome וב-Android. מצב המכשיר יכול לדמות מגוון של מכשירים אחרים כמו iPhone, אבל מומלץ לבדוק פתרונות אמולציה אחרים בדפדפנים.

סיכום

  • אם אין לכם מכשיר מסוים, או שאתם רוצים לבצע בדיקה מדגמית, האפשרות הטובה ביותר היא לחקות את המכשיר ישירות בתוך הדפדפן.
  • בעזרת אמולטורים וסימולטורים של מכשירים תוכלו לחקות את אתר הפיתוח שלכם במגוון מכשירים ישירות מתחנת העבודה.
  • אמולטורים מבוססי-ענן מאפשרים לבצע בדיקות יחידה אוטומטיות של האתר בפלטפורמות שונות.

אמולטורים של דפדפן

אמולטורים של דפדפנים הם כלי מעולה לבדיקת הרספונסיביות של אתר, אבל הם לא מדמים הבדלים ב-API, בתמיכה ב-CSS ובהתנהגויות מסוימות שמופיעות בדפדפן לנייד. צריך לבדוק את האתר בדפדפנים שפועלים במכשירים אמיתיים כדי לוודא שהכול מתנהג כמצופה.

תצוגת העיצוב הרספונסיבית של Firefox

ל-Firefox יש תצוגת עיצוב רספונסיבית, המעודדת להפסיק לחשוב במונחים של מכשירים ספציפיים, ובמקום זאת לחקור איך העיצוב משתנה בגודלי מסך נפוצים או בגודל משלכם על ידי גרירת הקצוות.

אמולציית F12 של Edge

כדי ליצור אמולציה של מכשירי Windows Phone, צריך להשתמש באמולציה המובנית של Microsoft Edge.

מכיוון ש-Edge לא מגיע עם תאימות לדור הקודם, תוכלו להשתמש באמולציה של IE 11 כדי לדמות את האופן שבו הדף שלכם ייראה בגרסאות ישנות יותר של Internet Explorer.

אמולטורים וסימולטורים של מכשירים

סימולטורים ואמולטורים של מכשירים מדמים לא רק את סביבת הדפדפן אלא את המכשיר כולו. הם שימושיים כדי לבדוק דברים שדורשים שילוב של מערכת ההפעלה, כמו קלט טופס באמצעות מקלדות וירטואליות.

אמולטור Android

דפדפן מלאי אמולטור Android

דפדפן מאגר תמונות באמולטור Android

בשלב זה אין אפשרות להתקין את Chrome באמולטור Android. עם זאת, תוכלו להשתמש בדפדפן Android, ב-Chromium Content Shell וב-Firefox ל-Android, שאותם נסביר בהמשך המדריך. ב-Chromium Content Shell נעשה שימוש באותו מנוע רינדור של Chrome, אבל ללא התכונות הספציפיות לדפדפן.

האמולטור של Android כולל את Android SDK, וצריך להוריד אותו מכאן. לאחר מכן פועלים לפי ההוראות להגדרת מכשיר וירטואלי ולהפעלת האמולטור.

לאחר הפעלת האמולטור, לחצו על סמל הדפדפן ותוכלו לבדוק את האתר באמצעות הגרסה הישנה של דפדפן מלאי ל-Android.

Chromium Content Shell ב-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

VM מודרני של IE

VM מודרני של IE

Modern.IE Virtual Machines מאפשרים לך לגשת לגרסאות שונות של IE במחשב שלך באמצעות VirtualBox (או VMWare). בוחרים מכונה וירטואלית בדף ההורדה כאן.

אמולטורים וסימולטורים מבוססי-ענן

אם אי אפשר להשתמש באמולטורים ואין גישה למכשירים אמיתיים, האפשרות הבאה הכי טובה היא אמולטורים מבוססי-ענן. יתרון גדול של אמולטורים מבוססי-ענן על פני מכשירים אמיתיים ואמולטורים מקומיים הוא האפשרות לבצע בדיקות יחידות של האתר באופן אוטומטי בפלטפורמות שונות.

  • BrowserStack (מסחרית) היא הדרך הקלה ביותר לבדיקות ידניות. תוכלו לבחור מערכת הפעלה, לבחור את גרסת הדפדפן ואת סוג המכשיר, לבחור כתובת URL לעיון ולהפעיל מכונה וירטואלית מתארחת שאפשר להתחבר איתה. אפשר גם להפעיל אמולטורים מרובים באותו מסך, וכך לבדוק איך האפליקציה נראית ותחושה במכשירים שונים בו-זמנית.
  • SauceLabs (מסחרי), מאפשר להריץ בדיקות יחידה בתוך אמולטור, שיכול להיות שימושי מאוד ליצירת סקריפטים של זרימה באתר ולצפות בהקלטת הווידאו לאחר מכן במכשירים שונים. אפשר גם לבצע בדיקות ידניות באתר.
  • ב-Device Anywhere (מסחרי) לא נעשה שימוש באמולטורים, אלא במכשירים אמיתיים שניתן לשלוט בהם מרחוק. האפשרות הזו שימושית מאוד במקרים שבהם צריך לשחזר בעיה במכשיר מסוים, ולא רואים את הבאג באף אחת מהאפשרויות המפורטות במדריכים הקודמים.
  • LambdaTest (מסחרי) תעזור לך לבצע בדיקה ידנית באמצעות דפדפנים שונים בשילוב של יותר מ-2,000 דפדפנים ומערכות הפעלה. המשתמשים יוכלו להקליט סרטון של באגים מורכבים ולשתף אותו באמצעות שילובים כמו MS Teams, Slack ועוד. המשתמשים יכולים לזרז את הבדיקות על ידי הרצת בדיקות במקביל.