כשכל הבדיקות נכשלות, יש פתרון שהוא לא לחבוט את הראש בקיר

וזה מה שאנה צ’יבולסקאיה, מפתחת Frontend ב-Wix Engineering, מדגימה בהרצאתה על החיסכון והיעילות של צילומי מסך בבדיקות תוכנה אוטומטיות

מאת אנה צ’יבולסקאיה

כל מי שעוסק בבדיקות, מאנשי ה-QA ועד בודקי E2E, מכיר את זה: כותבים בין עשרות למאות בדיקות, שולחים להרצה על שרתים מרוחקים והפלא ופלא – כולן נכשלות. במצב כזה, מאיפה בכלל מתחילים עם ניפוי שגיאות (Debugging)?

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

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

בהרצאתה מדגימה אנה עד כמה יעילים צילומי המסך. למשל, הבדיקה נכשלת ומראה הודעת שגיאה על כך שה-input ארוך מדי. יכולות להיות לכך 4 סיבות אפשריות, ואנה מראה כיצד באמצעות צילום המסך אפשר לצמצם את הגורמים האפשריים לסיבה אחת בלבד: לא היה tooltip על השגיאה. עכשיו אפשר לעשות ניפוי שגיאות רק לסיבה הזאת, בלי להוסיף console logs, בלי להכניס בדיקות באמצע הבדיקה האוטומטית, בלי debugging מיותר ועוד.

Screenshot Reporter

אבל זה לא מספיק, ובהרצאה מציגה אנה את הפתרון הגנרי שפותח לבעיה החוזרת של כישלון בדיקות אוטומטיות – Screenshot reporter. מדובר למעשה בספריית open source, המאפשרת לייצר צילומי מסך ו-HTML captures עבור כל בדיקה שנכשלה, על מנת להפוך את תהליך ה-debugging למהיר, פשוט ויעיל. בנוסף, בהרצאה מוצגים כמה יתרונות מהותיים שנותנת שיטה זו, מעבר לחיסכון המשמעותי בזמן:

– סוג של Version control הודות לדיווח המפורט שמתקבל

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

הסיוט הסודי של כל בודק: QA Cross Browsers

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

זה כבר יוצר את הבעיה השנייה שמציגה אנה בהרצאתה: קשה לעשות בדיקות אוטומטיות ל-UI. אפשר כמובן להשוות את ה-CSS שמקבלים עם ה-CSS שמצפים לקבל, אבל קשה מאוד לתחזק את זה, קשה לכתוב או אפילו להבין למה בכלל התכוונו כשכתבנו את זה. הפתרון לכך הוא פשוט, ישראלי וקוראים לו: Applitools eyes.

Applitools Eyes

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

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

הכתבה בחסות Wix Engineering

Wix היא פלטפורמה לפיתוח Online presence באינטרנט, עם למעלה מ-120 מיליון משתמשים ב-190 מדינות. אנחנו ב-Wix Engineering מפתחים אפליקציות ענן מהמתקדמות בעולם, מקדישים זמן להתפתחות מקצועית ולמידה ולוקחים גם את ההנאה שלנו באותה הרצינות. תרבות הפיתוח שלנו מבוססת על חדשנות, יצירתיות ועל הצורך והרצון להמשיך לאתגר את עצמנו ואת גבולות הטכנולוגיה. אנו משתמשים בטכנולוגיות המתקדמות ביותר (Scala, Node, React, and Angular), בפלטפורמות מבוססות ענן (Google, Amazon and Azure) ומיישמים מתודולוגיות כגון Continuous Delivery ו-TDD. ל-Wix, שני מרכזי פיתוח בישראל - בתל-אביב ובבאר-שבע. מוזמנים לעקוב אחרינו גם ב-Twitter וב-Facebook.

כתב אורח

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

הגב

Be the First to Comment!

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
wpDiscuz

תגיות לכתבה: