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

הפריסה נשברה עקב שינוי ריפוד בלתי נראה — המעצב שם לב רק כעבור שבוע

בדיקה ידנית של כל עמוד לאחר כל קומיט גוזלת שעות. שגיאת CSS אחת יכולה לעלות עשרות אלפי דולרים לתיקון ולגרום לאובדן לקוחות. בדיקת רגרסיה חזותית עם Chromatic פותרת זאת: השוואת צילומי מסך אוטומטית בכל PR. אנו מקימים זאת במתכונת turnkey תוך 1–2 שבועות, והפרויקט שלך כבר לא סובל מרגרסיות אקראיות. עלות ההטמעה מוחזרת תוך חודשים הודות לאיתור מוקדם של רגרסיות UI.

כיצד בדיקת רגרסיה חזותית עם Chromatic מגנה על ה-UI?

Chromatic מצלם תמונת מצב של כל סטורי מ-Storybook, משווה אותה לקו בסיס (בסיס צילומי מסך), ומבקש מהמפתח לאשר או לדחות שינויים. זה מבטל עריכות מקריות ששוברות את הפריסה. לדוגמה, אם מישהו משנה בטעות את padding ב-CSS, Chromatic מציג את ההבדל בפיקסלים. לפי תיעוד Chromatic, דיוק ההשוואה מגיע ל-99.9%. לפי הערכותינו, אוטומציה של בדיקות רגרסיה ב-UI חוסכת עד $2,500 בחודש בפרויקט עם 5 מפתחים. בפרויקט אחד, עזרנו להפחית עלויות QA ב-$60,000 בשנה באמצעות איתור רגרסיות מוקדם.

מקרה בוחן: כיצד מנענו הפסד של $15,000 ללקוח

התקנת Storybook וכתיבת סטוריז

התקן את Chromatic ו-Storybook:

npm install -D chromatic @storybook/react npx storybook init # если Storybook ещё не настроен 

כל רכיב מקבל סטוריז משלו — מצבים לבדיקה. דוגמה לכפתור:

// components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    // Задержка перед скриншотом для анимаций
    chromatic: {
      delay: 300,
    },
  },
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Сохранить',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Отмена',
  },
};

export const Loading: Story = {
  args: {
    loading: true,
    children: 'Загрузка',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    children: 'Недоступно',
  },
};

כדי ללכוד מספר viewports או להחריג אנימציות, הוסף פרמטרים לסטורי נפרד:

export const ResponsiveCard: Story = { parameters: { chromatic: { viewports: [375, 768, 1280], }, }, }; 

מניעת תוצאות חיוביות שגויות

תוצאות חיוביות שגויות נובעות מאנימציות, גופנים או נתונים אקראיים. השתמש ב-npm install -D chromatic @storybook/react npx storybook init # если Storybook ещё не настроен כדי להמתין לאנימציות, // components/Button/Button.stories.tsx import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta: Meta<typeof Button> = { component: Button, parameters: { // Задержка перед скриншотом для анимаций chromatic: { delay: 300 }, }, }; export default meta; type Story = StoryObj<typeof Button>; export const Primary: Story = { args: { variant: 'primary', children: 'Сохранить' }, }; export const Secondary: Story = { args: { variant: 'secondary', children: 'Отмена' }, }; export const Loading: Story = { args: { loading: true, children: 'Загрузка' }, }; export const Disabled: Story = { args: { disabled: true, children: 'Недоступно' }, }; כדי להחריג רכיבים לא יציבים. כמו כן, export const ResponsiveCard: Story = { parameters: { chromatic: { viewports: [375, 768, 1280], }, }, }; עוצר אנימציה בפריים האחרון. הגדרת viewports עוזרת להחריג רזולוציות לא רלוונטיות.

כוונון עדין של פרמטרי צילום מסך

אינטגרציה עם CI/CD: GitHub Actions

הוסף workflow שמפעיל את Chromatic בכל push — זה הופך את בדיקות צילומי המסך לאוטומטיות:

---
# .github/workflows/chromatic.yml
name: Visual Tests
on:
  push:
jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - name: Run Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          exitZeroOnChanges: true
          exitOnceUploaded: false

סקירת workflow:

1. Pull request משנה רכיב.
2. Chromatic רץ ב-CI ומאתר שינויים.
3. קישור סקירה מופיע בתגובת ה-PR.
4. מפתח בממשק Chromatic: מאשר או דוחה שינויים.
5. לאחר אישור — קו בסיס חדש.

כיצד TurboSnap מאיץ בדיקות?

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

---
- name: Run Chromatic with TurboSnap
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    onlyChanged: true

השוואה עם חלופות

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

• התקנה והגדרה של Storybook (אם חסר).
• כתיבת סטוריז ל-20–50 רכיבים מרכזיים.
• הגדרת CI/CD להרצות Chromatic אוטומטיות.
• הדרכת צוות על סקירת UI.
• תיעוד תהליך הבדיקה החזותית.
• תיעוד וגישה לפרויקט Chromatic.
• אחריות לחודש אחד לפעולה רציפה לאחר המסירה.

לוחות זמנים:

• התקנת Storybook + Chromatic: יום אחד.
• כתיבת סטוריז ל-20–30 רכיבים: 3–5 ימים.
• כיסוי מלא של מערכת העיצוב: 1–2 שבועות.

תהליך עבודה:

1. ניתוח הפרויקט הנוכחי ובחירת רכיבים לכיסוי.
2. התקנת Storybook ו-Chromatic, הגדרת workflow בסיסי.
3. כתיבת סטוריז לרכיבים מרכזיים (כולל מצבים ו-viewports).
4. אינטגרציה עם CI/CD והגדרת TurboSnap.
5. בדיקות וניפוי תוצאות חיוביות שגויות.
6. תיעוד והדרכת צוות.
7. מתן אחריות לחודש אחד לאחר המסירה.

למה לבחור בנו

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

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