בפרק הזה, הרביעי במספר בסדרת הכתבות שלי: מלחמת העולמות, אני הולך לסקור את הפריימוורק: Cypress

את Cypress כתבו המפתחים בשביל ליצור משהו שונה, הם לקחו את המגרעות של סלניום – הדברים הכואבים לנו וכתבו להם פתרונות אינטיליגנטיים. הפריימוורק נכתב כפרוייקט קוד פתוח עם מוצר מסחרי מעליו (Dashboard), וגם הוא (כמו ה-Puppeteer) יושב מעל NodeJS ומהווה למעשה ספרייה שלו, אופן עבודתו, בניגוד לאחרים שהוא עובד מעל אותו Thread של הדפדפן (מה שמוביל למהירות גבוהה ורמת "שבירות" נמוכה). הפריימוורק הזה מאופיין לבדיקות End 2 End ואת יתרונותיו לא ניתן לפספס.

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

קורס אוטומציה Full Stack Test Automation

 

הפשטות של Cypress מגיעה עוד משלב ההתקנה, הוא מאוד מהיר להטמעה, זהו בסה"כ מודול של npm כאשר תנאי ההכנה המוקדמים כוללים בתוכם:

  1. התקנת NodeJS
  2. התקנת VSCode (או כל IDE אחר שתומך ב-JS)
  3. התקנת הפריימוורק של Cypress ע"י הפקודה:
npm install cypress --save-dev

מכאן ההתנהלות מול Cypress היא די אינטואטיבית ודי זורמת, למי שמגיע לפני כן מעולמות ה-Selenium יבחין לבטח בכמה הבדלים (לטובה).

 

מהירות:

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

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

 

Test Runner:

אחד הדברים החשובים באוטומציה הוא היכולת שלנו לזהות בעיות לאחר ריצה בצורה המהירה והמדוייקת ביותר, וזה למה ? כי לא מעט פעמים קורה מצב כזה שנקרא: false alarm, מצב שבו הטסטים נופלים לא בגלל באג במוצר אלא בגלל בעיות סביבתיות או בעיות שלנו בקוד האוטומציה עצמו. את המצבים הללו אנחנו רוצים לאבחן כמה שיותר מהר, זה נקרא גם Root Cause Analysis. ומה Cypress יודע לתת לנו ? את אחד הפי'צרים המגניבים שיצא לי לראות בעניין הזה, ה-Test Runner האינטראקטיבי שלו, למעשה כאשר אנחנו מריצים את הבדיקה שלנו, Cypress יודע לקחת DOM Snapshots של האפליקציה בזמן ריצה באופן אוטומטי, שימו לב חברים כי אין כאן מדובר על Snapshot של צילומי מסך (כפי שחלק מכם מדמיינים) אלא ממש של ה-DOM עצמו (Document Object Model). זה אומר שבכל רגע נתון בזמן הריצה אני יכול לראות את המבניות של ה-HTML של האפליקציה (כן כולל גם צילום מסך), במידה וישנה נפילה, ניתן להבין די במהירות מה קרה שם:

מקרה שבו הטסט עובר:

Cypress Test Runner - Success

 

מקרה שבו הטסט נכשל:

Cypress Test Runner - Failure

 

 

טיפול אוטומטי בהמתנות:

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

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

  1. בזמן טעינה של דף חדש באפליקציה
  2. בזמן הטעינה של האלמנט ל-DOM
  3. ** בזמן שהאלמנט יהיה פונקציונלי (actionable state), שזה אומר שניתן יהיה ללחוץ עליו, ניתן יהיה להזין אליו טקסט וכו'.
  4. בזמן השוואה ווידוא האלמנטים (Asserts)

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

** אותו אלמנט אליו אנו ממתינים לבצע עליו פעולה מסויימת, Cypress תומך בכמה קריטריונים להמתנה: גלילה אל האלמנט, האלמנט מוצג (Not Hidden), האלמנט Enabled ועוד… ניתן לקרוא בדוקומנטציה של הפריימוורק את שאר הקריטריונים בלינק הזה.

 

