מדוע בדיקות יחידה חשובות אך אינן פתרון קסם?
באג שנמצא בבדיקת יחידה עולה דקות לתיקון. אותו באג בסביבת ייצור עולה שעות של תגובה לאירוע, פיצויים ואובדן אמון. בפרויקט חנות מקוונת, שגיאת חישוב הנחה עברה בדיקות ידניות, הגיעה לייצור, ועיבדה 37 הזמנות במחיר אפס תוך 4 שעות. בדיקה אוטומטית למקרי קצה הייתה תופסת אותו בדחיפה הראשונה. עם 7+ שנות ניסיון בבדיקות יישומי ווב ולמעלה מ-200 פרויקטים שהועברו, ראינו דפוס זה חוזר על עצמו בתעשיות שונות.
Jest הוא התקן עבור JavaScript/TypeScript, אך בדיקות יחידה מוצדקות רק במקום שבו יש לוגיקה מבודדת: פונקציות טרנספורמציה, ולידטורים, חוקים עסקיים, כלי עזר. בדיקת רכיבי React עם Jest + Testing Library נכונה לבדיקות התנהגותיות: "כפתור מופיע לאחר טעינה", "הטופס מציג שגיאה על אימייל ריק". בדיקות Snapshot (toMatchSnapshot) הן מלכודת: הן נשברות על כל שינוי פריסה והופכות לרעש שמפתחים מעדכנים בלי להסתכל. כיסוי קוד הוא מדד איכות גרוע: 80% כיסוי ניתן להשיג עם בדיקות שלא בודקות כלום. כיסוי מראה שהקוד בוצע, לא שהוא פועל נכון.
| קריטריונים | Jest | Vitest |
|---|---|---|
| מהירות לפרויקטים גדולים | בינונית (טרנספורמציית Babel) | מהיר פי 10–20 (מודולי ES) |
| אינטגרציה עם Vite | דרך תוסף | טבעית |
| Monorepos | דורש קונפיגורציה | מובנה |
Vitest כחלופה ל-Jest לפרויקטי Vite: מהיר פי 10–20 בזכות מודולי ES טבעיים ללא טרנספורמציית Babel. עבור monorepos עם אלפי בדיקות, הפרש המהירות מורגש. ויקיפדיה על בדיקות יחידה מתארת את הבסיס התיאורטי — אנו מיישמים אותו עם צינורות CI אמיתיים.
כיצד להקים בדיקות E2E שאינן שבריריות?
Playwright עולה על Cypress בפרמטרים מרכזיים: תמיכה טבעית בריבוי טאבים, ריבוי מקורות ו-iframes; ביצוע מקביל ברמת הבדיקה; WebKit, Firefox, Chromium מובנים; ללא iframe לאפליקציה — הבדיקות רצות בדפדפן אמיתי.
Playwright codegen מתעד פעולות ומייצר בדיקה — נקודת פתיחה טובה, אך הקוד שנוצר דורש רפקטורינג. לוקטורים לפי תוכן טקסט הם שבריריים: getByRole('button', { name: 'Оформить заказ' }) חזק יותר מאשר locator('.btn-primary').
מודל Page Object הוא התקן לארגון בדיקות E2E. כל עמוד הוא מחלקה נפרדת עם מתודות במקום לוקטורים ישירים. כשכפתור עובר מההדר לסיידבר — שינוי במקום אחד, לא בכל הבדיקות.
בדיקות שבריריות נובעות בדרך כלל מתנאי מרוץ בין בקשה לרנדור, אנימציות ללא המתנה, ותלות ב-API חיצוניים. פתרון: // Плохо await page.click('#submit'); await page.waitForTimeout(2000); await expect(page.locator('.success')).toBeVisible(); // Хорошо await page.click('#submit'); await page.waitForResponse(resp => resp.url().includes('/api/orders') && resp.status() === 201 ); await expect(page.getByRole('alert', { name: /заказ создан/i })).toBeVisible(); במקום thresholds: { http_req_duration: ['p95<500', 'p99<1000'], http_req_failed: ['rate<0.01'], } , מיקוק APIs חיצוניים דרך width.
// Плохо await page.click('#submit'); await page.waitForTimeout(2000); await expect(page.locator('.success')).toBeVisible(); // Хорошо await page.click('#submit'); await page.waitForResponse(resp => resp.url().includes('/api/orders') && resp.status() === 201 ); await expect(page.getByRole('alert', { name: /заказ создан/i })).toBeVisible(); המהנדסים שלנו מבטיחים יציבות בדיקות ב-CI. התיעוד הרשמי של Playwright מכסה את כל פרטי ה-API — אנו משתמשים בו יומית בפרויקטים עם מיליוני משתמשים.
כיצד Core Web Vitals משפיעים על דירוג?
גוגל משתמשת ב-Core Web Vitals בדירוג. Lighthouse CLI בצינור CI: בכל דיפלוי אנו בודקים ש-LCP < 2.5s, CLS < 0.1, INP < 200ms. מחקר Google Chrome: 53% מהמשתמשים עוזבים אתר אם הטעינה אורכת יותר מ-3 שניות — הבדיקות שלנו מונעות הפסדים כאלה.
בעיות אמיתיות ש-Lighthouse מוצא:
- תמונת Hero ללא מאפייני
height/font-display: swap: CLS 0.35 בטעינה. - צרור JavaScript של 2.1MB שחוסם ניתוח באופן סינכרוני: INP 450ms.
- גופנים ללא
lhci: טקסט בלתי נראה עד טעינת הגופן (FOIT). - תמונת Hero לא מותאמת של 4MB: LCP 8.2s.
Lighthouse CI (lhci) שומר היסטוריית מדדים ומפרסם תגובה ל-PR עם ירידה בביצועים. עבור לקוח מסחר אלקטרוני אחד, אופטימיזציה של מדדים אלה שיפרה את ההמרה ב-18% והפחיתה עלויות שרת ב-$12k בשנה.
מה פותרות בדיקות עומס?
k6 הוא כלי לבדיקות עומס עם API של JavaScript. תרחישים נכתבים כקוד, מנוהלים בגיט, ורצים ב-CI. שלושה תרחישים עיקריים:
- בדיקת Spike — עליית עומס חדה: 0 → 1000 משתמשים ב-30 שניות. מדמה השקת קמפיין. מראה את יכולת המערכת להתמודד עם קפיצות.
- בדיקת Soak — עומס יציב למשך 2–4 שעות. מזהה דליפות זיכרון, דלדול מאגר חיבורים, ירידה בביצועים.
- בדיקת Stress — עומס מעל הצפוי (150–200% מהשיא). מראה נקודת שבירה והתדרדרות אלגנטית.
ספים:
thresholds: { http_req_duration: ['p95<500', 'p99<1000'], http_req_failed: ['rate<0.01'], } p95 < 500ms משמעותו ש-95% מהבקשות מגיבות מהר יותר מחצי שנייה. אם הסף לא מתקיים, k6 יוצא עם קוד שגיאה, וצינור ה-CI נכשל.
בפרויקט חנות מקוונת אחת, זיהינו ירידה בביצועי ה-API בשעה הרביעית של הבדיקה: p95 עלה מ-200ms ל-2s עקב דליפות חיבורים. לאחר אופטימיזציה, הלקוח חסך $15k בשנה על תגובה לאירועים ותשתית נוספת.
פירמידת בדיקות בפרויקט
| רמה | כלי | כמות | מהירות |
|---|---|---|---|
| יחידה | Vitest/Jest | רבה (אלפים) | <5 דקות |
| אינטגרציה | Vitest + supertest | בינונית | 5–15 דקות |
| E2E | Playwright | מעטה (נתיב שמח) | 10–30 דקות |
| עומס | k6 | לפי לוח זמנים | 30–60 דקות |
| ביצועים | Lighthouse CI | בכל דיפלוי | 5 דקות |
מה כוללת העבודה?
- ביקורת כיסוי נוכחי וזיהוי זרימות משתמש קריטיות.
- כתיבת בדיקות יחידה ללוגיקה עסקית מרכזית, בדיקות אינטגרציה ל-API, E2E לתרחישי משתמש.
- הקמת ביצוע מקביל ב-CI (עובדים מפוצלים ל-Playwright).
- בדיקות עומס עם דוח והמלצות.
- תיעוד מקרי בדיקה, הכשרת הצוות שלך בפרקטיקות בדיקה.
- תמיכת אחריות לחודש לאחר היישום.
- מסירת כל ארטיפקטי הבדיקה (קוד, קונפיגורציות CI, היסטוריות ריצה).
כיצד אנו עובדים?
- ניתוח — ביקורת בדיקות נוכחית, זיהוי נקודות חולשה, קביעת עדיפויות.
- עיצוב — בחירת כלים, כתיבת תוכנית בדיקות, אישור.
- יישום — כתיבת בדיקות, אינטגרציית CI.
- בדיקה — הרצת כל הרמות, ניתוח תוצאות, תיקון באגים.
- השקה — עלייה לאוויר, ניטור מדדים, הכשרת צוות.
לוח זמנים
הקמת צינור בדיקות מלא (Jest + Playwright + k6 + Lighthouse CI) מאפס: 2–4 שבועות. כיסוי בדיקות E2E לפרויקט קיים (20–30 תרחישים): 3–6 שבועות. בדיקות עומס עם דוח והמלצות: 1–2 שבועות. עלות מחושבת באופן אישי לאחר ביקורת.
מוכנים לדון בפרויקט שלכם? השאירו פנייה — נבצע ביקורת של בדיקות יישום הווב הנוכחי שלכם ונציע תוכנית שיכולה לחסוך עד 60% מעלויות אירועים. קבלו ייעוץ על בדיקות יישומי ווב — צרו קשר עוד היום.







