Почему E2E-тестирование критично для Битрикс-проектов?
После каждого обновления модуля, шаблона или API-интеграции кто-то вручную проверяет корзину, оформление заказа и личный кабинет. Процесс занимает 2–3 часа, но всё равно пропускает регрессии: ни один тестировщик за один прогон не охватит пять браузеров, мобильные вьюпорты и авторизацию через соцсети. У нас за плечами более 50 проектов на Битрикс — примерно в трети случаев релиз задерживался именно из-за пропущенной регрессии, обнаруженной в последний момент. E2E-тесты решают эту проблему автоматически: они прогоняются за 15–20 минут, стабильно находят те самые кейсы, которые человек пропускает.
Как мы это делаем?
Настраиваем тестовую среду, выбираем инструмент, пишем Page Object Model для ключевых компонентов и интегрируем прогон в ваш CI/CD. Работаем под ключ — от аудита текущей архитектуры до передачи документации и обучения команды.
Playwright vs Cypress: что выбрать для Битрикс?
| Критерий | Playwright | Cypress |
|---|---|---|
| Поддержка браузеров | Chromium, Firefox, WebKit | Только Chromium и производные |
| Мобильные вьюпорты | Эмуляция устройств (iPhone, Pixel и др.) | Ограниченная эмуляция |
| Работа с несколькими вкладками | Нативно | Не поддерживается |
| Сетевой перехват | Есть (route, waitForResponse) | Есть, но сложнее |
| Интеграция с CI/CD | Простая, встроенный репортер | Требует дополнительных плагинов |
| Скорость выполнения | Высокая (параллельный запуск) | Средняя |
Playwright — оптимальный выбор для Битрикс-проектов. Он поддерживает все браузеры в одном запуске, работает headless и headful, имеет мощный локатор API, который не ломается при изменении DOM. Встроенная эмуляция мобильных устройств и сетевой перехват — то, что нужно для тестирования sale.order.ajax с его асинхронностью.
Cypress хорош для SPA, но для многостраничных Битрикс-сайтов его ограничения (один origin, отсутствие нативной работы с несколькими вкладками) создают проблемы. В наших проектах мы используем Playwright в 9 случаях из 10.
Инфраструктура тестовой среды
Тестовая среда — обязательно отдельная база данных с фиксированными данными. Никаких тестов на продакшене. Мы разворачиваем копию сайта с известными характеристиками: каталог из 50–100 товаров, несколько типов плательщиков, настроенные способы доставки и оплаты. Минимальная структура репозитория:
tests/ e2e/ fixtures/ # JSON с тестовыми данными pages/ # Page Object Model specs/ # сценарии playwright.config.ts // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests/e2e/specs', timeout: 30_000, retries: process.env.CI ? 2 : 0, use: { baseURL: process.env.TEST_BASE_URL || 'https://test.shop.example.com', trace: 'on-first-retry', screenshot: 'only-on-failure', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'mobile', use: { ...devices['iPhone 13'] } }, ], }); Page Object Model для Битрикс
Стандартные компоненты bitrix:sale.order.ajax, bitrix:sale.basket.basket и bitrix:system.auth.form имеют устойчивые CSS-классы. Page Object изолирует локаторы от тестов — если в новой версии шаблона меняется верстка, правим один файл, а не все сценарии.
// tests/e2e/pages/CartPage.ts import { Page, Locator } from '@playwright/test'; export class CartPage { readonly page: Page; readonly checkoutButton: Locator; readonly totalPrice: Locator; constructor(page: Page) { this.page = page; this.checkoutButton = page.locator('.basket-checkout-btn'); this.totalPrice = page.locator('.basket-coupon-block-total-price-current'); } async goto() { await this.page.goto('/personal/cart/'); } async applyPromocode(code: string) { await this.page.fill('.basket-coupon-field-input', code); await this.page.click('.basket-coupon-apply-btn'); await this.page.waitForResponse(resp => resp.url().includes('ajax_basket') && resp.status() === 200 ); } } Ключевые сценарии
Добавление в корзину и оформление заказа:
// tests/e2e/specs/checkout.spec.ts import { test, expect } from '@playwright/test'; import { CartPage } from '../pages/CartPage'; test('checkout flow', async ({ page }) => { // Добавляем товар со страницы каталога await page.goto('/catalog/electronics/headphones/sennheiser-hd-599/'); await page.click('.catalog-element-offer-set-item:first-child'); // выбор SKU await page.click('.btn-buy'); await expect(page.locator('.bx-basket-count')).toContainText('1'); // Переход в корзину const cart = new CartPage(page); await cart.goto(); await expect(cart.totalPrice).toBeVisible(); // Оформление await cart.checkoutButton.click(); await page.fill('#order-name', 'Иван Иванов'); await page.fill('#order-email', '[email protected]'); await page.fill('#order-phone', '+79001234567'); await page.click('#pay-system-1'); // выбор способа оплаты await Promise.all([ page.waitForURL(/\/order\/success\//), page.click('.btn-checkout-submit'), ]); await expect(page.locator('.sale-order-detail-result')).toBeVisible(); }); Авторизация и личный кабинет:
test('login and account access', async ({ page }) => { await page.goto('/personal/login/'); await page.fill('#USER_LOGIN', '[email protected]'); await page.fill('#USER_PASSWORD', 'testpassword123'); await page.click('.login-btn'); await expect(page).toHaveURL(/\/personal\//); await expect(page.locator('.personal-user-name')).toContainText('Иван'); }); Интеграция в CI/CD
Настраиваем прогон тестов при каждом пуше в main/staging. В случае падения артефакты (скриншоты, трейсы) сохраняются для анализа. Пример конфига GitHub Actions:
# .github/workflows/e2e.yml name: E2E Tests on: push: branches: [main, staging] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: 20 } - run: npm ci - run: npx playwright install --with-deps chromium - run: npx playwright test env: TEST_BASE_URL: ${{ secrets.TEST_BASE_URL }} - uses: actions/upload-artifact@v4 if: failure() with: name: playwright-report path: playwright-report/ Что входит в настройку E2E (что мы отдаём)
- Аудит текущей архитектуры: какие компоненты используются, как реализована асинхронность, какие сценарии критичны.
- Проектирование тестового покрытия: согласование списка сценариев с вашей командой.
- Написание Page Object Model для 5–10 ключевых компонентов.
- Реализация 15–30 тестовых сценариев (корзина, checkout, авторизация, фильтрация, промокоды, личный кабинет).
- Настройка CI/CD прогона (GitHub Actions / GitLab CI / Jenkins).
- Документация по запуску и поддержке тестов.
- Обучение команды: 2–3 часовой воркшоп по добавлению новых сценариев.
Какие сценарии покрывать в первую очередь?
| Сценарий | Приоритет | Компоненты Битрикс |
|---|---|---|
| Добавление в корзину + checkout | Критический | sale.basket.basket, sale.order.ajax |
| Авторизация / регистрация | Критический | system.auth.form |
| Поиск + фильтрация каталога | Высокий | search.title, catalog.smart.filter |
| Применение промокода | Высокий | sale.basket.basket.coupon |
| Личный кабинет (история заказов) | Средний | sale.personal.order.list |
Стабильность тестов — главная задача. Мы используем waitForResponse вместо waitForTimeout, локаторы по data-testid там, где стандартные CSS-классы меняются при обновлениях шаблона. При нестабильных тестах проблема почти всегда в асинхронности Битрикс AJAX, а не в Playwright.
Наш опыт и гарантии
Мы — сертифицированные партнёры 1С-Битрикс с опытом более 5 лет. За это время реализовали E2E-тестирование для 20+ проектов разной сложности — от небольших интернет-магазинов до корпоративных порталов на Битрикс24. Гарантируем стабильность тестов: после передачи они не падают на пустых изменениях. Если возникают вопросы — бесплатно консультируем в течение месяца после сдачи.
Как заказать настройку?
Оценим ваш проект за 1–2 рабочих дня. Для этого нужен доступ к репозиторию и тестовой среде. Свяжитесь с нами — расскажем, какие сценарии покроем в первую очередь и сколько это займёт времени по срокам.