Кроссбраузерное тестирование сайта на 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 на устройстве ведут себя по-разному при работе с тач-событиями и виртуальной клавиатурой.

Сроки