Налаштування візуального регресійного тестування 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'і не тільки код, але й візуальні зміни.