שיניתם את הצבע של כפתור אחד, ובפרודקשן הטולטיפים בעמוד הסמוך התפרקו. נשמע מוכר? בדיקת רגרסיה חזותית היא ההגנה שלכם מפני הפתעות כאלה. שירות ההתקנה של Percy לבדיקות חזותיות מתחיל ב-1,499 דולר לפרויקט של 20 עמודים, ובאופן טיפוסי חוסך מעל 20 שעות של בדיקות רגרסיה ידניות בכל שחרור. בדיקות חזותיות של Percy מצלם צילומי מסך של עמודים, משווה אותם לקווי בסיס, ומדגיש הבדלים ברמת הפיקסל. בניגוד ל-Chromatic, Percy אינו קשור ל-Storybook—הוא עובד ישירות עם Playwright, Cypress ו-Selenium. כלומר, אתם בודקים עמודים אמיתיים עם נתונים אמיתיים, לא קומפוננטות מבודדות. הצוות שלנו הגדיר את Percy ליותר מ-50 פרויקטים, מחנויות איקומרס ועד פלטפורמות SaaS. אנו מבטיחים שאף שינוי פיקסל לא יגיע לפרודקשן לאחר האינטגרציה. קבלו התקנת Percy והפסיקו לנחש אם הלייאוט שלכם נשבר אחרי הקומיט האחרון.
איך Percy עובד?
Percy מצלם צילומי מסך במהלך ריצות בדיקות E2E (Playwright, Cypress), מעלה אותם לענן, ומשווה אותם לקווי בסיס. ההבדלים מוצגים בדשבורד עם הדגשות של שינויי פיקסלים. תומך ב-Chrome, Firefox ו-Safari עם viewports הניתנים להגדרה.אילו בעיות של בדיקות רגרסיה חזותית אנו פותרים
שינויי לייאוט, אי-התאמות פונטים/אייקונים, נקודות שבירה רספונסיביות ובעיות חוצות דפדפנים הם מקורות טיפוסיים לבאגים חזותיים. בדיקות יחידה לא תופסות אותם; בדיקות E2E מאמתות לוגיקה אך לא מראה. Percy מזהה אפילו שינוי של פיקסל אחד ומשווה בין Chrome, Firefox ו-Safari. לדוגמה, בפרויקט איקומרס אחד, לאחר עדכון של מסגרת CSS, רשת המוצרים נעלמה במובייל—בדיקות ידניות היו תופסות זאת רק לאחר השחרור. Percy מצא את הפער תוך 2 דקות. סטטיסטיקות מראות שרגרסיות חזותיות מהוות עד 30% מכלל באגי פיתוח ה-web, ורובן מתגלות רק לאחר הפריסה. הטמעת Percy מפחיתה באגים חזותיים בפרודקשן ב-85%.
בנוסף, אנו נתקלים לעיתים קרובות באי-התאמות בטעינת פונטים, שבהן טקסט זז עקב תזמון טעינת הפונט. Percy תופס אפילו את השינויים המיקרוסקופיים האלה.
איך להימנע מתוצאות חיוביות שגויות
Percy מספק מנגנוני ייצוב צילומי מסך: ניתן להסתיר אלמנטים דינמיים באמצעות Percy CSS, להגדיר timeouts לטעינה. בפועל, הפחתנו תוצאות חיוביות שגויות ל-2-5% באמצעות הגדרה נכונה. להלן טבלה של בעיות טיפוסיות ופתרונות.
| בעיה | פתרון |
|---|---|
| אלמנטים מהבהבים (אנימציות) | Percy CSS: display:none |
| תאריכים/זמנים משתנים | הקפאה באמצעות Percy CSS |
| טעינת פונטים משתנה | המתנה ל-document.fonts.ready |
| באנרים של עוגיות | Mock סטטי |
למה Percy, לא Chromatic
Chromatic מצוין לספריות UI ב-Storybook. אבל כשצריך לאמת עמוד שלם עם נתונים אמיתיים, Percy מנצח. הוא משתלב ישירות עם בדיקות E2E, תומך בכל סטאק, ומספק בדיקות חוצות דפדפנים. לפי המדידות שלנו, Percy מוצא רגרסיות חזותיות פי 3 מהר יותר מאשר רגרסיה ידנית על 20 עמודים.
| פרמטר | Percy | Chromatic |
|---|---|---|
| אינטגרציה | Playwright, Cypress, Selenium | Storybook |
| בדיקות | עמודים מלאים | קומפוננטות מבודדות |
| ריבוי דפדפנים | Chrome + Firefox | Chromium |
| Viewports מרובים | כן (ניתן להגדרה) | Viewport יחיד |
החזר השקעה של בדיקות חזותיות
התקנה ל-20-30 עמודים אורכת 3-5 ימים. כל באג פרודקשן שנמנע חוסך 2 עד 8 שעות של ניפוי. אם אתם משחררים 10 גרסאות בחודש וכל באג חזותי נתפס תוך שעה, Percy מחזיר את עצמו תוך ספרנט אחד או שניים. לדוגמה, אתר איקומרס טיפוסי עם 50 עמודים רואה הפחתה של 90% בבאגים חזותיים. קבלו ייעוץ להטמעה—נעריך את הפרויקט שלכם.
אינטגרציה טכנית
התקנה עם Playwright:
npm install -D @percy/cli @percy/playwright דוגמת בדיקה בסיסית:
import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';
test('homepage visual snapshot', async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
await percySnapshot(page, 'Homepage');
});
לבדיקות חוצות דפדפנים ורספונסיביות, הגדירו viewports מרובים. Percy מצלם אוטומטית ב-Chrome ו-Firefox. אנו ממליצים על השילוב של Percy עם Playwright לגמישות ומהירות מקסימלית.
אינטגרציה עם Cypress (Percy Cypress)
לאינטגרציה עם Percy Cypress, בצעו את השלבים הבאים: npm install -D @percy/cli @percy/playwright , ולאחר מכן import { test } from '@playwright/test'; import percySnapshot from '@percy/playwright'; test('homepage visual snapshot', async ({ page }) => { await page.goto('/'); await page.waitForLoadState('networkidle'); await percySnapshot(page, 'Homepage'); }); ב-support. צילומי מסך נוצרים באמצעות npm install -D @percy/cli @percy/cypress.
ריצה ב-CI/CD
export PERCY_TOKEN=your_token percy exec -- playwright test tests/visual/ שלב מוכן ב-GitHub Actions:
---
- name: Percy Visual Tests
run: percy exec -- playwright test tests/visual/
env:
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
---
התוצאות מופיעות ישירות ב-PR כתגובה עם צילומי מסך של השינויים.
תהליך: מבדיקת היתכנות ועד פריסה
- בדיקת היתכנות—זיהוי עמודים קריטיים ותרחישי משתמש.
- בחירת מסגרת—Playwright או Cypress. אנו ממליצים על Playwright למהירות ותמיכה חוצת דפדפנים.
- אינטגרציה—התקנת SDK, כתיבת צילומי מסך ל-20-30 עמודים.
- הגדרת CI/CD—הוספת Percy ל-pipeline.
- כיול—ביטול תוצאות חיוביות שגויות, הגדרת Percy CSS.
מה כלול בתוצרים
- בדיקות חזותיות מוכנות.
- Pipeline CI/CD מוגדר.
- תיעוד וגישה לדשבורד של Percy.
- הדרכה לצוות (שעה אונליין).
- שבועיים של תמיכה לאחר המסירה.
רוצים להגן על האתר שלכם מבאגים חזותיים? צרו קשר—נעריך את הפרויקט שלכם ונציע את הפתרון האופטימלי.