אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » ספריות ומודולים » הפעלת Cypress.io עם GitHub actions

הפעלת Cypress.io עם GitHub actions

רן בר-זיק יוני 13, 2021 7:07 am תגובה אחת

הכנסת בדיקת E2E מלאה לתוך GitHub Actions. יאפשר לכם לקבל אישור אוטומטי לכך שהאתר/אפליקציה שלכם תקינים בכל בילד.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמרים הקודמים על Cypress.io הסברתי על Cypress ועל E2E ואיך משתמשים בו ואיך משלבים אותו בתוך תהליך CI. היתרון של Cypress הוא שאפשר לשלב אותו גם ב- GitHub Actions בקלות רבה וגם לבצע דיבוג דרך האתר של Cypress.io למי שרוצה.

ראשית, למי שלא מכיר את GitHub actions – כתבתי על כך במאמר הזה. מדובר בדרך מעולה לביצוע CI וגם CD בפרויקטים בגיטהאב. כלומר בדיקות הקוד והבדיקות האוטומטיות? הכל נעשה דרך GitHub actions וכן, גם Cypress. הבדיקות בגיטהאב בכל עוד הפרויקט שלכם בקוד פתוח ואתם לא עוברים 2000 דקות בדיקה בחודש זה יהיה בחינם. אם אתם כבר עוברים – אז עאפשר להגדיל את התוכנית ב-4 דולר לחודש למשתמש. כלומר כל עוד אתם עובדים בסקייל קטן – זה חינמי. אם לא קראתם את המאמר וכל מה שאני כותב פה נשמע לכם כמו ג'יבריש – קריאה במאמר תסדר את העניין.

אז כרגיל בגיטהאב actions הכל די פשוט – גם לשלב את GitHub actions. כל מה שצריך לעשות זה להריץ את הבדיקה אבל מתוך image שיכול לתמוך בפעולות גרפיות. מה זה אומר בעצם? אם אתם מריצים Cypress מהמחשב שלכם תוכלו לראות שהדפדפן נפתח. זה אומר שחייב להיות דפדפן על גבי מערכת ההפעלה שתבדוק אותו. בדרך כלל זה יהיה ubuntu-latest או windows-latest אם אתם רוצים לבדוק על דפדפן בסביבת מיקרוסופט. למרבה המזל, לא צריך לנחש יותר מדי כי יש ריפוזיטורי עם הסברים ודוגמאות איך מריצים בדיקות כאלו. הנה הדוגמה הפשוטה ביותר:

name: End-to-end tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout
        uses: actions/[email protected]
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
        uses: cypress-io/[email protected]

הבדיקה הזו פשוט מריצה על Cypress על אובונטו. זה הכל. וזה ירוץ בכל פוש כאשר אפשר לשנות את זה בהתאם לצורך.

הבעיה היא שזו דוגמת Hello World. כי בפועל יש סיכוי שזה יפול ואז לא בטוח שתדעו בדיוק למה זה נפל. זו הסיבה שכדאי מאוד לעשות אינטגרציה עם Cypress.io שמאפשרת לכם דיבאגינג מתקדם. עד 500 בדיקות בחודש זה חינמי. מעבר לזה המחיר ממש יקר. אבל 500 בילדים לחודש זה המון ומספיק לשימושים חינמיים. אם אתם דואגים, אפשר לעשות את הבילד הזה רק לפני release או ב-tag חדש.

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

הדבר הבא שאפשר לעשות הוא להכניס את ה-id ל-cypress.json ואז הוא להריץ מקומית את הפרויקט שלכם עם המפתח בדיוק לפי הדוגמה. מייד אחרי ההרצה תוכלו לראות שההרצה נרשמה ב-Cypress.io ואפשר לראות את כל השלבים שלה ולנגן אותה שוב ולדבג. שזה מאוד נחמד אבל קצת מיותר בהרצה מקומית. השוס האמיתי הוא לעשות את זה בהרצה מרחוק. אבל איך עושים את זה? הרי המפתח חייב להיות סודי! במקרה הזה אין בעיה. יש לנו את GitHub Secrets. שם נוכל לאכסן את המפתח והוא ייקרא כשצריך.

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

אחרי ששמרנו אותו, ניתן להשתמש בו ישירות ב-GitHub actions. איך? כך:

      - name: E2E Cypress run
        uses: cypress-io/[email protected]
        with:
          browser: chrome
          record: true
          parallel: true
          start: npm start
        env:
          # pass the Dashboard record key as an environment variable
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

בגדול משתמשים בטמפלייט של cypress-io/[email protected] ומעבירים את המפתח CYPRESS_RECORD_KEY כמשתנה סביבה. זה הכל.

מהרגע הזה – כל הרצה מתועדת ב-Cypress.io וניתן גם לראות את הוידאו של הרצות מוצלחות או כושלות (שזה יותר מעניין), לקבל נתונים של בדיקות שלפעמים מצליחות ולפעמים לא (מחלה ידועה של E2E), זמני הרצה וכו'. מאוד שימושי.

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
בדיקות

תגובה אחת

  1. משתמש אנונימי (לא מזוהה) הגב יוני 14, 2021 בשעה 5:39 pm

    היי

    תודה על הסידרת פוסטים.
    מה זה uses: cypress-io/[email protected] ?

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד