Кросбраузерне тестування сайту на 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 кращий за ручне тестування в 4 рази за швидкістю. Автоматизація тестів з Playwright прискорює регресійне тестування в 4 рази порівняно з ручним.

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-інтеграція
• Навчання команди замовника роботі зі звітом
• Підтримка за результатами тестування

Інвестування в кросбраузерне тестування дозволяє заощадити до 30% бюджету на виправленні багів після запуску. Вартість ручного тестування починається від 500 €, автоматизованого з BrowserStack – від 1000 €.

Строки

Понад 10 років на ринку, 40+ протестованих проектів, всі інженери мають веб-сертифікацію Бітрікс. Ми маємо понад 10 років досвіду та 40+ успішних проектів. Вартість розраховується індивідуально та залежить від складності проекту. Замовте кросбраузерне тестування в рамках передрелізного аудиту — це заощадить бюджет на пост-релізних фіксах. Отримайте консультацію щодо матриці тестування для вашого проекту. Зв'яжіться з нами, щоб запланувати тестування.