שימוש ב-Selenium IDE לבדיקות

אני חייב לומר שהרקע שלי הוא לא סטנדרטי.

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

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

אז למי ההרצאה מיועדת?
אם אתם מפתחים שלא יצא להם להשתמש בכלי בדיקות אוטומטיים (איש QA עגמומי לא נחשב) – ההרצאה הזו עבורכם!
אם אתם מפתחים שחשבו שזה המון ביג’רס להתחיל להתעסק בבדיקות – זו ההרצאה בשבילכם!
אם אתם מפתחים שכן יצא להם להתעסק עם בדיקות אוטומטיות אבל לא יצא להם לעסוק בסלניום IDE או ב-Jasmine SA – ההרצאה תעניין אתכם.

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

למה צריך אוטומציה

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

התקנת Selenium IDE

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

הקלטת בדיקה

אחרי שהתקנו, כל מה שעלינו לעשות הוא להקליט בדיקה – וזה עובד בדיוק כמו מקרו. איך מקליטים? הנה דוגמה.

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

ניגון בדיקה

שינוי בדיקה

וכמובן שאפשר לשנות את ההקלטה בקלות – תוך כדי נגינה למשל – הנה דוגמה טובה.

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

צירה ושינוי באמצעות קוד salenese

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

וכך נראה הקוד:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://wp5.myil.info/" />
<title>Create reply</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Create reply</td></tr>
</thead><tbody>
<tr>
	<td>open</td>
	<td>/</td>
	<td></td>
</tr>
<tr>
	<td>clickAndWait</td>
	<td>css=span.leave-reply</td>
	<td></td>
</tr>
<tr>
	<td>assertTextPresent</td>
	<td>Leave a Reply</td>
	<td></td>
</tr>
<tr>
	<td>type</td>
	<td>id=author</td>
	<td>Ran</td>
</tr>
<tr>
	<td>type</td>
	<td>id=email</td>
	<td>[email protected]  </td>
</tr>
<tr>
	<td>type</td>
	<td>id=url</td>
	<td>https://internet-israel.com</td>
</tr>
<tr>
	<td>type</td>
	<td>id=comment</td>
	<td>TEST reply</td>
</tr>
<tr>
	<td>clickAndWait</td>
	<td>id=submit</td>
	<td></td>
</tr>
<tr>
	<td>assertTextPresent</td>
	<td>TEST reply</td>
	<td></td>
</tr>
<tr>
	<td>open</td>
	<td>/</td>
	<td></td>
</tr>
<tr>
	<td>clickAndWait</td>
	<td>css=span.leave-reply</td>
	<td></td>
</tr>
<tr>
	<td>assertTextPresent</td>
	<td>Leave a Reply</td>
	<td></td>
</tr>
<tr>
	<td>type</td>
	<td>id=author</td>
	<td>Ran</td>
</tr>
<tr>
	<td>type</td>
	<td>id=email</td>
	<td>[email protected]  </td>
</tr>
<tr>
	<td>type</td>
	<td>id=url</td>
	<td>https://internet-israel.com</td>
</tr>
<tr>
	<td>type</td>
	<td>id=comment</td>
	<td>TEST reply</td>
</tr>
<tr>
	<td>clickAndWait</td>
	<td>id=submit</td>
	<td></td>
</tr>
<tr>
	<td>assertTextPresent</td>
	<td>Duplicate</td>
	<td></td>
</tr>
</tbody></table>
</body>
</html>

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

אנחנו יכולים ליצור בעצם כמה בדיקות מאוגדות בתוך test suit אחד – לחיצה על play והכל מתחיל לעבוד עם דו”ח שיראה לנו את כל השגיאות.

סיכום Selenium IDE

ברור לכם שהראיתי כאן דוגמאות מאד פשוטות, אבל הדוקומנטציה של סלניום מכילה המון פקודות – לא רק בדיקת טקסטים וקליק, אלא גם פעולות מורכבות יותר – לבדוק alerts למשל, להפעיל אירועי JavaScript שונים. גם הסלקטורים משתנים. אני יכול לבחור סלקטור על בסיס class כפי שראיתם או id. אבל אני יכול לבחור גם על בסיס xpath או על בסיס כל סלקטור אחר שאני רוצה. עם מגוון אירועים, סלקטורים ופעולות שונות שאני יכול לבצע על הדף, אפשר לכתוב שלל של בדיקות כבר היום בקלות עם ה-IDE בלי להסתבך עם התקנת סביבה, build ושרת.
זה הבסיס של סלניום IDE – ובעצם מעכשיו אתם יכולים להתחיל לכתוב בעצמכם את הבדיקות או להנחות את איש ה-QA שלכם להכין סט של בדיקות בסיסיות שימנעו ריגרסיות מיותרות. כמובן שסלניום IDE הוא רק ההתחלה ואנחנו יכולים לקחת אותו הרבה יותר רחוק – אם אנחנו לוקחים אותו אל השרת. זה כמובן חורג מעניין הפרונט אנד, וכאן יש גם לסלניום מתחרים רציניים יותר. אבל ברמת המפתח הבודד או איש ה-QA הבודד, שימוש מושכל בסלניום IDE יכול כבר היום לחסוך לא מעט בדיקות שחוזרות על עצמן.