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

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

"Визуальное регрессионное тестирование — стандартная практика для гарантии неизменности 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)
• Документация и обучение команды

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

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

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