Кросбраузерне тестування сайту на 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+ успішних проектів. Вартість розраховується індивідуально та залежить від складності проекту. Замовте кросбраузерне тестування в рамках передрелізного аудиту — це заощадить бюджет на пост-релізних фіксах. Отримайте консультацію щодо матриці тестування для вашого проекту. Зв'яжіться з нами, щоб запланувати тестування.

Тестування сайтів на 1С-Бітрікс

CIBlockElement::GetList і пагінація — баг, який живе роками

Класичний кейс: на сайті каталог із пагінацією через компонент bitrix:catalog.section. Замовник скаржиться — на третій сторінці дублюються товари. Лізеш у кеш компонента, чистиш — начебто ок. Через день знову. Виявляється, кастомне сортування конфліктує з параметром PAGEN_1, і при певній комбінації фільтрів CIBlockElement::GetList повертає ті самі ID. Такі штуки ловляться тільки тестуванням — не код-рев'ю, не «подивився очима».

Зламана пагінація, некоректний розрахунок знижок, помилки інтеграції з 1С — кожен з цих багів коштує бізнесу реальних грошей. Ми знаємо, як їх знайти і виправити до того, як вони вплинуть на продажі. Наша команда має понад 10 років досвіду з Бітрікс і понад 50 успішних QA-проєктів. Ми вибудовуємо QA-процес під проєкти на 1С-Бітрікс: ручне функціональне, автоматизовані E2E, навантажувальне та приймальне тестування.

Чому сайти на 1С-Бітрікс потребують професійного тестування?

Проєкти на 1С-Бітрікс — не лендінги. Під капотом — десятки модулів, інтеграції та неочевидні залежності:

• Ланцюжки в бізнес-логіці — виправив розрахунок знижок у sale.discount, а промокод через sale.basket.discount перестав застосовуватися. Модуль знижок у Бітріксі — один із найкрихкіших: правила пріоритетів, перетини, накопичувальні програми. Одна правка — каскад збоїв.
• Інтеграція з 1С — обмін через catalog.import.1c або REST. Збій у маппінгу властивостей інфоблоку — і на сайті товар без ціни або з нульовим залишком. Розсинхронізація замовлень — втрачені продажі.
• Оновлення ядра — bitrix:main оновився, а кастомний компонент використовував deprecated-метод CModule::IncludeModule з нестандартними параметрами. Без регресії — російська рулетка.
• Мультибраузерність — bitrix:sale.order.ajax рендерить форми по-різному в Safari і Chrome. Кнопка «Оформити замовлення» на iPhone може з'їхати за межі екрана.

Як функціональне тестування вирішує типові проблеми?

Перевіряємо кожен бізнес-сценарій. Не «працює-не працює», а всі граничні випадки.

Каталог (компоненти catalog.section, catalog.element)

• Розумний фільтр catalog.smart.filter: усі комбінації властивостей, скидання, підрахунок результатів. Особливо — фільтри за торговими пропозиціями (SKU), вони ламаються найчастіше.
• Сортування + пагінація — той самий баг із дублями.
• Порівняння через catalog.compare.list — додавання, видалення, відображення відмінностей.
• Швидкий перегляд — модальне вікно, кошик із модалки.

Кошик і замовлення (sale.basket.basket, sale.order.ajax)

• Додавання з каталогу, з картки, швидке замовлення.
• Знижки: за кількістю, за сумою, за купоном, за накопичувальною. Перетин знижок — окремий тест-кейс, мінімум 8 комбінацій.
• Розрахунок доставки: обробники sale.delivery.services, вартість, терміни, ПВЗ на карті.
• Оплата: sale.paysystem — проходження платежу, обробка відхилень, повернення.
• Формування замовлення: email через main.mail.event, запис у CRM, передача в 1С через sale.export.1c.

Особистий кабінет (sale.personal.section)

• Реєстрація, авторизація, відновлення пароля — включно з edge-case із кириличним email.
• Історія замовлень, повторне замовлення.
• Підписки, бонусна програма.

Форми та пошук

• form.result.new / iblock.element.add.form — відправка, валідація, файлові поля.
• search.page — релевантність, морфологія, обробка помилок через search.title.

Регресійне тестування: як ми запобігаємо помилкам після оновлень

Після кожного деплою ми перевіряємо, чи не зламали те, що працювало.

