10.8 בדיקות E2E תרגול

תרגול - בדיקות E2E עם Playwright¶

תרגיל 1 - בדיקת דף הבית וניווט¶

כתבו בדיקות E2E לאתר תדמית שכולל:
- דף הבית עם כותרת, כפתור CTA, וקטע "השירותים שלנו"
- דף אודות
- דף צור קשר עם טופס
- תפריט ניווט

הבדיקות צריכות לכסות:
- טעינת דף הבית ובדיקת תוכן
- ניווט לכל הדפים דרך התפריט
- בדיקה שה-URL משתנה בניווט
- בדיקה שכותרת הדף (title) משתנה
- בדיקה שהלוגו מוביל לדף הבית

תרגיל 2 - בדיקת תהליך התחברות¶

כתבו בדיקות E2E לתהליך אימות משתמשים:

התחברות מוצלחת:
ניווט לדף login
מילוי אימייל וסיסמה
לחיצה על "התחבר"
בדיקה שהגעתם לדשבורד
בדיקה ששם המשתמש מוצג
התחברות כושלת:
ניסיון עם סיסמה שגויה
בדיקת הודעת שגיאה
בדיקה שנשארים בדף login
התנתקות:
התחברות
לחיצה על "התנתק"
בדיקה שחוזרים לדף הבית
בדיקה שניסיון גישה ל-dashboard מפנה ל-login
הגנה על נתיבים:
ניסיון גישה ל-/dashboard ללא התחברות
בדיקה שמפנים ל-login

תרגיל 3 - בדיקת טופס צור קשר¶

כתבו בדיקות E2E מקיפות לטופס צור קשר שכולל:
- שדות: שם, אימייל, נושא (select), הודעה (textarea)
- validation: כל השדות חובה, אימייל תקין, הודעה לפחות 20 תווים
- שליחה מוצלחת מציגה הודעת הצלחה
- שליחה כושלת מציגה הודעת שגיאה

בדקו:
- שליחת טופס ריק ובדיקת שגיאות
- מילוי חלקי ובדיקת שגיאות ספציפיות
- שליחה מוצלחת
- ניקוי טופס אחרי שליחה

תרגיל 4 - בדיקת רשימת מוצרים עם סינון¶

כתבו בדיקות E2E לדף מוצרים שכולל:
- רשימת מוצרים (כרטיסים)
- חיפוש לפי שם
- סינון לפי קטגוריה (select)
- מיון לפי מחיר (עולה/יורד)
- pagination

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

תרגיל 5 - בדיקת תהליך רכישה מלא¶

כתבו בדיקת E2E שמכסה תהליך רכישה מלא:

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

השתמשו ב-Page Object Model עם לפחות 3 page objects.

תרגיל 6 - צילומי מסך ובדיקות Responsive¶

כתבו בדיקות E2E שבודקות את התצוגה הרספונסיבית:

בדקו את דף הבית ב-3 גדלים:
מובייל (375x667)
טאבלט (768x1024)
דסקטופ (1440x900)
בכל גודל בדקו:
שהתפריט מוצג נכון (hamburger במובייל, מלא בדסקטופ)
שתמונת ה-hero מוצגת
שכרטיסי המוצרים מסודרים נכון (1 בשורה במובייל, 3 בדסקטופ)
הוסיפו צילומי מסך לכל גודל ובדקו visual regression

שאלות¶

מה ההבדל בין בדיקות E2E לבדיקות אינטגרציה? מתי כדאי להשתמש בכל סוג?
למה Playwright ממתין אוטומטית לאלמנטים? מה היתרון על פני sleep ידני?
מה זה Page Object Model ולמה הוא שימושי?
מתי כדאי להשתמש ב-Visual Regression Testing ומתי לא?
מה החסרונות של בדיקות E2E ואיך מתמודדים איתם?