בדיקות E2E אמיתיות:

ב-Cypress ניתן לא רק לכתוב בדיקות UI שהן אמנם מאוד פופולריות, אבל בהחלט לא רק. פריימוורק זה תומך גם בקריאות API כך שנוכל לבדוק את צד ה-Server

API Testing with Cypress

עם Cypress ניתן להשתמש במתודות ה-GET / POST / PUT / DELETE … וכך אנו מקבלים את יכולות האוטומציה Front End + Back End באותה מעטפת

נושא נוסף חשוב ש-Cypress תומך בו הוא כל עניין ה-Mock (חיקוי התנהגות של קומפוננטה אחרת במערכת או מחוצה לה).

 

סוגיי ווריפיקציה שונים ומגוונים:

בניגוד ל-Selenium לו אין חיבור ישיר ל-Unit Testing Framework כזה או אחר (שזה יתרון וחיסרון), את Cypress בנו מעל Unit Testing Framework שנקרא Mocha (במקרה הוא גם אחד הפופולריים ב-JS), מה זה אומר מבחינת סוגי ה-Asserts שלנו ? שיש המון כאלו, ואם עוד תוסיפו גם את העובדה שהם צירפו את Chai לחגיגה וכמו כן את ההרחבות של Sinon ו-jQuery, תקבלו את המגוון הנרחב ביותר של פעולות ווידוא ווריפיקציה משל כל כלי אוטומציה שהוא בשוק. למעשה אני לא מכיר מישהו שצריך כל כך הרבה, אבל ניחא. הם תומכים, צריכים ? תשתמשו, לא צריכים ? אל תשתמשו.

מכיוון שיש כל כך הרבה סוגי Assertions אני נוהג לחלק אותם לשניים – Implicit Assertions ו-Explicit Assertions. כאשר בראשון (ולדעתי המומלץ) נשתמש במתודת ה-should ואילו באחר נשתמש ב-assert או ה-expect.

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

it('My Cool test case',function() {
    cy.vist('http://atidcollege.co.il/')
    cy.get('.main-menu')
    .contains('Cypress Course')
    .click()

    cy.get('.title')
    .type('My Cypress Course')

    cy.get('form')
    .submit()
})

בפקודת ה- cy.visit, למעשה, מבלי שאגיד לו מפורשות – Cypress יוודא שדף ה-HTML יחזור משרת ה-atidcollege.co.il עם status code = 200

בפקודת ה-cy.get, ה-Cypress יוודא שהאלמנמט יופיע ב-DOM

בפקודת ה-cy.click, ה-Cypress יוודא שהאלמנט יהיה בר לחיצה (clickable)

בפקודת ה-cy.type, ה-Cypress יוודא שהאלמנט יהיה typeable (מצטער – אין לי תירגום לעברית טוב של זה)

בפקודת ה-cy.contains, ה-Cypress יוודא שהאלמנט עם אותו תוכן יופיע ב-DOM

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

 

דוקומנטציה נרחבת:

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

אני חייב לציין כי הדוקומנטציה ב-Cypress היא אחת הטובות שיצא לי לראות, לאין שיעור טובה יותר מהדוקומנטציה הרישמית של Selenium , כאן יש הסברים מפורטים על כל ה-API, עם דוגמאות קוד ולפעמים הסברים מלווים בסרטונים קצרים, מוזמנים להיכנס ולהתרשם: https://docs.cypress.io

 

הרצה אוטומטית:

פיצ'ר נחמד שקיים בפריימוורק זה ולא ראיתי בשום מקום אחר הוא ההרצה האוטומטית של מקרי בדיקה. החבר'ה שם שפיתחו את המוצר יודעים כי ברגע שאנחנו שומרים את קובץ ה-spec.js שלנו בו רשמנו את מקרי הבדיקה, סביר להניח כי השלב הבא יהיה לבוא ולהריץ את אותו קובץ, אז הם כתבו איזשהו Event Listener שמאזין לפקודת ה-save ואוטומטי הם כבר מריצים את הבדיקה, נחמד.

 

