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

Safari на iOS 16 отображает форму оформления заказа с поехавшими инпутами. Firefox на Windows игнорирует gap в flex-контейнере. Edge на корпоративных машинах блокирует скрипт аналитики настройками безопасности. Это реальные проблемы, которые приходят в поддержку после запуска. Мы — команда инженеров с 10+ годами опыта в разработке на Битрикс — ежедневно сталкиваемся с такими багами. Наша методика включает ручное и автоматизированное тестирование в 8 браузерах и на 4 платформах. Мы гарантируем, что ваш интернет-магазин будет корректно отображаться у 99% пользователей. Наши инженеры имеют веб-сертификацию Битрикс, что подтверждает их компетенцию. Свяжитесь с нами, чтобы получить консультацию по матрице тестирования для вашего проекта.

Почему кроссбраузерное тестирование критично для Битрикс-проектов?

Битрикс-сайты содержат кастомные шаблоны, сложные JS-компоненты (умный фильтр, форма оформления заказа) и интеграции с внешними сервисами (платёжные формы, виджеты ПВЗ). Каждый элемент может вести себя по-разному в зависимости от браузера и версии. Ниже — матрица браузеров, которую мы формируем на основе аналитики проекта или отраслевых данных:

P0 — блокирует релиз, P1 — должно работать, P2 — желательно.

Какие типичные проблемы возникают в Safari?

Safari — один из самых проблемных браузеров для Битрикс. Умный фильтр исторически плохо работает в 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 (не поддерживался до версии 14).

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

Как мы проводим кроссбраузерное тестирование?

Мы используем комбинацию инструментов и подходов:

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-проблемы в кастомных шаблонах Битрикс решаем через 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-специфика Битрикс — использование старого BX API. Кастомный код часто использует 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-интеграция
• Обучение команды заказчика работе с отчётом
• Поддержка по результатам тестирования

Сроки

Более 5 лет на рынке, 50+ протестированных проектов, все инженеры имеют веб-сертификацию Битрикс. Стоимость рассчитывается индивидуально и зависит от сложности проекта. Закажите кроссбраузерное тестирование в рамках предрелизного аудита — это сэкономит бюджет на пост-релизных фиксах. Получите консультацию по матрице тестирования для вашего проекта. Свяжитесь с нами, чтобы запланировать тестирование.