JSConsoleLog

Browser’s Console Test Automation

היי חברים,

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

אך קודם כל, בואו נבין מהו אותו Console, איזה מידע קיים בו ולמה הוא חשוב לנו בבדיקות.

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

FullStackAutomationAdv

 

בואו נראה דוגמא לעבודה מול ה-Console, בתמונה הבאה אנו רואים תוכנית הכתובה ב-HTML אותה כתבתי והיא מכילה קוד ג’אווה סקריפטי (תחום בתגית ה-script):

console01

אנו רואים כאן בתוכנית כי קראתי לפונקציית ה-log (על ידי – console.log) והיא מדווחת לחלון ה-Console של הדפדפן. למעשה ביצעתי כאן 3 קריאות:

הראשונה מדפיסה ל-Console את האתר: http://yoniflenner.net

השנייה מדפיסה את המחרוזת: Result for 1 + 1 is:

והשלישית מדפיסה את תוצאת הפעולה המתמטית אחד ועוד אחד.

כשנפתח את חלון ה-Console של הדפדפן ע”י F12 ובחירת טאב ה-console, זה מה שנראה:

console02

איך זה מתקשר לבדיקות ?

למעשה כאשר הדף מתרנדר (render) בדפדפן, אל חלון ה-Console נזרקות כל מיני שגיאות על אותו הדף, למשל במידה והדף לא הצליח לטעון קובץ JS מאיזושהי סיבה, הודעה מתאימה תוצג ב-Console , או אם ישנה קריאה בדף ה-HTML להצגת תמונה והתמונה בפועל לא קיימת – תוצג הודעה מתאימה לכך ב- Console (מעבר לזה שהיא לא תוצג בדפדפן)

את ההודעות האלו אנו נרצה לתפוס בבדיקות שלנו. הנה לדוגמא, כך נראה חלון ה-Consoe של האתר Ynet (ניתן לראות בבירור שמישהו שם מפשל בפיתוח ה-FE… זו אולי הסיבה למה הדפים שלהם נטענים לאט מאוד):

console03

 

אז איך נתפוס את ההודעות הללו ? באופן ידני, נוכל פשוט לטעון את הדף , לפתוח את חלון ה-Console ולהסתכל בתוכן שלו.

ובאוטומציה ? איך אנחנו יכולים לממש שהתוכנית שכתבנו ב-Selenium תוכל לקרוא את תוכן ההודעות מחלון ה-Console ?

אני חייב לציין כי הדוקומנטציה באינטרנט על נושא זה היא די מועטה עד לא קיימת בכלל, צריך להתאמץ בשביל לדלות פיסות של קוד למימוש הלוגים של ה-Console עם Selenium, ובכל זאת, החלטתי להרים את הכפפה ולהציג כאן מימוש שלי לבעיית איסוף הלוגים. הפעם, רק בשביל הגיוון, החלטתי קצת לעזוב את Java ולממש את הפתרון ב-#C.

אז קודם כל עלינו להכיר את ממשק ה-Logs שקיים בספריות הקוד של ה-WebDriver.

יש לנו כאן 2 מתודות: האחת מחזירה לי את הלוג האחרון מתוך ה-Console (הערך המוחזר הינו אובייקט מסוג LogEntry), השנייה – מחזירה לי את כל הלוגים מה-Console וזה מגיע באובייקט מסוג Set (בג’אווה) או ReadOnlyCollection ב-#C של LogEntries

כך שבשביל לקבל את רשימת כל הלוגים, אני אשתמש בפקודה (#C):

 

השתמשתי כאן ב-LogType מסוג Browser שזה אומר שאני אתפוס את כל סוגי הלוגים בדפדפן, אני יכול לבחור ערך אחר לפי הפרמטרים הבאים:

console04

 

יש באפשרותי גם לקבוע את סוג ה-Log עם איתחול הדרייבר ובנוסף גם לקבוע את ערך ה-LogLevel , על ידי שימוש ב-ChromeOptions , כך למשל:

 

כאן נעשה שימוש ב-Loglevel מסוג Severe, אלו הם הפרמטרים שה-LogLevel יכול לקבל:

console05

 

אז אם הייתי רוצה לבצע איזשהו מקרה בדיקה בו אני נכנס לאתר של Ynet ומוודא כי אין בו כל הודעות שגיאה (ברמת ה-Severe), הייתי יכול לממש בדיקה כזו כך:

 

מה ראינו כאן ?

אספתי את כל הלוגים של הדפדפן ברמת ה-Severe אל תוך Collection ובדקתי את גודלו, במידה וגודל ה-Collection הינו אפס, זה אומר שהוא ריק, שזה אומר שאין הודעות שגיאה ב-Console – על זה ביצעתי Assert. במידה ונזרקה לי הודעת שגיאה ל-Console דאגתי להדפיס הודעה ל-Console של ה-Visual Studio וכמו כן את תוכן כל ההודעות שנזרקו לי (ע”י לולאת ה-foreach)

התוצאה ב-Visual Studio הייתה:

console06

 

כעת, ארחיב קצת את הבדיקה שלי. נגיד שארצה לבדוק על כמה אתרים שונים האם יש להם שגיאות ב-Console, אקח כמה אתרים כמו: Google, Bing, AirBNB, Ynet וכמובן – YoniFlenner.net וארוץ עליהם בלולאה (ניתן כמובן גם לחלק אותם לטסטים נפרדים – אבל זה כבר פחות קריטי לדוגמא הזו):

 

ה-Output במקרה הזה יהיה בדיוק אותו output כמו שהרצנו את התוכנית הראשונה, אף אחד לא זרק שגיאה מלבד האתר של Ynet , אז עובדי Ynet : קחו זאת לתשומת ליבכם :-) ואגב – זה לא חדש, כבר כמה שנים שאתם זורקים המון Errors ל-Console…

 

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

היי, אני לא רובוט *

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">