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

בדיקות חזותיות עם Chromatic: אוטומציה של זיהוי רגרסיות UI

לעתים קרובות אנו נתקלים בפרויקטים שבהם רגרסיות UI חומקות מבלי לשים לב—כמה פיקסלים ברווח, צבע כפתור שהשתנה, או רספונסיביות שנשברה בטאבלט. בדיקות יחידה ו-e2e קונבנציונליות לא תופסות את אלה. בפרויקט עם 200+ רכיבים, רגרסיות כאלה מתרחשות כל שבוע, ואוכלות 4 שעות מזמן ה-QA. Chromatic פותר זאת אוטומטית: אינטגרציה עם Storybook מצלמת כל סטורי בכל PR, משווה אותם פיקסל אחר פיקסל, וחוסמת מיזוג עד שהשינויים מאושרים. זה מפחית את זמן הבדיקה פי 10–20 בהשוואה לבדיקה ידנית מסך אחר מסך.

לצוות שלנו יש 5+ שנות ניסיון בשילוב בדיקות חזותיות, עם למעלה מ-20 הטמעות לפרויקטים של React, Vue ו-Angular. אנו מבטיחים pipeline יציב ותמיכה לאחר השקה. ההתקנה המלאה אורכת כיום, וההשקעה מחזירה את עצמה תוך חודש על ידי הפחתת שיעורי התקלות ב-30–40%.

למה TurboSnap מאיץ את הבדיקות

TurboSnap מנתח קבצים ששונו ב-commit ובודק רק את הסטוריז שמשתמשים בקבצים אלה. בפרויקט עם 200+ רכיבים, זמן הבדיקה יורד מ-20 דקות ל-2–3 דקות. הפעלתו היא אפשרות אחת onlyChanged: true ב-pipeline שלך.

---
- uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    onlyChanged: true # Включает TurboSnap

עבור monorepos עם חבילות מרובות, TurboSnap יעיל אפילו יותר: שינויים בחבילה אחת לא מפעילים מחדש בדיקות לכל הפרויקט. חיסכון בזמן בפרויקטים גדולים יכול להגיע ל-90%.

תחילת העבודה

Chromatic עובד על גבי Storybook. אם Storybook כבר מוגדר, חיבור Chromatic אורך כשעה. התקן את החבילה והרץ את הפקודה עם ה-token של הפרויקט שלך.

npm install --save-dev chromatic npx chromatic --project-token=YOUR_PROJECT_TOKEN 

הריצה הראשונה לוכדת baseline; ריצות עוקבות משוות אליו ומציגות הבדלים.

שילוב Chromatic עם GitHub Actions

ה-pipeline מפעיל אוטומטית את Chromatic בכל push. זהו נוהג CI סטנדרטי.

---
name: Visual Tests
on: [push]
jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Обязательно для TurboSnap
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - name: Run Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          exitZeroOnChanges: true # Не падаем, ждём аппрув
---

עם - uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} onlyChanged: true # Включает TurboSnap , ה-pipeline לא חוסם—שינויים ממתינים לבדיקה בממשק Chromatic.

הגדרת Chromatic בשעה אחת

1. התקן את Storybook אם עדיין לא: npm install --save-dev chromatic npx chromatic --project-token=YOUR_PROJECT_TOKEN
2. התקן את חבילת name: Visual Tests on: [push] jobs: chromatic: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 # Обязательно для TurboSnap - uses: actions/setup-node@v4 with: node-version: 20 cache: npm - run: npm ci - name: Run Chromatic uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} exitZeroOnChanges: true # Не падаем, ждём аппрув בפרויקט שלך
3. צור פרויקט ב-Chromatic וקבל token
4. הרץ את ההשקה הראשונה: exitZeroOnChanges: true — זה יוצר baseline
5. הגדר CI/CD עם שלב Chromatic (ראה לעיל)
6. הפעל TurboSnap (אפשרות npx storybook@latest init)
7. הפוך את בדיקת הסטטוס "UI Review" לחובה למיזוג
8. אמן את הצוות על תהליך הבדיקה

תהליך בדיקת השינויים

Chromatic יוצר קישור לממשק בדיקה המפרט סטוריז ששונו עם הבדלים פיקסל אחר פיקסל. כל שינוי ניתן לקבל או לדחות. שינויים שמתקבלים הופכים ל-baseline החדש. בדיקת הסטטוס "UI Review" ב-GitHub חוסמת מיזוג עד לאישור.

השוואה לבדיקה ידנית

Chromatic תופס עד 95% מהרגרסיות; בדיקה ידנית תופסת כ-60% עבור אותה השקעת זמן. זה הופך את Chromatic ליעיל פי 1.6.

השוואה לכלים אחרים

Chromatic מנצח עם TurboSnap ואינטגרציית Storybook טבעית, מה שמאיץ את ההתקנה וחוסך משאבים.

מה כלול בהתקנת Chromatic שלנו

• חיבור פרויקט ל-Chromatic וקבלת token
• הגדרת pipeline CI/CD (GitHub Actions, GitLab CI וכו')
• הפעלת TurboSnap למהירות
• הגדרת בדיקת סטטוס ב-PRs
• הדרכת צוות על תהליך הבדיקה
• תיעוד workflow ותמיכה לאחר השקה

למה לסמוך עלינו בהתקנה?

המהנדסים המוסמכים שלנו בעלי 5+ שנות ניסיון בבדיקות חזותיות והשלימו למעלה מ-20 פרויקטים מוצלחים—מסטארטאפים ועד ארגונים. אנו מבטיחים pipeline יציב ותגובה מהירה לתקלות. צור קשר לייעוץ—נבחר את התוכנית המתאימה ונגדיר Chromatic ביום אחד. הזמן התקנת Chromatic היום וקצץ את זמן ה-QA ב-70%. השאר בקשה באתר שלנו, ונחזור אליך תוך שעה.