Кросбраузерне тестування сайту на 1С-Бітрікс

Кросбраузерне тестування сайту на 1С-Бітрікс

Safari на iOS 16 рендерить форму оформлення замовлення зі зламаними інпутами. Firefox на Windows ігнорує gap у flex-контейнері в старій версії. Edge на корпоративних машинах блокує скрипт аналітики політикою безпеки. Це не гіпотетичні сценарії — це реальні проблеми, які регулярно надходять у підтримку після запуску. Кросбраузерне тестування на Бітрікс-проєктах має свою специфіку: крім верстки, потрібно перевіряти поведінку JS-компонентів (розумний фільтр, віджети доставки, платіжні форми) та коректність роботи кастомних шаблонів.

Матриця браузерів

Матрицю формують на основі реальної аналітики проєкту або галузевих даних. Для e-commerce у 2024–2025 роках базова матриця виглядає так:

P0 — блокує реліз, P1 — має працювати, P2 — бажано.

Специфіка Бітрікс-компонентів

Розумний фільтр — історично проблемний компонент у Firefox та Safari. Основна причина: використання нестандартних CSS-властивостей у шаблоні та пряма DOM-маніпуляція через BX.bind. Перевіряють:

• Розкриття/закриття груп фільтра
• Коректне оновлення URL при виборі параметрів (History API)
• Роботу range-слайдера цін у всіх браузерах
• Коректне скидання фільтрів

Форма оформлення замовлення — безліч кастомних JS-подій у /bitrix/templates/.default/components/bitrix/sale.order.ajax/. Safari історично має проблеми з:

• position: sticky всередині контейнерів з overflow: hidden
• Автозаповненням форм із нестандартними атрибутами name
• date input — не підтримувався до Safari 14

Віджети ПВЗ (CDEK, Boxberry) — сторонні JS-віджети, які можуть конфліктувати із CSP-заголовками. У Safari додаткова проблема — ITP (Intelligent Tracking Prevention) може блокувати cookies від піддоменів, що використовуються віджетами.

Платіжні форми — особлива увага на iframe від платіжних систем у Safari. Apple з iOS 17 посилила політику сторонніх cookies в iframe, що може ламати платіжні форми вбудованого типу (не redirect).

Технічні аспекти

Поширені CSS-проблеми в кастомних шаблонах Бітрікс:

/* Проблема: gap у flex не працював у Safari < 14.1 */
.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* → fallback через margin */
}

/* Рішення */
.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
.catalog-grid > .item {
    margin: 10px;
}

/* Або використовувати @supports */
@supports (gap: 20px) {
    .catalog-grid { gap: 20px; margin: 0; }
    .catalog-grid > .item { margin: 0; }
}

JS-специфіка Бітрікс при кросбраузерному тестуванні — використання старого BX API (глобальний об'єкт Бітрікс). Він сумісний з усіма цільовими браузерами, але кастомний код поверх нього часто використовує ES6+/ES2020 без транспіляції через Babel. Перевіряють:

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

// Безпечний варіант
const price = product && product.offers && product.offers[0] && product.offers[0].price;

Інструментарій

BrowserStack — найповніше покриття реальних пристроїв та браузерів. Інтегрується з Playwright:

// playwright.config.js для BrowserStack
const capabilities = {
    'browserstack.user': process.env.BROWSERSTACK_USERNAME,
    'browserstack.key': process.env.BROWSERSTACK_ACCESS_KEY,
    'project': 'Bitrix Shop',
    'build': `Regression ${new Date().toISOString()}`,
};

Playwright локально покриває Chromium, Firefox та WebKit (рушій Safari) з коробки — це основа. BrowserStack потрібен для реальних iOS-пристроїв і специфічних версій Samsung Internet.

LambdaTest — альтернатива BrowserStack, дешевше для невеликих проєктів.

Ручне тестування на реальних пристроях залишається незамінним для Safari на iPhone — WebKit у Playwright та реальний Safari на пристрої поводяться по-різному при роботі з тач-подіями та віртуальною клавіатурою.

Терміни