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

Представьте: вы обновили CSS в шаблоне, изменили компонент или просто добавили новый jQuery-плагин. Кнопка «Купить» съехала на 3 пикселя, блок с ценой перекрыл галерею на мобильных, шрифт в карточке товара стал на 2px меньше. Глазом не поймать, а клиенты жалуются на кривую вёрстку. Визуальное регрессионное тестирование (VRT) решает эту проблему: делает скриншот страницы до и после изменений, сравнивает попиксельно и подсвечивает расхождения. Мы внедряем такую проверку на проектах Битрикс и делимся опытом. За многие годы мы реализовали более 150 проектов, и каждый сталкивался с визуальными регрессиями после обновлений. Экономия на тестировании — от $360–520 в месяц. Автоматизация тестирования — единственный способ гарантировать стабильность вёрстки без ручного перебора всех страниц.

"Визуальное регрессионное тестирование — стандартная практика для гарантии неизменности UI." — Playwright Documentation

Почему визуальное регрессионное тестирование необходимо для Битрикс-проектов?

Битрикс-сайты — это сложные шаблоны с кастомизацией, компонентами и динамическим контентом. Даже точечное изменение вёрстки может сломать адаптив, перекрыть элементы или испортить отображение на мобильных. Ручная проверка всех страниц после каждого деплоя — дорого и медленно. Автоматизация решает эту проблему: скриншоты снимаются за минуты, а diff подсвечивает отклонения. VRT экономит до 20 часов ручного тестирования в месяц на среднем проекте. Кроме того, оно отлавливает регрессии, которые невозможно заметить глазами — например, смещение на 1px или изменение отступов.

Инструменты для VRT

Playwright со встроенными snapshot-тестами — наиболее интегрированный вариант, если фреймворк уже используется для E2E. По опыту, он в 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/**',
  },
];

Маскирование динамических элементов

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

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)
• Документация и обучение команды

Стоимость настройки — от $270–390. Многолетний опыт с Битрикс, 150+ реализованных проектов. Закажите настройку — и мы гарантируем стабильность вёрстки. Получите консультацию по вашему проекту — пишите, оценим его за 1 день.

Стратегия внедрения

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