Налаштування Cypress-тестів для 1С-Бітрікс

Налаштування Cypress-тестів для 1С-Бітрікс

Бітрікс-проєкт зростає, і ручне регресійне тестування починає з'їдати 30% бюджету. Ми стикалися з цим не раз. Наші інженери впроваджують Cypress-тести для E2E-покриття критичних шляхів — фільтрація, кошик, оформлення замовлення. Результат: прогін набору тестів займає 10 хвилин замість 3 годин ручних перевірок. Помилки ловляться до деплою, а flaky-тести майже зникають.

Чому Cypress кращий за Selenium для Бітрікс?

Cypress виконується всередині браузера, має повний доступ до DOM і мережі. На відміну від Selenium, він автоматично чекає появи елементів та AJAX-відповідей, тому гонки умов з sleep() не потрібні. На практиці це дає в 2-3 рази менше flaky-тестів і скорочує час прогону в середньому на 40%. Крім того, Cypress вміє робити знімки екрану при падіннях та записувати відео — налагодження займає хвилини, а не години. Як підтверджує офіційна документація, автоматичні очікування Cypress значно знижують кількість нестабільних тестів.

Які проблеми вирішуємо

Нестабільні тести Selenium — часті баги через повільні AJAX-запити Бітрікс (фільтрація, оновлення кошика). Cypress дочікується завершення всіх мережевих запитів до переходу до наступного кроку.

Складність з CSRF та сесіями — Бітрікс використовує sessid для захисту від CSRF. Cypress автоматично підхоплює cookies, а ми додаємо кастомні команди для коректної авторизації.

Відсутність CI-інтеграції — тести запускаються локально, але не в пайплайні. Ми налаштовуємо запуск в GitHub Actions / GitLab CI, регрес перевіряється при кожному пуші.

Як налаштувати Cypress під Бітрікс-проєкт?

Встановлення та базова конфігурація займають 4–8 годин. Ключові кроки:

1. Встановлення фреймворку

npm install --save-dev cypress 

2. Створення конфігу cypress.config.ts:

import { defineConfig } from 'cypress'; export default defineConfig({ e2e: { baseUrl: 'https://test.site.ru', specPattern: 'cypress/e2e/**/*.cy.ts', supportFile: 'cypress/support/e2e.ts', viewportWidth: 1280, viewportHeight: 900, defaultCommandTimeout: 8000, requestTimeout: 10000, video: false, screenshotOnRunFailure: true, experimentalModifyObstructiveThirdPartyCode: true, }, env: { adminLogin: 'admin', adminPassword: '', // зі змінної оточення CYPRESS_adminPassword siteSessid: '', }, }); 

3. Додавання кастомних команд для роботи з Бітрікс (авторизація, додавання в кошик, отримання sessid).

4. Написання E2E-тестів, наприклад, для розумного фільтра каталогу:

// cypress/e2e/catalog/filter.cy.ts describe('Розумний фільтр каталогу', () => { beforeEach(() => { cy.visit('/catalog/tools/'); cy.get('.catalog-filter').should('be.visible'); cy.get('.product-list').should('be.visible'); }); it('фільтрує товари за брендом', () => { cy.get('[data-filter-prop="BRAND"] [value="bosch"]').click(); cy.get('.catalog-loading').should('not.exist'); cy.url().should('include', 'brand=bosch'); cy.get('.product-brand').each($el => { cy.wrap($el).should('have.text', 'Bosch'); }); }); it('скидає фільтр', () => { cy.get('[data-filter-prop="BRAND"] [value="bosch"]').click(); cy.get('.catalog-loading').should('not.exist'); cy.get('.filter-reset-btn').click(); cy.get('.catalog-loading').should('not.exist'); cy.url().should('not.include', 'brand=bosch'); }); it('відображає коректну кількість товарів у лічильнику фільтра', () => { cy.get('[data-filter-prop="BRAND"] [value="makita"]').click(); cy.get('.catalog-loading').should('not.exist'); cy.get('.products-count').invoke('text').then(text => { const count = parseInt(text.replace(/\D/g, '')); cy.get('.product-card').should('have.length', Math.min(count, 24)); }); }); }); 

Порівняння Cypress та Selenium для Бітрікс

Для ізоляції тестів від зовнішніх сервісів використовуйте cy.intercept для мока AJAX-запитів. Це особливо корисно при інтеграції з 1С, коли обмін даними може бути нестабільним. Практичний кейс: в одному проєкті з каталогом з 10 000 товарів ми налаштували мок для відповідей фільтрації, що скоротило час прогону з 45 до 12 хвилин.

Як відбувається впровадження?

Аудит поточного функціоналу — визначаємо критичні сценарії (каталог, кошик, чекаут, особистий кабінет).

Налаштування інфраструктури — встановлення Cypress, конфігурація під ваш шаблон, підключення CI.

Написання тестів — покриваємо 5–10 ключових сценаріїв на старті, потім розширюємо до повного регресу.

Інтеграція в CD/CI — налаштування запуску при кожному pull request, розсилка звітів у Slack/Telegram.

Навчання команди — проводимо сесію з написання та підтримки тестів.

Що входить в роботу

• Конфігурація проєкту Cypress під ваше середовище.
• Набір кастомних команд (авторизація, вибір валюти, отримання sessid).
• Пул E2E-тестів критичних шляхів (від 10 тестів).
• Інтеграція з CI (GitHub Actions / GitLab CI).
• Документація з запуску та підтримки.
• 1 місяць супроводу: фікс flaky-тестів та доопрацювання.

Строки

Наші інженери мають більше 10 років досвіду з Бітрікс та сертифікати 1С-Бітрікс. Гарантуємо стабільність тестів і прозору звітність. Зв'яжіться з нами для консультації та оцінки вашого проєкту. Замовте впровадження тестування — скоротите витрати на регрес у 2-3 рази. Отримайте консультацію по вашому проєкту — ми оцінимо складність та запропонуємо оптимальний набір тестів.