בדיקות חזותיות בחזית: צלילה עמוקה לתוך שילוב Chromatic ו-Percy

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

הבנת בדיקות חזותיות בחזית

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

היתרונות של בדיקות חזותיות

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

הצגת Chromatic ו-Percy

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

Chromatic

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

תכונות עיקריות של Chromatic:

• שילוב Storybook הדוק: משתלב בצורה חלקה עם Storybook לפיתוח ובדיקה מונחי רכיבים.
• יצירת צילומי מסך אוטומטית: יוצרת אוטומטית צילומי מסך של רכיבי UI במצבים שונים.
• השוואה חזותית: משווה צילומי מסך מול קו בסיס ומדגישה שינויים חזותיים.
• סקירה ושיתוף פעולה: מספק ממשק שיתופי לסקירה ואישור שינויים חזותיים.
• שילוב CI/CD: משתלב עם צינורות CI/CD פופולריים, כגון Jenkins, CircleCI ו-GitHub Actions.
• בדיקות נגישות: מספק בדיקות נגישות בסיסיות.

Percy

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

תכונות עיקריות של Percy:

• תמיכה חוצת פלטפורמות: תומך במסגרות בדיקה שונות, כולל Jest, Cypress ו-Selenium.
• יצירת צילומי מסך: לוכדת צילומי מסך של דפים שלמים, רכיבים ספציפיים ותוכן דינמי.
• השוואה חזותית: משווה צילומי מסך באמצעות אלגוריתמי השוואה חזותית מתקדמים.
• שיתוף פעולה וסקירה: מספק ממשק שיתופי לסקירה ואישור שינויים חזותיים.
• שילוב CI/CD: משתלב עם צינורות CI/CD פופולריים.
• בדיקת עיצוב מותאם: תומך בבדיקת עיצובים מותאמים על פני גדלי מסך ומכשירים שונים.
• בדיקת תאימות דפדפן: בדיקות מול דפדפנים וגרסאות שונות.

הגדרת בדיקות חזותיות עם Chromatic

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

דרישות מוקדמות

• פרויקט Storybook מוגדר עם רכיבים.
• חשבון Chromatic (חינמי או בתשלום).
• Node.js ו-npm או yarn מותקנים.

התקנה ותצורה

1. התקן את ה-Chromatic CLI:

               npm install -g chromatic
               
   
                 
                   Copy
                 
               
             

2. אמת באמצעות Chromatic:

               chromatic login
               
   
                 
                   Copy
                 
               
             

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

               chromatic
               
   
                 
                   Copy
                 
               
             

   Chromatic יבנה את ה-Storybook שלכם ויעלה אותו לפלטפורמת Chromatic. לאחר מכן הוא יצלם צילומי מסך של הרכיבים שלכם וישווה אותם לקו בסיס.
4. סקרו ואשרו שינויים: Chromatic יספק קישור לממשק Chromatic, שבו תוכלו לסקור שינויים חזותיים שזוהו. לאחר מכן תוכלו לאשר או לדחות את השינויים.
5. שלב עם CI/CD: שלבו את Chromatic בתוך צינור ה-CI/CD שלכם (לדוגמה, GitHub Actions, GitLab CI) לבדיקות אוטומטיות בכל בקשת משיכה. השלבים משתנים בהתאם לשירות ה-CI/CD שבו אתם משתמשים; עיינו בתיעוד Chromatic לקבלת הוראות מפורטות. לדוגמה, באמצעות פעולות GitHub, תוכלו להוסיף משימה לקובץ זרימת העבודה שלכם שמריץ את Chromatic לאחר מעבר הבנייה ובדיקות היחידה שלכם.

דוגמה: שילוב Chromatic עם GitHub Actions

צרו קובץ זרימת עבודה חדש (לדוגמה, .github/workflows/chromatic.yml) עם התוכן הבא (התאימו את CHROMATIC_PROJECT_TOKEN לאסימון הפרויקט שלכם):

            name: Chromatic

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  chromatic-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Publish to Chromatic
        run: | 
          npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # Use a secret to store the token

            

              
                Copy
              
            
          

זרימת עבודה זו תפעיל את Chromatic בכל דחיפה ובקשת משיכה לענף main. זכרו להחליף את CHROMATIC_PROJECT_TOKEN באסימון הפרויקט Chromatic בפועל שלכם המאוחסן כסוד GitHub.

הגדרת בדיקות חזותיות עם Percy

הגדרת בדיקות חזותיות עם Percy כוללת שלבים דומים ל-Chromatic אך מתמקדת בשילוב עם מסגרת הבדיקה הקיימת שלכם. הנה מדריך כללי, עם הוראות ספציפיות התלויות במסגרת שלכם (לדוגמה, React עם Jest, Vue עם Cypress).

דרישות מוקדמות

• חשבון Percy (חינמי או בתשלום).
• מסגרת בדיקה (לדוגמה, Jest, Cypress, Selenium).
• Node.js ו-npm או yarn מותקנים.

התקנה ותצורה

1. התקן את ה-Percy CLI:

               npm install -D @percy/cli
               
   
                 
                   Copy
                 
               
             