התממשקות לכלים אחרים:

Cypress יודע להתממשק בקלות לכלי CI/CD, ללא צורך בתלות של Maven (מפתחי Java) או MSBuild (מפתחי NET.) , כמו כן יש לו Dashboard נחמד אשר יודע לנהל ולפלח את היסטוריית הריצות שלכם ניתן כאמור לשמור צילומי מסך וגם סרטוני וידאו לכל הרצה.

Cypress Dashboard

 

 

פלטפורמה ו-Ecosystem:

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

אני חייב לציין כי קהילת Cypress צומחת בקצב מעורר השראה, כך גם כמות הפלאגינים שנכתבו לו עד כה, בלינק הבא ניתן להיכנס ולהתרשם ממה שלקהילה יש להציע: https://docs.cypress.io/plugins

ישנם פלאגינים שמטפלים בקוד עצמו ובפעולות של Cypress לעבודה נוחה יותר כמו למשל פלאגין ה-Drop Down , או זה עימו ניתן לבצע Switch to iFrame, ישנן הרחבות של הספרייה (Custom Commands), פלאגינים של כלי פיתוח כמו code-coverage, Docker images וכו', פלראגינים שונים של מערכות דוחות כמו Allure Reports , Slack, MochaAwsome ועוד הרבה… (בצילום המסך אנו רואים פלאגינים של בדיקות וויזואליזציה):

Cypress Plugins

 

נקודה נוספת:

מעבר לכל מה שכבר נכתב, צריך לזכור כי אחת מהמטרות של Cypress היא לנסות ולהנגיש את הצד של הבדיקות יותר למפתחים, עד שיצא פריימוורק זה, מפתחי ה- Front End בעיקר כתבו בדיקות יחידה (Unit Test) אם בכלל, לבוא ולנסות לשכנע אותם להתחיל לכתוב עם סלניום שזהו דומיין רחוק מהם לגמרי (וגם ברוב המקרים בשפה שונה וסביבה שונה) – זו הייתה משימה לא קלה בכלל שברוב המקרים גם לא יצאה לפועל. עבודה עם Cypress מאפשרת להם עדיין לכתוב בדיקות בדיוק באותה סביבה, באותה שפה, מעל אותו NodeJS שהם כבר מכירים כמו את כף ידם, מכאן הדרך להכניס אותם גם להוציא קוד איכותי יותר היא הרבה יותר קצרה.

 

מתי לא נשתמש ב-Cypress ?

  • אם האפליקציה שלנו עובדת עם טכנולוגיות מיושנות. תראו, אחד מהקווים המנחים של מפתחי Cypress היה לכתוב פריימוורק לאפליקציות מודרניות, מה זה אומר מודרניות ? כאלו שמשתמשות במתודולגיות החדשות כמו למשל SPA שזה Single Page Applications (ג'ימייל למשל זוהי אפליקציה כזו שהכל מתנהל באותו דף, איננו עוברים URLs בג'ימייל למשל), אך אפליקציות שפותחות טאבים או חלונות חדשים, אינם מתאימות ל-Cypress
  • אם הלקוחות שלנו עובדים עם דפדפנים כמו Internet Explorer או Safari ואנו חייבים להריץ את הבדיקות גם עליהם
  • מפתחי אוטומציה שרגילים לכתוב בפייתון \ ג'אווה \ סי שארפ יגלו ש-Cypress תומך ב-JS, זה אולי יכול להרתיע אותם מלנסות להתחיל לעבוד עם פריימוורק זה. אני טוען שמעולם שפת תכנות לא אמורה לעצור מפתחי אוטומציה (ומפתחים בכלל) מלהתקדם
  • ניתן להריץ במקביל טסטים עם Cypress אך זה דורש מאיתנו שימוש ב-Docker (חברות שעדיין לא הטמיעו טכנולוגיה זו בצוותים שלהם, יתקשו מאוד להריץ במקביל עם Cypress)
  • במידה ונרצה להשתמש באופן מסיבי עם ה-Dashboard של Cypress (כמות משתמשים גדולה, מספר הקלטות רב…) נצטרך לשלם רישיון מסחרי עבור פיצ'ר זה. פשוט צריך לקחת זאת בחשבון, אם כי כבר מישהו כתב פתרון חינמי ל-Dashboard שלהם שנקרא: sorry-cypress

 

 

6 תגובות נוספו

  1. בוריס 21/07/2020 הגב

    Cypress בהחלט כלי מעניין אם כי מוגבל למי שרוצה לבצע בדיקות DB למיניהן בנוסף או השלמה לבדיקות UI ולקבל "פתרון מלא" (בדיקות UI + DB בטסט אחד).
    נכון לרגע זה (וכנראה לתמיד) cypress לא יתמכו באופו רשמי בבדיקות בסיסי נתונים שכן הייעוד של הכלי הוא ל UI בלבד, מה שאומר שמי שיש לו אפליקציה עם וריפיקציה של מידע בבסיס נתונים לא יוכל להשתמש ב cypress.
    זאת מגבלה די רצינית מכיוון שזה "מגדיר" את cypress רק ככלי/פריימוורק לבדיקות UI/UNIT/INTEGRATION ולא פתרון מלא לבדיקות UI + DB ( למשל אם ניקח את MongoDB אז כגון MongoClient במקרה של java + סלניום או pymongo במקרה של פייתון + סלניום).

    • היי בוריס,
      אני לא אומר שאתה טועה, אבל האם אתה מכיר פריימוורק אחר שכן מכיל בדיקות UI עם בדיקות DB ?
      שים לב לדוגמאות שאתה בעצמך נתת, לא הבאת פריימוורק אחד שנותן את 2 היכולות הללו, גם אותו סלניום שציינת בתגובתך היית צריך "לחבר" עם פריימוורק אחר, אז מה כבר ההבדל בין מה שאתה מציע לבין Cypress + פריימוורק ב-JS שמתממשק לDB ?

  2. בוריס 21/07/2020 הגב

    בהחלט אין פריימוורק אחד ויחיד לבדיקת DB +UI(בכל אופן אני לא מכיר) אך במקרה של סייפרס איני בטוח לגבי התמיכה שלהם בעבודה עם פריימוורקים אחרים ב JS לבדיקת DB.
    לא מצאתי אזכור או דוגמה אחת ברשת לקוד/טסט של סייפרס איך ניתן להתחבר עם שם משתמש וסיסמה + בדיקה ב DB שהמשתמש התחבר, למשל.
    אשמח לדעת שאני טועה.

    • אין קשר בין Cypress לבין התחברות ל-DB כמו שאין קשר בין Selenium לבין MongoClient , מדובר בפרוייקט תוכנה שבו אתה קורא לכמה ספריות קוד שונות האחת עושה פעולות אוטומטיות על הדפדפן , השנייה מנהלת את הסשן ל-database
      אם אתה רוצה גם להתחבר ל-db ? אין בעיה, צור פרוייקט מעל node , תתקין את המודול של סייפרס, תתקין מודול שמאפשר לך להתחבר ל-db וגמרנו (למשל: https://www.npmjs.com/package/connect-mongodb) , הקשר בין connect-mongodb לבין סייפרס הוא בדיוק אותו הקשר כמו selenium ו-MongoClient

  3. בוריס 21/07/2020 הגב

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

  4. בוריס 21/07/2020 הגב

    בהחלט מודע שמדובר בספריות שונות(כאילו דהה..:) ) ושכל אחת מיועדת לסוג אחר של בדיקות. ייתכן מאוד ואפשרי לבצע את הבדיקות האלו, ועדיין, לא ראיתי דוגמה אחת ברשת ברמת קוד לאיך שבדיקה "מלאה" כזאת אמורה להיות (חיבור שם משתמש + סיסמה ובדיקה ב DB שהיוזר התחבר). גם בלינק שצירפת, לי לא מובן העניין.
    כאמור, ייתכן ואני טועה ודוגמה לקוד בהחלט תעזור.
    הבאתי לך רעיון ל tutorial חדש? 🙂

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