Налаштування візуального регресійного тестування 1С-Бітрікс

Уявіть: ви оновили CSS у шаблоні 1С-Бітрікс, змінили компонент або просто додали новий jQuery-плагін. Кнопка «Купити» з'їхала на 3 пікселі, блок із ціною перекрив галерею на мобільних, шрифт у картці товару став на 2px менше. Оком не вловити, а клієнти скаржаться на криву верстку. Візуальне регресійне тестування (VRT) вирішує цю проблему: робить скріншот сторінки до та після змін, порівнює попіксельно й підсвічує розбіжності. Ми впроваджуємо таку перевірку на проєктах Бітрікс і ділимося досвідом. За багато років ми реалізували понад 150 проєктів, і кожен стикався з візуальними регресіями після оновлень. Економія на тестуванні може бути значною: орієнтовно до $500 на місяць на середньому проєкті. Автоматизація тестування — єдиний спосіб гарантувати стабільність верстки без ручного перебору всіх сторінок.

Чому візуальне регресійне тестування необхідне для Бітрікс-проєктів?

Бітрікс-сайти — це складні шаблони з кастомізацією, компонентами та динамічним контентом. Навіть точкова зміна верстки може зламати адаптив, перекрити елементи або зіпсувати відображення на мобільних. Ручна перевірка всіх сторінок після кожного деплою — дорого і повільно. Автоматизація вирішує цю проблему: скріншоти знімаються за хвилини, а diff підсвічує відхилення. VRT економить до 20 годин ручного тестування на місяць на середньому проєкті. Крім того, воно виловлює регресії, які неможливо помітити очима — наприклад, зсув на 1px або зміну відступів. Наш досвід показує: 95% візуальних регресій виявляються автоматично. Час тестування скорочується на 70%.

Інструменти для VRT

Playwright із вбудованими snapshot-тестами — найбільш інтегрований варіант, якщо фреймворк уже використовується для E2E. За досвідом, Playwright в 3-5 разів швидше Percy для невеликих проєктів і не вимагає щомісячної підписки. Для більшості Бітрікс-проєктів цього достатньо. Якщо потрібна розширена платформа з diff-аналітикою та хостингом знімків — підійде Percy, але його вартість при активному використанні може бути вищою.

Як налаштувати snapshot-тести в Playwright

Ось покрокова інструкція для швидкого старту:

1. Встановіть Playwright: npm init playwright@latest.
2. Налаштуйте конфігураційний файл playwright.config.ts:

// playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ snapshotPathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}', expect: { toHaveScreenshot: { maxDiffPixels: 50, // допуск: 50 пікселів різниці threshold: 0.01, // 1% відмінностей на піксель animations: 'disabled', // вимикаємо CSS-анімації }, }, }); 

3. Створіть тести для ключових сторінок: головна, каталог, картка товару, кошик, чекаут.

Базові visual-тести для Бітрікс

// tests/visual/catalog.spec.ts import { test, expect } from '@playwright/test'; test.describe('Catalog visual', () => { test('catalog section page', async ({ page }) => { await page.goto('/catalog/electronics/'); await page.waitForLoadState('networkidle'); await page.evaluate(() => { document.querySelectorAll('.catalog-item-label-sale').forEach(el => { (el as HTMLElement).style.visibility = 'hidden'; }); }); await expect(page).toHaveScreenshot('catalog-section.png'); }); test('product card', async ({ page }) => { await page.goto('/catalog/electronics/headphones/model-x100/'); await page.waitForLoadState('networkidle'); const timer = document.querySelector('.sale-timer'); if (timer) await page.evaluate(() => (document.querySelector('.sale-timer') as HTMLElement).style.display = 'none'); await expect(page).toHaveScreenshot('product-card.png', { fullPage: false }); }); test('cart page', async ({ page }) => { await page.request.post('/local/ajax/cart-add.php', { data: { product_id: 123, quantity: 1 } }); await page.goto('/personal/cart/'); await page.waitForLoadState('networkidle'); await expect(page).toHaveScreenshot('cart.png'); }); }); 

Мобільний viewport

Окремий проєкт у конфігу для мобільного вигляду:

// playwright.config.ts projects: [ { name: 'desktop-chrome', use: { viewport: { width: 1440, height: 900 } }, }, { name: 'mobile-iphone', use: { ...devices['iPhone 14'], viewport: { width: 390, height: 844 }, }, testMatch: '**/visual/**', }, ]; 

Окремий мобільний тест для iPhone та Android.

Маскування динамічних елементів

Бітрікс-сторінки містять елементи, які змінюються щоразу: лічильники відвідувачів, таймери акцій, «Сьогодні переглядають» тощо. Їх потрібно маскувати:

await expect(page).toHaveScreenshot('homepage.png', { mask: [ page.locator('.bx-visitor-counter'), page.locator('.product-views-count'), page.locator('.sale-countdown-timer'), page.locator('.personal-greeting'), ], }); 

CI/CD інтеграція

Приклад пайплайну для GitHub Actions:

# .github/workflows/visual.yml visual-tests: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: npm ci - run: npx playwright install chromium - run: npx playwright test tests/visual/ env: TEST_BASE_URL: ${{ secrets.STAGING_URL }} - uses: actions/upload-artifact@v4 if: failure() with: name: visual-diff path: test-results/ 

При падінні тесту в test-results/ будуть три файли: еталон, актуальний знімок і diff із підсвіченими відмінностями.

Що робити при хибних спрацьовуваннях?

Хибні спрацьовування виникають через динамічний контент (лічильники, таймери) або випадкові зміни (наприклад, різний контент у віджеті новин). Рішення: маскуйте такі елементи (як показано вище) або збільште maxDiffPixels. Якщо ж дизайн змінився навмисно, оновіть еталонні скріншоти командою npx playwright test --update-snapshots tests/visual/ і закомітьте нові знімки в репозиторій — рев'юер побачить у diff не тільки код, але й візуальні зміни.

Що входить у налаштування під ключ

• Аудит поточного стану та виділення 10-15 ключових сторінок
• Написання snapshot-тестів для десктопа та мобільних версій
• Налаштування CI/CD (GitHub Actions, GitLab CI)
• Маскування динамічних елементів та налаштування допусків
• Інтеграція зі сповіщеннями (Telegram, Slack, Bitrix24)
• Документація та навчання команди

Вартість налаштування під ключ — від $1500 (визначається після аналізу). Понад 10 років досвіду з 1С-Бітрікс, 150+ реалізованих проєктів. На ринку з 2013 року. Замовте налаштування — і ми гарантуємо стабільність верстки. Отримайте консультацію по вашому проєкту — пишіть, оцінимо його за 1 день.

Стратегія впровадження

Починайте з головної, сторінки каталогу, картки товару та кошика — це 80% того, що ламається при оновленнях шаблону. При навмисній зміні дизайну еталони оновлюються командою npx playwright test --update-snapshots tests/visual/. Оновлені скріншоти комітяться в репозиторій як частина PR — рев'юер бачить у diff'і не тільки код, але й візуальні зміни.