2. אמת עם Percy: צרו פרויקט Percy בתוך פלטפורמת Percy וקבלו את האסימון של הפרויקט שלכם. תגדירו אסימון זה כמשתנה סביבה (לדוגמה, PERCY_TOKEN) בתצורת ה-CI/CD שלכם.
3. שלב את Percy עם מסגרת הבדיקה שלך:

   זה כרוך בהוספת פקודות Percy לקובצי ה-script שלכם. השלבים המדויקים משתנים בהתאם למסגרת הבדיקה שלכם. לדוגמה, עם Cypress, תתקינו את החבילה @percy/cypress ותוסיפו פקודה כדי לצלם תמונות מצב של Percy. עם Jest, סביר להניח שתשתמשו ישירות ב-Percy API או במתאם ייעודי.

   דוגמה באמצעות Cypress (בבדיקות Cypress שלכם - לדוגמה, cypress/integration/my_spec.js):

               it('should render the homepage', () => {
     cy.visit('/');
     cy.percySnapshot('Homepage');
   });
               
   
                 
                   Copy
                 
               
             

   בדוגמת Cypress לעיל, cy.percySnapshot('Homepage') מצלם צילום מסך של המצב הנוכחי של הדף ומעלה אותו ל-Percy.

4. הגדר שילוב CI/CD:

   בתוך תצורת ה-CI/CD שלכם, ודאו ש-Percy פועל לאחר השלמת הבדיקות שלכם. בדרך כלל תגדירו את משתנה הסביבה PERCY_TOKEN ולאחר מכן תפעילו את הפקודה Percy CLI.

   דוגמה באמצעות GitHub Actions (בקובץ זרימת העבודה שלכם):

               jobs:
     test:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - name: Set up Node.js
           uses: actions/setup-node@v3
           with:
             node-version: 18
         - name: Install dependencies
           run: npm ci
         - name: Run tests
           run: npm test # Replace with your test command
         - name: Percy Snapshot
           if: github.event_name == 'pull_request' # Only run Percy on pull requests
           run: | 
             npx percy snapshot --token $PERCY_TOKEN
           env:
             PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}  # Use a GitHub secret
   
               
   
                 
                   Copy
                 
               
             

5. סקרו ואשרו שינויים:

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

שיטות עבודה מומלצות לבדיקות חזותיות

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

1. הגדר קווי בסיס ברורים

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

2. התמקדו ברכיבי UI קריטיים

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

3. בדקו בסביבות שונות

בדקו את ה-UI שלכם על פני מגוון סביבות, כולל דפדפנים שונים (Chrome, Firefox, Safari, Edge וכו'), מכשירים (שולחנות עבודה, טאבלטים, טלפונים חכמים) וגדלי מסך. זה יעזור להבטיח שה-UI שלכם מעובד באופן עקבי על פני כל הפלטפורמות.

4. טפלו בתוכן דינמי

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

5. טפלו בבדיקות משובשות

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

6. שלבו עם CI/CD

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

7. השתמשו בסביבת בדיקה עקבית

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

8. תיעדו את אסטרטגיית הבדיקה שלכם

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

9. תעדפו נגישות

בעוד ש-Chromatic ו-Percy מציעים רמה מסוימת של בדיקות נגישות, תעדוף בדיקות נגישות. שלבו בדיקות נגישות בתוך הבדיקות החזותיות שלכם כדי להבטיח שה-UI שלכם נגיש לכל המשתמשים. הסתכלו על הנחיות WCAG.

10. סקרו ועדכנו בדיקות באופן קבוע

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

בחירת הפלטפורמה הנכונה: Chromatic לעומת Percy

הבחירה הטובה ביותר בין Chromatic ל-Percy תלויה בצרכים הספציפיים שלכם ובתצורת הפרויקט:

שקלו את Chromatic אם:

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

שקלו את Percy אם:

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

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

טכניקות ושילובים מתקדמים

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

1. בדיקת תוכן דינמי: מידול API

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

2. בדיקת רכיבי UI אינטראקטיביים

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

3. שילוב בדיקות נגישות

שלבו כלי בדיקת נגישות (לדוגמה, axe-core) בתוך הבדיקות החזותיות שלכם. Chrome ו-Percy יכולים לספק בדיקות נגישות בסיסיות; לבדיקות מתקדמות יותר, שקלו להריץ ביקורת נגישות כחלק מצינור הבדיקה שלכם ולשלב תוצאות אלה עם תוצאות הבדיקה החזותית שלכם. עשיית זאת תסייע להבטיח שה-UI שלכם נגיש לכל המשתמשים. נגישות אינה רק הפיכת ה-UI לנגיש, אלא הבטחת עיצוב מכיל למשתמשים עם צרכים מגוונים.

4. ספריות רכיבי UI

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

5. שילוב עם מערכות עיצוב

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

שיקולי נגישות

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

1. כלי בדיקת נגישות אוטומטיים

השתמשו בכלים אוטומטיים לבדיקות נגישות כמו Axe, Lighthouse או Pa11y בתוך צינור ה-CI/CD שלכם. כלים אלה סורקים את ה-UI שלכם לאיתור הפרות נגישות ומספקים דוחות מפורטים על כל הבעיות שנמצאו.

2. בדיקת נגישות ידנית

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

3. סקירות קוד

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

מסקנה: העתיד של בדיקות חזותיות בחזית

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

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