היי חברים,

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

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

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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

IList logs = driver.Manage().Logs.GetLog(LogType.Browser);

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

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

ChromeOptions options = new ChromeOptions();
options.SetLoggingPreference(LogType.Browser, LogLevel.Severe);
IWebDriver driver = new ChromeDriver(options);

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

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

class TestWithLogs
{
	IWebDriver driver;
	IList logs;
	String URL_Ynet = "http://ynet.co.il";

	[OneTimeSetUp]
	public void StartSession()
	{
		ChromeOptions options = new ChromeOptions();
		options.SetLoggingPreference(LogType.Browser, LogLevel.Severe);
		driver = new ChromeDriver(options);
		driver.Manage().Window.Maximize();
        driver.Navigate().GoToUrl(URL_Ynet);
	}

	[Test]
	public void MyTestLog()
	{
        logs = driver.Manage().Logs.GetLog(LogType.Browser);
		try
		{
			Assert.True(logs.Count == 0);
		}
		catch (AssertionException e)
		{
			Console.WriteLine("Assert Failed: " + e.Message);
			foreach (LogEntry log in logs)
			{
				Console.WriteLine(log.Message);
			}
		}
	}

	[OneTimeTearDown]

	public void CloseSession()
	{
		driver.Quit();
	}
}

מה ראינו כאן ?

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

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

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

class TestWithLogs
{
    IWebDriver driver;
    IList logs;
    String URL_MyBlog = "http://blog.yoniflenner.net";
    String URL_Ynet = "http://ynet.co.il";
    String URL_Bing = "http://bing.com";
    String URL_Google = "http://google.com";
    String URL_AirBNB = "http://airbnb.com";

    [OneTimeSetUp]
    public void startSession()
    {
        ChromeOptions options = new ChromeOptions();
        options.SetLoggingPreference(LogType.Browser, LogLevel.Severe);
        driver = new ChromeDriver(options);
        driver.Manage().Window.Maximize();
    }

    [Test]
    public void TestSeveralSites()
    {
        String[] SiteURLs = { URL_MyBlog, URL_Ynet, URL_Bing, URL_Google, URL_AirBNB };
        GetConsoleLogs(SiteURLs);
    }

    public void GetConsoleLogs(String[] URLs)
    {
        for (int i = 0; i < URLs.Length; i++)
        {
            driver.Navigate().GoToUrl(URLs[i]);
            logs = driver.Manage().Logs.GetLog(LogType.Browser);
            try
            {
                Assert.True(logs.Count == 0);
            }
            catch (AssertionException e)
            {
                Console.WriteLine("Assert Failed: " + e.Message);
                foreach (LogEntry log in logs)
                {
                    Console.WriteLine(log.Message);
                }
            }
        }
    }

    [OneTimeTearDown]
    public void CloseSession()
    {
        driver.Quit();
    }
}

 

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

השאר הערה\הודעה