בדיקת תאימות דפדפנים לאתרי 1C-Bitrix

Safari ב-iOS 16 מציג את טופס התשלום עם שדות לא מיושרים. Firefox ב-Windows מתעלם מ-gap בתוך קונטיינר flex. Edge במחשבים ארגוניים חוסם את סקריפט האנליטיקס עקב הגדרות אבטחה. אלה בעיות אמיתיות שמגיעות לתמיכה לאחר השקת האתר. אנחנו צוות מהנדסים עם ניסיון של 10+ שנים בפיתוח Bitrix — אנחנו נתקלים בבעיות כאלה מדי יום. המתודולוגיה שלנו כוללת בדיקות ידניות ואוטומטיות ב-8 דפדפנים על 4 פלטפורמות. אנחנו מבטיחים שחנות המקוונת שלך תוצג כראוי עבור 99% מהמשתמשים. המהנדסים שלנו מחזיקים בהסמכת Bitrix web, המאשרת את כישוריהם. צור קשר כדי לקבל ייעוץ על מטריצת בדיקות לפרויקט שלך.

למה בדיקת תאימות דפדפנים קריטית לפרויקטי Bitrix?

אתרי Bitrix מכילים תבניות מותאמות אישית, רכיבי JS מורכבים (פילטר חכם, טופס תשלום) ואינטגרציות עם שירותים חיצוניים (טפסי תשלום, ווידג'טים של נקודות איסוף). כל רכיב יכול להתנהג אחרת בהתאם לדפדפן ולגרסה. להלן מטריצת הדפדפנים שאנחנו יוצרים בהתבסס על אנליטיקת הפרויקט או נתוני תעשייה:

P0 — חוסם שחרור, P1 — חייב לעבוד, P2 — רצוי.

אילו בעיות אופייניות מתרחשות ב-Safari?

Safari הוא אחד הדפדפנים הבעייתיים ביותר עבור Bitrix. הפילטר החכם עובד היסטורית בצורה גרועה ב-Firefox וב-Safari עקב מאפייני CSS לא סטנדרטיים ומניפולציה ישירה של DOM באמצעות BX.bind. אנחנו בודקים: פתיחה/סגירה של קבוצות פילטר, עדכון נכון של כתובת ה-URL בעת בחירת פרמטרים (History API), מחוון טווח מחירים, איפוס נכון של הפילטר. טופס התשלום משתמש באירועי JS מותאמים אישית רבים ב-/bitrix/templates/.default/components/bitrix/sale.order.ajax/. Safari לעיתים קרובות שובר position: sticky בתוך קונטיינרים של overflow: hidden, מילוי אוטומטי עם מאפייני name לא סטנדרטיים, וקלט date (לא נתמך עד גרסה 14).

ווידג'טים של נקודות איסוף (CDEK, Boxberry) — ווידג'טים של JS מצד שלישי שמתנגשים עם מדיניות אבטחת תוכן (CSP). ב-Safari, בעיה נוספת היא מניעת מעקב חכמה (ITP) שיכולה לחסום עוגיות מתת-דומיינים המשמשים את הווידג'טים. טפסי תשלום דורשים תשומת לב מיוחדת: iframes ממערכות תשלום ב-Safari יכולים להישבר עקב מדיניות עוגיות צד שלישי מחמירה.

איך אנחנו מבצעים בדיקת תאימות דפדפנים?

אנחנו משתמשים בשילוב של כלים וגישות:

1. Playwright — הבסיס לאוטומציה. הוא תומך ב-Chromium, Firefox ו-WebKit (מנוע Safari) כברירת מחדל. אנחנו כותבים בדיקות לתרחישי משתמש מרכזיים: בחירת מוצר בקטלוג, הוספה לסל, תשלום, סיום רכישה. הבדיקות משולבות ב-CI ופועלות על כל PR. לפי תיעוד Playwright, אוטומציה מפחיתה את זמן ביצוע הרגרסיה ב-80%.

2. BrowserStack — למכשירי iOS אמיתיים וגרסאות ספציפיות של Samsung Internet. אינטגרציה עם Playwright באמצעות קונפיגורציה:

const capabilities = {
  'browserstack.user': process.env.BROWSERSTACK_USERNAME,
  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
  'project': 'Bitrix Shop',
  'build': `Regression ${new Date().toISOString()}`,
};

3. LambdaTest — חלופה ל-BrowserStack, זולה יותר לפרויקטים קטנים.

4. בדיקות ידניות על מכשירים אמיתיים — חיוניות עבור Safari ב-iPhone. WebKit באמולטור ו-Safari אמיתי מתנהגים אחרת עם אירועי מגע ומקלדת וירטואלית.

בעיות CSS נפוצות בתבניות Bitrix מותאמות אישית נפתרות באמצעות מאפייני fallback:

.catalog-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
} /* fallback для Safari < 14.1 */
@supports (gap: 20px) {
  .catalog-grid {
    gap: 20px;
    margin: 0;
  }
  .catalog-grid > .item {
    margin: 0;
  }
}
@supports not (gap: 20px) {
  .catalog-grid {
    margin: -10px;
  }
  .catalog-grid > .item {
    margin: 10px;
  }
}

הפרטים של JS ב-Bitrix — שימוש ב-API הישן של const capabilities = { 'browserstack.user': process.env.BROWSERSTACK_USERNAME, 'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY, 'project': 'Bitrix Shop', 'build': `Regression ${new Date().toISOString()}`, }; . קוד מותאם אישית משתמש לעיתים קרובות ב-ES6+ ללא טרנספילציה. אנחנו בודקים:

// Проблема: optional chaining не работает в старых браузерах без transpile
const price = product?.offers?.[0]?.price; // Ломается в Samsung Internet 14
// Безопасный вариант
const price = product && product.offers && product.offers[0] && product.offers[0].price;

מה כלול בעבודה

• הסכמה על מטריצת דפדפנים ומכשירים
• כתיבת בדיקות אוטומטיות (Playwright) לתרחישים מרכזיים
• בדיקות ידניות על מכשירים אמיתיים (iPhone, iPad, טאבלטים של Android)
• בדיקות אינטגרציה: ווידג'טים של נקודות איסוף, טפסי תשלום, אנליטיקס
• דוח עם בעיות שנמצאו והמלצות
• בדיקה חוזרת לאחר תיקונים
• תיעוד על כיסוי בדיקות ואינטגרציית CI
• הדרכה לצוות הלקוח על שימוש בדוח
• תמיכה לאחר הבדיקות

הערכות זמן

לצוות שלנו יש ניסיון רב, עם למעלה מ-50 פרויקטים שנבדקו. כל המהנדסים מחזיקים בהסמכת Bitrix web. העלות מחושבת באופן אישי בהתאם למורכבות הפרויקט. הזמן בדיקת תאימות דפדפנים כחלק מביקורת טרום-שחרור — זה חוסך תקציב על תיקונים לאחר השחרור. קבל ייעוץ על מטריצת בדיקות לפרויקט שלך. צור קשר כדי לתזמן בדיקות.