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

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

סיכום

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

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

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

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

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

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

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

מכיוון ש-Edge לא כולל תאימות מדור קודם, אפשר להשתמש ב-IE 11's Emulation כדי לדמות את האופן שבו ייראה בגרסאות ישנות של 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 מאפשרות לגשת לגרסאות שונות של IE במחשב באמצעות VirtualBox (או VMWare). בוחרים מכונה וירטואלית בדף ההורדה כאן.

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

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

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