• Smoke-тести — головна відкривається, каталог віддає товари, замовлення проходить до кінця. 5 хвилин, запускаємо після кожного деплою. Якщо smoke впав — відкочуємо, не розбираючись.
• Регресійний набір — 40–80 тест-кейсів за основними сценаріями. Перед кожним релізом.
• Візуальне тестування — порівняння скріншотів через Percy або Playwright. Кнопка з'їхала на 20px, шрифт змінився після оновлення — тест покаже diff.
• Чек-листи за модулями — структуровані списки для sale, catalog, iblock, search. Кожен модуль — свій чек-лист.

Як визначити вузькі місця продуктивності магазину на Бітрікс?

Ми моделюємо навантаження, щоб зрозуміти, при якому RPS catalog.section почне віддавати 500-ку. Використовуємо реалістичні профілі на основі вашої аналітики.

Профіль навантаження для магазину на Бітрікс:

Інструменти: k6 (JavaScript-сценарії для кошика та чекауту), Apache JMeter (складні сценарії з cookie-авторизацією), Yandex.Tank (візуалізація в реальному часі). На виході — максимальний RPS, час відгуку за перцентилями p50/p95/p99, вузькі місця (CPU, RAM, MySQL slow queries на b_iblock_element, файловий кеш). Конкретні рекомендації: який індекс додати, який запит переписати на D7 ORM, де ввімкнути композитний кеш.

У проєкті з 100 000 товарами додавання індекса на b_iblock_element_property.IBLOCK_ELEMENT_ID скоротило час виконання фільтра з 8 секунд до 0.3 секунди — ми знайшли це саме під час навантажувального тестування.

Автоматизоване, кросбраузерне та приймальне тестування

Кросбраузерність перевіряємо там, де реально сидять покупці. Статистика з Метрики конкретного проєкту важливіша за загальноринкові дані. Мінімальний набір: Chrome (останні 2 версії), Safari на iOS, Яндекс.Браузер, Samsung Internet. Пристрої: Desktop 1920×1080 та 1366×768, iPhone 375×812 та 390×844 (обов'язково чекаут), Android 360×800 та 412×915. Інструменти: BrowserStack для реальних пристроїв, Playwright для автоматизації в Chromium/Firefox/WebKit.

Автоматизація базується на Playwright — кросбраузерність, паралельний запуск, автоматичні очікування, добре працює з динамічними формами sale.order.ajax. У порівнянні з ручним тестуванням, автоматизація скорочує час виконання регресії втричі. PHPUnit використовуємо для модульних тестів кастомних компонентів і бізнес-логіки — інтеграція з CI/CD (GitLab CI, GitHub Actions). Тестовий набір із 50 сценаріїв виконується за 15 хвилин замість годин ручної перевірки.

Фінальна перевірка (UAT) проводиться із замовником на staging з копією продової бази. Спільно складаємо 15–20 ключових шляхів покупця, фіксуємо баги в Jira/YouTrack, оформляємо протокол приймання.

QA-процес: як ми вбудовуємо тестування в розробку

Тестування не приклеюється наприкінці — воно стартує з аналізу вимог.

1. Аналіз вимог — QA бере участь в обговоренні завдань, ловить неоднозначності. «Знижка застосовується до товару чи до замовлення?» — таке питання на старті економить два дні відладки.
2. Тест-кейси до розробки — сценарії готові до першого рядка коду.
3. Code review — перевірка на типові помилки Бітрікса: неочищений кеш компонентів, прямі SQL-запити замість ORM, відсутність перевірки $USER->IsAuthorized().
4. Функціональне → регресійне → деплой.
5. Моніторинг після релізу — помилки в bitrix/error.log, метрики в аналітиці, алерти по 500-м.

Закажіть тестування сьогодні — і ми підготуємо тест-план за 2 дні.

Терміни та вартість тестування

Що входить у роботу: детальний тест-план із чек-листами за модулями, автоматизований набір E2E-тестів (Playwright/Cypress) під ваш стек, звіт із результатами, скріншотами помилок і рекомендаціями, інтеграція тестів у ваш CI/CD (GitLab CI, GitHub Actions, Bitbucket Pipelines), супровід UAT — до трьох ітерацій виправлень без додаткової оплати, документація процесу тестування для вашої команди.

Баг на продакшені — це не тільки вартість виправлення. Середнє виправлення критичного дефекту коштує від 20 000 грн, а втрати від зламаного кошика за вихідні на проєкті з оборотом 5 млн/міс можуть сягати 400 000 грн. Інвестиція в тестування — це страховка вашого бізнесу.

Зв'яжіться з нами, щоб отримати комерційну пропозицію та детальний план тестування для вашого проєкту.