איך עושים צעדים ראשונים - Playwright

קצת לפני שדוהרים קדימה

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

כמובן שהשאלה הראשונה שנשאלת היא - מה עדיף לבחור? ועל זה אפשר לפתח דיונים שיימשכו ימים ולילות. במאמר הזה אנחנו נניח שבחנו כבר את הפריימוורק שלנו, ושבחרנו ב-playwright. ואז נעבור לצמד שאלות שחוזר על עצמו לא מעט. איך מתחילים צעדים ראשונים עם הפריימוורק ואיזו שפה כדאי לבחור (במידה והפריימוורק תומך בכמה שפות).

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

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

בימינו אנו (ינואר 2023) הוא יותר ויותר בשימוש ועומד על רף של יותר מ1.4 מיליון הורדות שבועיות! יש כבר קורסים באתר יודמי. יש כבר סרטונים ופלייליסטים באתר יוטיוב, ביניהם גם הערוץ הרשמי של הצוות בו הם מעלים סרטונים עם ההסברים על כל גרסה שיוצאת.  

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

אחרי הקדמה קצרה, בואו וניגש לענות על  השאלות שלנו. 

 שפת הפיתוח

נתחיל מזה שבחירת שפה יכולה להיות תלויה בכמה גורמים.

אחד הגורמים שיש להם משקל מאוד גדול זה השפה שקהל המשתמשים (בין אם נוכחי, בין אם עתידי) שולט בה. אפשר לראות יותר ויותר שאת הטסטים האוטומטיים כותבים לא רק אנשי QA אלא גם מפתחים. בהרבה מקרים השפה של האוטומציה נגזרת מהשפה בה כותבים צוותי פיתוח. למשל, אם משתמשים  בפייתון - הנטייה תהיה פייתון. אם אני אביא את הדוגמא של חברת SeatGeek - לפני תחילת העבודה עם playwright,  צוות QA היו כותבים אוטומציה באמצעות סלניום בשפת java אבל צוותי פיתוח שלנו משתמשים ב-TypeScript וב-#C. לכן כאשר ניגשנו לשאלה של שפת הפיתוח עם Playwright, עמדנו בפנינו שתי אופציות של שפת הפיתוח:

• TypeScript - הינה השפה העיקרית בה משתמשים צוותי פיתוח.
• Java - הינה השפה שבה שולטים אנשי QA שלנו על בסיס עבודה של כמעט שנתיים עם פרויקט האוטומציה הקיים.

לאחר לא מעט מחשבה החלטנו שיותר קל יהיה להעביר את צוות QA ל-TypeScript (מדובר היה על 16 אנשים) וזה אל מול אופציה להעביר את אנשי פיתוח (בערך 50 אנשים) ל-Java. לעקומת הלמידה ישנו מחיר לא קטן של זמן וצריך לקחת את זה בחשבון.

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

לאחר עבודה של שנה וחצי עם פריימוורק, ההמלצה שלי היא אם ישנה אפשרות תלכו על האופציה של Playwright עם שפת JS\TS. 

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

• דוחות מובנים של הפריימוורק
• Test Runner מובנה של הפריימוורק
• התקנה מהירה ע״י שימוש בפקודה אחת פשוטה
• תוסף מטורף ורשמי של הצוות ל-Visual Studio Code, שכולל repository בנפרד שמאפשר לפתוח באגים לצוות.

אם להציץ על חיבורים עם שפה אחרת, למשל על Java, הכל יעבוד בצורה מעולה! זאת אומרת, הפונקציונליות של עבודה עם אלמנטים תהיה זהה. אבל אז אנחנו מגיעים לחלק של הרצת הטסטים. במקרה של Playwright + JS/TS - מקבלים את כל המכלול מהצד של צוות של פליירייט. הכל מפותח ומתוחזק ע"י הצוות עצמו. אם נתבונן בפתרון של חיבור עם שפת Java, אז כבר עושים שימוש (למשל) ב- TestNGבשביל הרצת הטסטים וזה פתרון מעולה. אבל יכול להיווצר מצב תיאורטי שמשהו ב-TestNG עצמו לא יעבוד כראוי, וזה יכול להפריע להרצה תקינה של טסטים, ואפילו בואו נניח שמדובר בבאג שצריך לתקן אותו. בגלל ש-TestNG זה לא הפיתוח של צוות Playwright עצמו - זה יכול לקחת יותר זמן עד שהבאג יטופל, מאחר ויש פה עוד צד נוסף שאמור לקחת חלק בתיקון.

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

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

בנוסף, הצוות של Playwright באמת מקשיב לקהילה שלו ומנסה לתת פתרון לכל בעיה או הצעה לשיפור. 

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

הצעדים הראשונים

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

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

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

עושים את זה באמצעות שני דברים פשוטים:

1. נותנים בלייק

2.כותבים תגובה שאתם הייתם רוצים גם כן לראות את הפיצ׳ר הזה בעתיד

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

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

עוד מקור שאני ממש ממליץ עליו זה קורסים של פלטפורמת Udemy. תמורת עשרות שקלים בודדים - אפשר לרכוש קורס שיתרום לכם המון!  הנה דוגמא  לקורס עם java, קורס עם javascript, וקורס עם python. 

אני רוצה להתעכב קצת על התקנה הראשונית. צוות של Playwright דאג לנו לשתי אופציות של התקנות סופר מהירות (כאשר בוחרים לעבוד עם JS/TS).

• התקנה עם שורת פקודה:
  • מריצים פקודה אחת פשוטה:

npm init playwright@latest

• בסרטון הזה אפשר לראות את ההתקנה הראשונית של הפרויקט ממש מתיקיה שהיא ריקה.

• התקנה דרך התוסף הרשמי של VSCode:
  • מתקינים את התוסף הרשמי
  • פותחים command palette
  • מריצים Test: Install Playwright
• בוחרים את האופציות הרצויות  ולוחצים על OK.
• בסרטון הזה אפשר לראות את כל תהליך ההתקנה.

הקסם הוא שהכל ירוץ בצורה אוטומטית, מבלי שנצטרך לעשות משהו נוסף. 

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

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

לסיכום העניין - צוות של Playwright באמת עושה עבודה מטורפת ובכל תצורה שתבחרו, אתם תהנו מהקסם שתקבלו! לרגע לא הצטערנו שבזמנו הבאנו אמון בזה. ומי שרוצה קסם מיוחד שנותן קצת אקסטרות, מוזמן לפחות לבדוק את הצמד של Playwright + TS/JS.

מוזמנים לבקר גם בערוץ יוטיוב שלי ובפלטפורמה החינמית שבניתי.