סייפרס הוא ספריית בדיקות ה End-to-end האהובה ביותר על מתכנתי Front End היום ו testing-library היא ספריית ה Unit Test המובילה. הנה סיכום קצר של ההבדלים בין שני הדברים ובסוף המלצה במה כדאי להשתמש.

1. מה זה Cypress

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

תוכנית בדיקה ב Cypress היא תוכנית JavaScript שרצה בתוך סייפרס ונותנת הוראות לדפדפן באמצעות API שסייפרס פיתחו. תוכנית לדוגמה נראית כך:

describe('My First Test', () => {
  it('clicking "type" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which includes '/commands/actions'
    cy.url().should('include', '/commands/actions')
  })
})

כתיב ה describe/it צריך להיות מוכר גם מפריימוורקים אחרים. תוכן ה it הוא הבדיקה עצמה. המשתנה המיוחד cy מגיע מסייפרס והוא אוביקט החיבור שלנו ל API של הסביבה: בעזרתו נגרום לדפדפן לבקר באתר מסוים (עם הפקודה visit), למשוך DOM Element מסוים עם הפקודה get, ללחוץ על אותו אלמנט עם הפקודה click ולהסתכל על ה URL של העמוד.

הבדיקה בדוגמה אגב מחפשת אלמנט עם הטקסט type, לוחצת עליו ואז מוודאת שה URL החדש של העמוד מכיל את הטקסט /commands/actions.

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

2. מה זה Testing Library

טסטינג לייבררי הוא אוסף של ספריות בדיקה ל Components Based Frameworks. יש לנו react-testing-library לריאקט, vue-testing-library ל Vue, וגם angular-testing-library, reason-testing-library, svelte-testing-library ורבות נוספות.

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

במילים אחרות testing-library היא ספריה שאחראית רק על הקוד של הבדיקה עצמה, ולא על המנגנון שמריץ את הבדיקה. היא תמיד צריכה לעבוד בשילוב עם כלי הרצת בדיקות. ואגב שני ואריאנטים מעניינים של testing-library הם cypress-testing-library ו webdriverio-testing-library שמאפשרים להריץ את הבדיקות בסגנון testing-library בתוך כלי הרצת בדיקות cypress או selenium.

קוד בדיקה של react-testing-library לדוגמה נראה כך:

test('loads and displays greeting', async () => {
  render(<Fetch url="/greeting" />)

  fireEvent.click(screen.getByText('Load Greeting'))

  await waitFor(() => screen.getByRole('heading'))

  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toBeDisabled()
})

3. מה טוב ב Cypress

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

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

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

לסייפרס יש גם אינטגרציה עם Front End Frameworks וככה אתם יכולים להריץ בדיקה רק על קומפוננטת ריאקט ספציפית לדוגמה במקום לרוץ על כל העמוד.

4. מה טוב ב Testing Library

הווריאנטים הפופולרים של testing-library משתמשים ב jest כדי להריץ את הבדיקות. ג'סט הוא כלי הרצה שמדלג לגמרי על הדפדפן ומריץ את הבדיקה בתוך Node.JS. היתרון של ג'סט בתור סביבת הרצת בדיקות הוא המהירות: בגלל שלא צריך דפדפן הבדיקה רצה הרבה יותר מהר.

בנוסף ה API של testing-library נועד לעזור לנו המתכנתים לבנות קוד טוב יותר - לדוגמה מתכנת יצטרך מאוד להתאמץ כדי לתפוס אלמנט לפי CSS Selector, והרבה יותר קל ומובנה להסתכל שם על אלמנטים לפי Aria Role. המטרה היא כמובן לעודד מתכנתים להטמיע Aria Roles במקומות הנכונים ובאופן כללי לעבוד בצורה נגישה.

5. מה רע ב Cypress

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

ה API של סייפרס מבוסס על jQuery וגם זה מרגיש קצת מיושן היום.

6. מה רע ב Testing Library

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

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

גם יכולת ה Debugging של testing-library הוא בעייתית. יש טענות שאפשר לחבר אותו ל VS Code ולהשתמש בדיבגר המובנה שלהם, אבל אני לא הצלחתי לגרום לזה לעבוד.

7. אז במה לבחור?

האמ;לק שלנו להיום הוא פשוט:

1. אם אתם צריכים לבדוק קומפוננטה ספציפית שאתם כותבים ורוצים ספריית בדיקות שתעודד אתכם לכתוב את הקוד שלה כמה שיותר נקי - לכו על testing-library ו Jest.

2. אם אתם צריכים לבדוק אינטגרציה בין כמה קומפוננטות או קומפוננטה מסובכת שאין לכם דרך קלה לשנות את ה Markup שלה - לכו על Cypress.

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