העתיד כבר כאן – Playwright | אלכס קומנוב

השנה היא 2009. גרסה ראשונה של Selenium WebDriver או בשמו השני Selenium 2.0 רואה אור. זה היה מהפך של ממש בעולם האוטומציה. אם אנחנו מסתכלים היום על כל ההיסטוריה של הפרויקט הזה, אנחנו ללא ספק יכולים להגיד פה אחד שזה יצר סטנדרט של עולם האוטומציה. סלניום נלמד כבסיס של אוטומציה בסיסית ומתקדמת, הקהילה של סלניום הכי גדולה. אין ספור שאלות ותשובות ברשת (stackoverwflow למשל). המון יתרונות וחסרונות. 

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

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

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

פריימוורק (כמעט) כל יכול

אז מי אתה Playwright?

מדובר בשחקן הכי צעיר בעולם האוטומציה. הוא שוחרר לראשונה בפברואר 2020 עם גרסא 0.10.0 (נכון לכתיבת מאמר זה -  הגרסה העדכנית היא 1.22.2). הוא האח הצעיר של פריימוורק פופולרי אחר ושמו הוא Puppeteer, ששייך לחברת גוגל. הרעיון להקמה של פרויקט Playwright התחיל ע"י מספר מפתחים של חברת גוגל, שהיו בצוות שפיתח את Puppeteer. הם החליטו לקחת את כל הידע שצברו עד כה ולפתח משהו מהפכני וחדש, שיעצים את היתרונות ויתקן את החסרונות (ולא רק של Puppeteer). אותה קבוצת מפתחים מחליטה לעבור לחברת מייקרוסופט ולהתחיל בפיתוח. בגרסאות הראשונות, השוני בין השניים (Puppeteer ו-Playwright) כמעט ולא היה. הסינטקס והפונקציות היו נראים באופן כמעט זהה לחלוטין, הארכיטקטורה הייתה זהה. לאור השימוש הרחב והפופולריות של Puppeteer - כמעט ואי-אפשר היה לזהות את האח הצעיר״.

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

יתרונות של Playwright

• שייך לחברת מייקרוסופט.
• שוחרר לראשונה בפברואר 2020 תוך כדי לקיחת בחשבון של דברים פחות טובים בפריימוורקים אחרים.
• ההתקנה היא סופר פשוטה, ע"י פקודה אחת!
• תומך בכל הדפדפנים
  • דפדפנים מבוססי chromium.
  • דפדפן Firefox
  • דפדפן webkit (אותו בסיס המנוע כמו של דפדפן safari).
• לא מצריך שום plugin או דרייבר על מנת לתקשר עם דפדפנים. 
• ריצה מאוד מהירה של הטסטים בזכות הארכיטקטורה שלו.
• תומך בשפות תכנות הפופולריות (Typescript ,JavaScript, C#, Java, Python).
• כולל test runner מובנה להרצת הטסטים (הדבר אפשרי בעבודה עם שפת JavaScript/typescript).
• כולל ספריה של assertions מובנית.
• תומך בריצה מקבילית.
• כולל מספר דוחות מובנים (מהכי פשוט שמדפיס לקונסול ועד לתמיכה מובנית בדוחות של Allure. 
• כולל מנגנון בדיקות אוטומטיות על האלמנט לפני תחילת העבודה אתו (לדוגמא שהאלמנט נראה בעמוד, האלמנט לחיץ וכו׳).
• תומך בכל סוגי סלקטורים: CSS, xpath, text. הכל מובנה ומפורט היטב בדוקומנטציה.
• הדוקומנטציה של Playwright היא מעולה, שכוללת אתר ייעודי שמסביר בצורה מעולה על היכולות של הפריימוורק וכולל אתר ייחודי לכל שפת תכנות.
• תמיכה מובנית בצילומי מסך והקלטות וידאו.
• תמיכה מובנית בהקלטה של trace שכולל תיעוד מפורט של הטסט (כולל קריאות API , צילומי מסך וכו׳).
• התייחסות מהירה מצד של מפתחי הפריימוורק- מענה ראשוני מתקבל עד 48 שעות מרגע פתיחת הISSUE בריפו של הפריימוורק בפלטפורמת GitHub. 
• כולל דיבאגר ייחודי.
• כולל מקליט טסטים מובנה שיודע להציג את הקוד המוקלט בכמה שפות.
• שלל פונקציות שימושיות שמתעדכנת עם כל גרסה שמשוחררת (נרחיב על לא מעט מהן בהמשך).
• קהילה תומכת שרק הולכת וגדלה.

התקנה

הערה: אני מסביר כאן על אפשרויות ההתקנה של Playwright כאשר משתמשים בפיתוח באמצעות שפה ממשפחת JavaScript (בשימוש בשפות אחרות ההתקנה היא שונה ואפשר למצוא מידע על כך באתר הרשמי).

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

התקנה ידנית

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

• התקנה של ספריה עצמה:

npm i -D @playwright/test

• התקנה של הקבצים הנחוצים לעבודה עם הדפדפנים:

npx playwright install

בתום הרצת הפקודות הנ״ל - נקבל את כל הבסיס הנחוץ לעבודה עם פליירייט.

התקנה דרך פקודת init

האפשרות הזאת התווספה החל מהגרסה 1.18.0 היא מאפשרת לתקין את הפרויקט הבסיסי של Playwright ע״י שימוש בפקודה אחת בלבד:

npm init playwright@latest

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

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

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

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